Tutorials Page 115
![CSS Clear Fix]()
CSS Clear Fix
Clearing CSS floats is just as important to creating CSS structures as anything could be. For years we would clear our floated elements by adding one element with the clear: both; style simple to perform the clear. This practice was fine but it introduced elements into...
![Mighty Deals: Bundle Storm: The Bundle of Bundles]()
Mighty Deals: Bundle Storm: The Bundle of Bundles
Mighty Deals does an awesome job putting together offers that feature highly useful tools at a much lower price than you would if you purchased each tool separately. My favorite thus far was the Killer Photoshop Actions bundle -- I've spent hours adding filters to...
![Using Font Awesome Icons without <i> Tags]()
Using Font Awesome Icons without <i> Tags
If you've not used glyph icon libraries like Font Awesome before, you're really missing out. They're incredibly useful, flexible, and are easy to implement via markup. The normal method for using font awesome is by using an <i> element with an icon-specific CSS class: This...
![Remove Whitespace Between Inline-Block Elements]()
Remove Whitespace Between Inline-Block Elements
I remember being a young developer during the Internet Explorer 6 days and desperately wanting IE to adopt
display: inline-block. Theinline-blockvalue is incredibly useful when wanting to control margin and padding on "inline" elements without the need to `block and float` them. One problem...![Pure CSS Slide Up and Slide Down]()
Pure CSS Slide Up and Slide Down
If I can avoid using JavaScript for element animations, I'm incredibly happy and driven to do so. They're more efficient, don't require a JavaScript framework to manage steps, and they're more elegant. One effect that is difficult to nail down with pure CSS is sliding up...
![Generate a CSS Grid with Stylus]()
Generate a CSS Grid with Stylus
I've jumped into Stylus over the past few moths and I love it. I wouldn't say it's better or worse than SASS, it's just something a bit different. One task I've recently completed is building the standard Mozilla grid and column structure...
![Chris Coyier’s Favorite CodePen Demos]()
Chris Coyier’s Favorite CodePen Demos
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
![Font Awesome Text-Decoration and Link Underline]()
Font Awesome Text-Decoration and Link Underline
If I were to describe Font Awesome in a word, I think it would be...awesome. The icon font library is massively helpful in using quality vector glyphs instead of separate images. I tend to use a lot of icons within links, as they help users...
![Creating the Treehouse Frog Animation]()
Creating the Treehouse Frog Animation
Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS...
![Python html5lib Skipped Elements]()
Python html5lib Skipped Elements
I've been working on some interesting python stuff at Mozilla and one task recently called for called for rending a page and then finding elements with a URL attribute value (like img[src] or a[href]) and ensuring they become absolute URLs. One problem I encountered when using...






