How and Why to Use the CSS Clip Property

The CSS Clip property is an odd one. I’ve been building websites for a long time and didn’t know about it even though it’s been around for a while. In this article I am going to explore how and why to use the CSS Clip property. To visualize how the CSS Clip property works think

Quick Tip – 04: Create Drop Caps With CSS

CSS drop caps came up in a discussion with a co-worker the other day. I don’t use drop caps in web sites I design, but there’s really no reason why I shouldn’t. Example Here’s how you can create drop caps with CSS using the :first-letter pseudo-class: The Code: Demo: Lorem ipsum dolor sit amet, consectetuer

Oh Wow, That’s Neat – 03:

CSS Preprocessors like LESS, SASS, and Stylus are all the rage now-a-days and rightfully so. They all do some great stuff allowing us to write CSS in a more programmatic way where we repeat ourselves less and operate at a higher efficiency level. With all the good that they provide for us they do add

Understanding CSS Regions

Some of my favorite parts of CSS3 are those concerning layout. So far I’ve explored Flexbox and Columns, but today I’m going to dig into CSS Regions. What the Heck are They? Understanding CSS regions is pretty simple really. Basically, they allow us to flow content through multiple containers on a page. Usually we are

All You Need to Know About CSS3 Multiple Columns

Layout has traditionally been a pretty difficult thing to get right when it comes to building web sites. With CSS3, however, it looks like things are getting a bit easier. I’ve written “Flexbox: Modern Web Layouts Simplified” which covered Flexbox layout techniques. That was cool, but there are other great layout features provided for us

Oh Wow, That’s Neat – 01: Snap.svg

For those of you that have read my post “SVGs are Cool & You Should Start Using Them, If You’re Not Already” you know that I am a fan of SVGs. In fact, now that I know a little more about them I feel that they are very under used in modern web development. They

My Favorite Web Design & Development Resources

If you want to be a good web designer you’ll need to continually learn, evolve, and update your skill set. This can be challenging, overwhelming, and exhausting or it can be fun. Over the years I’ve collected a list of some pretty handy resources that help make it more fun to keep yourself relevant so

How to Use 2D and 3D CSS Transforms

Most of the time when using HTML and CSS we are simply drawing flat rectangles, rounded rectangles, or circles within 2D space. CSS Transforms allow us to alter the shape, position, rotation, and scale of html elements within both 2D and 3D space. When combined with CSS transitions, transforms can really enhance the user experience

Flexbox: Modern Web Layouts Simplified

New in the world of web layouts is the CSS3 “Flexible Box Layout Module” known as Flexbox. It is so new in fact that at the time of writing this post it is still just a W3C Recommendation and is still in flux with different browsers implementing things a little differently. That being said, it

How to Create a Text Glow Effect Using CSS3

I’ve often found myself in a position where I want to add a simple text glow effect to some text when hovering over a link. Before CSS3 the only way this was possible was to use some sort of image replacement technique or something. Well, now it can all be done with the CSS text-shadow