CSS Tutorials
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.
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 tell us it can improve. Yes gentlemen...it appears that size matters.
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 devices. When checking my blog's comment form on the iPad, I saw this ugly border around the "Post Comment" button:
CSS4 Preview – Selectors
CSS is one probably the best bridge between web designers and developers so updates to the CSS spec are very exciting. The W3C recently posted an update to the working Selectors Level 4 spec, and there are many useful updates to be found. Let's have a look at what new CSS selectors and features will be available to us in future browsers!
Change Mobile Safari Highlight Color with CSS
I love the amount of extra customization afforded to us by WebKit. That also makes me love the fact that, for the most part, WebKit Mobile is the choice renderer used by mobile devices. One rarely used style property is -webkit-tap-highlight-color, which allows developers to change the default tap highlight color. Here's how to use it!
Elegant Overflow with CSS Ellipsis
9/27/2011: As of Today, Firefox 7 supports this text-overflow: ellipsis.
JavaScript and CSS Spinners with spin.js
I think it's safe to say the days of using images to provide the "small touches" are over. We can now safely create gradients, drop shadows, rounded corners, and scaled, rotated, transformed animations. It seems we've now moved on to replacing more complex effects, like spinner images. A great project called spin.js has surfaced, allowing developers to create CSS-powered spinners where keyframes are available, and uses VML as a fallback for Internet Explorer. spin.js is very customizable and is built with pure JavaScript so that no toolkit is required (though a jQuery plugin is available within the site demo). Let's have a look at how to use and customize spin.js!
Cross Browser CSS Box Shadows
Box shadows have been used on the web for quite a while, but they weren't created with CSS — we needed to utilize some Photoshop game to create them. For someone with no design talent, a.k.a me, the need to use Photoshop sucked. Just because we aren't good with graphic creation, however, doesn't mean that our clients wont effects like box shadows. Once such project recently popped up for me, so I sought a cross browser compatible solution for programmatic box shadows. Here's my solution.
Drag and Drop MooTools File Uploads
Honesty hour confession: file uploading within the web browser sucks. It just does. Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms. Add to those criticism the fact that we're all used to drag and drop operations, yet up until recently, you couldn't drag files into a browser to upload them, making file uploading within the browser unintuitive. With recent advancements in browser technology, the drag and drop method is now supported, but it doesn't look good without a bit of work. Luckily MooTools Core Developer Arian Stolwijk has created a set of classes to accommodate styling drag and drop file uploading within the browser. Let's have a look at how it works!
MooTools Wall Plugin
One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna. The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered. Let me show you a quick usage of the Wall!