In this post I’d like to go over the steps that I use when creating CSS image sprites for any front end development work that I am involved in.
How should IE-only styles be placed in your website’s code? Here is a review of all the methods, along with pros and cons for each.
Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.
Improved handling of kerning pairs and ligatures in modern browsers using the
One thing any good developer will tell you is that efficiency is key. Whether that be workflow, the code itself, or just achieving a single goal. Invest a little forethought at the beginning to save a lot of time later. I like to think of it as being cleverly lazy. One great example of this is by simply utilising the
id=""attribute on the
<body>element. Yep, really, something as simple as that.
Creating a pure CSS dropdown menu, using webkit animations and progressive enhancement.
I was thinking about a fun way to display my book section. I eventually found a way to pull the books out off the shelf by pure CSS magic.
The CSS white-space property can come in handy in some instances. This article explains all its possible values.
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.
The modern browsers all have rgba(), giving you a semi-transparent background colour while keeping the foreground elements (text, images) fully opaque. But if you want to use that in your design, what about IE? Here’s how to do it.