CSS - Page 10

Learn the latest tips, techniques, and approaches for working with CSS.

4 Fun CSS Image Effects You Can Copy and Paste
CSS / 16 Feb 2012

4 Fun CSS Image Effects You Can Copy and Paste

Once upon a time we relied purely on Photoshop to create fancy image effects. These days though we’re turning more and more to pure CSS to add eye candy to our images. Applying custom image treatments using code makes for an infinitely flexible workflow that’s easy to tweak at any time.

Today I’ll walk you through creating some extremely simple and fun CSS image tricks. From polaroids to vignettes, you won’t believe what we can pull off.

Twitter Bootstrap 2: Bootstrap Goes Responsive
CSS / 15 Feb 2012

Twitter Bootstrap 2: Bootstrap Goes Responsive

Recently, we published a piece titled 5 Incredibly Useful Tools Built Into Twitter Bootstrap, which took a look at the basic structure of Twitter’s Bootstrap framework and walked you through implementing some of the major components.

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Three Super Easy Ways to Pull Off a Masonry Layout
CSS / 8 Feb 2012

Three Super Easy Ways to Pull Off a Masonry Layout

Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

Convert a Pricing Table PSD to HTML and CSS
CSS / 7 Feb 2012

Convert a Pricing Table PSD to HTML and CSS

Today we’re going to grab some PSD pricing tables from Design Curate and try to convert them to pure CSS so you can easily drop them into your site.

It’ll be a super basic but fun exercise in bringing a static design to the web and you’ll learn plenty of fun stuff along the way such as how to style hr tags a create a superscript effect.

Code a Useful Expanding Vertical Navigation Menu
CSS / 6 Feb 2012

Code a Useful Expanding Vertical Navigation Menu

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

5 Online Playgrounds for HTML, CSS and JavaScript Compared
CSS / 3 Feb 2012

5 Online Playgrounds for HTML, CSS and JavaScript Compared

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

Code an Awesome Animated Download Button With CSS3
CSS / 30 Jan 2012

Code an Awesome Animated Download Button With CSS3

Follow along as we create a simple and fun download button using some fancy CSS3. Our button will use lots of fun goodies including border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique double sliding drawer effect on hover.

As we go, I’ll discuss why some techniques that you might think to use should be avoided. Transitions are tricky to work with and are quite prone to refuse to work with certain properties. Read on to find out more.

Jumpstart Your Web Project With HTML KickStart
CSS / 24 Jan 2012

Jumpstart Your Web Project With HTML KickStart

Recently, we took a look at a really solid framework from the good folks at Twitter called Bootstrap. This toolkit is a swiss army knife of utilities and includes both a functional layout grid and enough pre-styled elements to get a great jumpstart on any project.

Today we’re going to look at a very similar tool from Joshua Gatcke called HTML KickStart. This framework is simply overflowing with great stuff that will enable you to build web page prototypes at light speed. Let’s jump in and build a page with it to see what we think.

Nailing Browser Support in CSS3 and HTML5: Invaluable Resources to Use Today
CSS / 23 Jan 2012

Nailing Browser Support in CSS3 and HTML5: Invaluable Resources to Use Today

New technologies are making web development more exciting than ever before. HTML5 and CSS3 provide a double dose of modern practices that are absolutely refreshing and empowering. Unfortunately, utilizing these technologies can considerably complicate your quest for cross browser compatibility.

How can you know which techniques are safe to use now and which you should either provide alternatives to or avoid altogether? Join us as we take a look at a handful of our favorite resources that quickly and easily help you make informed decisions about real world HTML5 and CSS3 implementation.

Create Amazing CSS Buttons on the Fly With CSSButton.me
CSS / 19 Jan 2012

Create Amazing CSS Buttons on the Fly With CSSButton.me

Today we’re going to have some fun as we take a look at an awesome new free tool for web developers simply called CSS Button. This web app makes it quick and easy to make the CSS buttons of your dreams using simple and intuitive controls.

I’ve seen quite a few other CSS button makers before and almost none really merit repeated use, but this site has a lot going for it and can genuinely save you a lot of time and frustration. Let’s jump in and check it out!

Beating Borders: The Bane of Responsive Layout
CSS / 18 Jan 2012

Beating Borders: The Bane of Responsive Layout

Responsive design often requires setting your widths using percentages. This is easy enough to accomplish, that is until you start throwing borders into the mix. If your columns and total width are set using percentages, a static border size wreaks havoc on your layout.

Today we’re going to look at a couple of different ways to beat this problem. You’ll learn how to create a completely fluid layout that doesn’t mind extra borders or padding one bit.

The Lowdown on :before and :after in CSS
CSS / 13 Jan 2012

The Lowdown on :before and :after in CSS

We recently took a look at :active, an extremely handy pseudo-class selector that can be used to create some awesome mouse-down effects. Today we’re going to take a step back and explore some other “pseudo” items, this time we’ll be looking at the pseudo-elements :before and :after. You’re probably beginning to see these used all over the web in advanced CSS examples so you might as well jump in and learn to use them yourself.

What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two? How are :before and :after implemented in CSS? What are some ways that developers all over the web are using these tools to perform amazing feats of modern coding? Read on to find out.