Showing CSS Articles

  Clear Filter

Simple Parallax Header

Jun 19, 2015 8 Comments parallax, jQuery, CSS3, Tutorial So these are everywhere. I've seen hundreds of different ways to pull them off, and each claims to be the definitive one. This is not that parallax effect. I set a goal for myself to accomplish an efficient, effective parallax header in 15 minutes or less. What follows is the fruit of that labor.

The Power of :checked

May 04, 2015 4 Comments CSS, No Javascript The humble :checked state is often overlooked unless you're building a form, which is a downright shame. There's so much we can do with it! Anything that has two or more states (think boolean values in jQuery, if statements etc) has the potential to be done with :checked.

Creating 3D Text with Text-Shadow

Jul 18, 2014 5 Comments CSS3, Typography Playing with Codepen is fun. Every now and then, I do something silly there that might actually have an immediate practical use—and that's the case with this little tut. We're going to create a 3D effect for editable text, using only the text-shadow property. And then we're going to add something really fun on :hover. Read on, fearless coders...

CSS3 Bubble with no Images

Apr 09, 2013 4 Comments CSS3, Bubble, Tutorial Just like the ribbon banner from last month, this little tutorial doesn't serve much of a practical purpose—at least not on its own. I simply wanted to see if I could accomplish the task of illustrating a bubble (think soap bubble, not speech bubble) using only CSS3 and extremely minimal markup. Success was only a few box-shadows and pseudo-elements away.

Pure CSS Ribbon Banner

Mar 21, 2013 25 Comments css, tutorial Every now and then, I set a coding challenge for myself that may be a bit unrealistic, just to see if I can accomplish it. It helps me grow as a developer, both because I have to be creative and because it usually necessitates some research. Today, the challenge is to create a ribbon banner with pure css and html. No images allowed.

Dead Simple Dropdown Menu

Mar 08, 2013 9 Comments css, dropdowns, navigation If you're just starting out in web work, chances are you'll be asked to design a site with a drop-down menu. I spent a while perfecting my preferred method, and now young Skywalker, share it with you I will.

More Articles