CSS Tutorials
Detect Vendor Prefix with JavaScript
Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work. These prefixes can be used in two formats: the CSS format (
-moz-
, as in-moz-element
) and the JS format (navigator.mozApps
). The awesome X-Tag project has...CSS tab-size
The ridiculous tabs vs. spaces debate within code can get just as heated as the JavaScript semi-colon debate. I'm a tab guy myself but to each their own...just don't work on a project with me if you aren't. Anyways, I was quite surprised to find...
Making Sprite-based Games with Canvas
The canvas element was introduced with HTML5 and provides an API for rendering on the web. The API is simple, but if you've never done graphics work before it might take some getting used to. It has great cross-browser support at this point, and...
Style Textarea Resizers
Modern browsers are nice in that they allow you to style some odd properties. Heck, one of the most popular posts on this blog is HTML5 Placeholder Styling with CSS, a tiny but useful task. Did you know you can also restyle the textarea resizer in WebKit...
An Interview with Eric Meyer
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...
Redacted Font
Back when I created client websites, one of the many things that frustrated me was the initial design handoff. It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...
Spoiler Prevention with CSS Filters
No one likes a spoiler. Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know. As a possible provider of spoiler content, some sites may choose to warn users ahead...
Create a Brilliant Sprited, CSS-Powered Firefox Animation
Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited. Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well. The...
Create a Sheen Logo Effect with CSS
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
Build a Street Fighter Demo with CSS Animations and JavaScript
I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations'
steps()
property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite. As with...