In this tutorial the author is going to take a step back from advanced discussions about CSS preprocessors and return to some good old basics. He works up four super simple CSS buttons, each with a unique animated hover effect.
Read MoreToday we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.
Read MoreThe vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. It works only on inline or inline-block elements and table cells and when not used on a table cell, it will affect the alignment of the element itself, not the element’s contents.
Read MoreFor the purpose of CSS styling, elements can be generally divided into a few different categories. Two of those categories are block-level elements and inline elements. Read this article that will help you code sites that are efficient and maintainable without overuse of floats or other undesirable methods.
The tutorial shows you how create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilities.
Read MoreThis tutorial shows you how to use multiple backgrounds in a simple way and how to go much further by combining the technique with hover actions and CSS transitions to create some really cool effects. You can follow along as the author code five different applications of this idea that you can copy and paste to create your own awesome hovers.
Read MoreWe no longer need to worry in regards to background images. Now, we have CSS3 and the ability to apply multiple background images to any element we like. Creative freedom! In this tutorial I’d like to take you through creating a 404 page design using multiple background images.
Read MoreTransitions are a way to smooth css changes to an element so they’re more natural. However, they don’t define the changes themselves. In this tutorial the author looks at a set of more dynamic changes, namely transforms.
Read MoreWhen we combine movements (transforms) of inanimate objects over different timeframes (transitions) we get animation. CSS3 expands on what’s possible with transforms and transitions with the aptly named animations module and Steven Bradley would like to spend some time today looking through that module. He created a simple animation demo to go along with this post. By no means is this award winning animation. In fact it’s pretty cheesy, but hopefully it illustrates how to work with animation.