Learn the latest tips, techniques, and approaches for laying out your websites with CSS and stylesheets.
Today we’re going to discuss a little bit about how and why Flash came to be regarded in a negative light and how we can avoid running down the same path with the modern technologies replacing it.
Multi-step CSS animations are easy with keyframes, but what if we want to use plain old transitions to achieve a similar effect? Further, how do we take a single hover event and translate that into multiple animations on different elements?
The answer lies in using buried hovers, a simple and effective trick you should definitely try out.
Using an image-based font can be a fun and quick way to implement icons across your site. It’s a super easy process that gives you complete freedom to go back and re-size your icons at any time.
Today we’ll use the excellent Pictos font to build a simple web page so you can get a feel for the process.
Do you hate CSS grid frameworks but love the rapid layout benefits that they provide? Do you struggle with the math and code necessary to create your own flexible multi-column layouts on the fly?
Today we’re going to walk you through creating your own basic, reusable system for creating multiple columns that you can implement anywhere any time with only a few lines of code. No bloated code or non-sematic class names required!
The box-reflect property is just one of many awesome new CSS3 effects that Webkit brings to the table. Unfortunately, it’s not the easiest to use. There’s a lot of syntax that can be confusing and today we’re going to sift through it and explain it in detail so you can get the hang of it.
It’s important to note that, at this point, box-reflect is only supported by Webkit browsers. It’s a superfluous visual effect so you can use it as long as you accept that it’s not going to render in anything but Chrome and Safari.
Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs.
To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to present experiences specifically catered to different visitors.
While playing around with Webkit Keyframe Animations I figured out a way to create an awesome little image slider using only CSS. It’s definitely a bit unconventional but it’s a great way to learn to think outside of the box with what you can do with CSS3.
Keep in mind that since we’re using Webkit Keyframes, this is purely an educational experiment and will only work in Safari or Chrome. As more browsers begin to support keyframe animations in the future, this method should become perfectly usable in your own web projects.
Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration.
If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy.
Today we’re going to have some more fun with CSS3 transitions. There’s a popular jQuery trick that expands the crop of an image when you hover over it and I wanted to replicate it using only CSS. To take things further, I put this effect into action in a thumbnail gallery.
Keep reading to see the live demo and follow along step by step as we explain how this works and build the whole thing from scratch.
Let’s finish the week with something fun shall we? CSS keyframe animations currently have very limited browser support, but they’re still quite interesting to learn about and experiment with.
Below we build a simple web page that leverages Webkit keyframe animations to gently shift the background color on a never ending loop. Intrigued? Read on!
Recently, I decided that I needed a refresher in all of the various CSS shorthand properties. The best way to learn something is to teach it so here’s my attempt at exactly that.
Today we’ll learn how to use CSS shorthand for backgrounds, margins & padding, borders, fonts, list-styles and transitions.
CSS3 is completely changing the game for creating buttons on the web. Techniques that were once only possible with images are now easily executable with just a few lines of code. For this post we custom built six attractively styled CSS buttons for you to copy and paste right into your projects, zero attribution required.
As with anything good in CSS3, the buttons below work great in Webkit and Mozilla browsers, but various versions of IE will fall short.