CSS Tutorials
CSS Filters
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...
Facebook Tooltip HTML and CSS
Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did...
Create Spinning Rays with CSS3: Revisited
Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I...
iPhone Scrollbars with iScroll
Since we've had web browsers and JavaScript, we've been intent on replacing native browser functionalities, and for many reasons. Whether it be that the native look or functionality is ugly, doesn't work the same across browsers, or isn't as feature-rich as it should be, we've...
Control Element Outline Position with outline-offset
I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional
tabIndex=0
and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...Fix WebKit Checkbox Overflow
I want to share a quick tip about working with checkboxes in Chrome and Safari, the WebKit-based browsers. I was recently working with a series of checkboxes when I noticed that Safari and Chrome were doing some funky "cut off" with them: What's even weirder is...
DOM Manipulation with put-selector
DOM node manipulation is a big part of the web today; just look at how popular the jQuery JavaScript framework has gotten. The ability to easily work with the DOM allows us to do a lot of work in a little bit of code.
Style Scavenger: 7 CSS Snippets to Borrow from HTML5 Boilerplate
The "Scavenger" series looks at large-scale projects and focuses on the small snippets you can take from the project without needing the complete project. Starting a web application from scratch can be a boring, time-consuming task. Paul Irish's HTML5 Boilerplate project is an exceptional...
background-size Matters
It's something that makes all men live in fear, and are often uncertain of. It's never spoken, but the curiosity is always there. Nine out of ten women agree in the affirmative. Advertisers do their best to make us feel inadequate but...
Fix Button Borders in WebKit Mobile
One of the focuses of the blog redesign I've been working on is mobile support. This current blog design is passable at best when it comes to mobile display, and with mobile sales booming, I need to make sure my site is optimized for these...