Good vertical rhythm on a website has numerous benefits: aesthetically the design will appear more balanced and polished; for the reader, the content will be more cohesive and easier to read. If you’ve ever read a content heavy website and found it hard for your eyes to jump to the start of the next line, it was probably due to a poor vertical rhythm. In the old days of print design, vertical rhythm was set using font sizes, line heights, margin and paddings, set in point (pt) size units. Today the same styling...
With support for CSS3 increasing with each new release for every browser, and those tiresome CSS2-only browsers slowly dropping off the usage charts, we have far more options for hover effects and transitions in general. Almost all the calls to action that you see on the Web use some form of hover effect, because they draw the eye and make a website feel more engaging. Last year I brought you a set of 8 simple transitions that will wow your users, and today we’re going to look at 8 more… Getting started...
With Halloween just a few days away, this seems like the perfect time to explain how to create an incredibly simple ghost button, in pure CSS. These buttons are referred to as ghost buttons because they have just an outline and let whatever is behind them show through. They’re incredibly popular with startups, because they have a minimal simplicity that fits that style of site. They’re also super easy to make, and can add real impact with just a few lines of CSS. To build one, the first thing you need...
In CSS3 we have two ways of creating animations: We have CSS Transitions that allow us to create some simple effects for things like hover; and we also have CSS Animations for more complicated effects. We can in fact create pretty much any animation we want using pure CSS and since it works with keyframes it uses a system we are already used to seeing in software like After Effects and Flash. In this article I'll get you through the basics of animating with vanilla CSS. Browser support ... CSS Animations...
CSS has developed exponentially in a relatively short time. From a language that began with simple style choices, we’ve developed a sophisticated way of laying out content. CSS3 has tons of amazing features, and one of the key aspects is the ability to modify an element using CSS Transforms. Browser support ... Browser support for transforms is actually fairly extensive; 2D transforms are supported by all major browsers, including IE9 and above; 3D transforms are supported by all modern...
It sounds really impossible that a language like CSS can be object oriented but it is possible to implement OOP ideas in CSS to make it into a much more pleasant writing experience whilst along the way making your CSS faster to load. What is object-oriented CSS? ... When you hear “object oriented CSS” you may think that this is somehow a new CSS, a pre-processor or something that was added to CSS but no, object-oriented CSS is the same CSS we have always written; but in a cleaner, dryer way so it's merely...
Let’s face it, the parts of CSS3 that first caught our attention were the animations and transitions. They’re something we never had before without the inclusion of JavaScript. And just because it’s CSS, doesn't mean there aren’t libraries out there to help you. One of them being Animate.css. What is Animate.css? ... Animate.css is a library that comes with dozens of cross-browser fun animations built-in that you can use in your project very easily. It’s the same idea as some of the JavaScript...
currentColor is a CSS variable-like feature that's been around for quite awhile now and has reasonably good browser support (it's supported by all modern browsers and their mobile counterparts, and even IE9+, though bugs have been reported in mobile Safari). While most variables are still being used with preprocessors until support becomes more widely established, currentColor can be used as-is. currentColor is super useful under some specific circumstances, and well worth learning (especially...