Demos & Downloads
CSS
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 browsers? Let me show you how!
Read Post View DemoCSS Markup
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...
Read Post View DemojQuery Markup
jQuery Wookmark
The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should." Basic web users probably think nothing of it but as a developer, I can appreciate the effort that went into creating that design, both on the server and client sides. That's why I've fallen in love with Wookmark, a jQuery plugin to create the same consistent layout effect with imagery.
Read Post View DemoCSS CSS Animations Markup
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 of time. Sometimes the article title is prefixed with [SPOILER] text or a something similar. I've thought of a better way — use CSS filters to blur spoiler content.
Read Post View DemoCSS CSS Animations Firefox OS jQuery Mobile
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 partners website also launched with an awesome Firefox animation that I couldn't pass up the opportunity to write about — let me show you how it was created!
Read Post View DemoBlog
Get One Month of Treehouse Membership Free
My new sponsor, Treehouse, is a web-based learning site that uses high quality video tutorials to teach you a new programming language, a new business strategy, and even place you in a job after you've graduated. Treehouse's learning path is great because they fill the gap between a year or two in school (which seasoned developers of other languages don't need) and venturing in the jungle of Google-search-to-find-a-hopefully-good-written-tutorial. For a developer like myself, Treehouse is the best way to quickly learn the dev environment, basic tips to coding in said language, and how to become a pro in a given language, like iOS development (which I don't know). I'll let Treehouse describe themselves...
Read Post View DemoCSS CSS Animations Features Markup
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 a CSS transition, I was able to create my own sheen effect. Let's do it!
Read Post View DemoCSS HTML5 Markup
CSS Scoped Styles
There are plenty of awesome new attributes we've gotten during the HTML5 revolution: placeholder, download, hidden, and more. Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows control over several elements:
Read Post View Demoscoped. Thestyleelement'sscopedattribute allows developers to apply styles to only the host element and descendant elements — a new level of control that CSS hasn't seen in several years.