Tutorials Page 115
![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...
![:valid, :invalid, and :required CSS Pseudo Classes]()
:valid, :invalid, and :required CSS Pseudo Classes
Let's be honest, form validation with JavaScript can be a real bitch. On a real basic level, however, it's not that bad. HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...
![Resize an Image Using Canvas, Drag and Drop and the File API]()
Resize an Image Using Canvas, Drag and Drop and the File API
Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...
