Four Custom Icon Font Generators Compared
Icon fonts are all the rage right now. They make it so dang easy to embed vector graphics into a page that designers everywhere are turning to them as the primary way to handle icons.
The problem of course is, we need more control over which icons we embed. Sometimes we pull from a variety of sources, including our own work, and we need a good way to put it all together. Enter icon font generators. Follow along as we compare a few of our favorites.
December 27th, 2012 Posted in CSS
CSS Card Tricks
Know any good card tricks? Hopefully, after today, you will! We’re going to build some simple and attractive playing cards with pure CSS, then we’ll learn how to target and animate each card for some added fun.
Along the way, we’ll see how to use before and after to build the cards with minimal markup. Let’s get started!
December 26th, 2012 Posted in CSS
Create an Animated Share Menu With CSS
Sharing is an integral part of the web experience and designers are always looking for new and interesting ways to highlight or show off the sharing portion of their pages.
Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own. Let’s jump in and see how it works.
December 18th, 2012 Posted in CSS
7 Awesome Emmet HTML Time-Saving Tips
Emmet, formerly Zen Coding, is one of the most downright practical and productive text editor plugins that you will ever see. With its ability to instantly expand simple abbreviations into complex code snippets, Emmet makes you feel like a powerful coding wizard with the world at your fingertips.
As a follow up to our previous article on the basics of Zen Coding, today we’re going to dive into seven awesome tips to help you become a true Emmet pro.
December 17th, 2012 Posted in CSS
Divshot: An Awesome Way to Design and Build Bootstrap Pages
Recently, we took a close look at Easel, a web-based site builder that leverages Twitter Bootstrap. Today we’re following that up with a tour of a very similar tool: Divshot.
With Divshot, you can quickly and easily build clean, responsive web page layouts using a combination of visual tools and hand coding. It’s a really slick tool and I think you’re going to enjoy using it.
December 11th, 2012 Posted in CSS
Build an Adaptive CSS Modal Window
This tutorial is yet another fun CSS project that helps you build something that you may have thought was only possible with JavaScript. We’re going to create a modal window that can be shown and hidden with a click that’s powered by a CSS checkbox.
To sweeten the deal, we’re also going to use a media query to ensure that the modal screen adapts well to smaller screen sizes. Let’s jump in and see how it all works!
December 5th, 2012 Posted in CSS
Swap Your Page’s Background Image on Navigation Hover
I love the challenge of building something with CSS that uses one item to trigger another. It can get pretty tricky to wrap your mind around all of the pieces involved and come up with a way to flow your HTML in a way that is easily controlled in your CSS.
Today we’re going to embark on just such a challenge. We’ll build a basic home page that swaps out background images based on the link that you’re hovering over in the navigation. Along the way, you’ll learn all about the idea of remote hovers and how to wield them in your projects.
November 29th, 2012 Posted in CSS
Build a Freaking Awesome Pure CSS Accordion
Who has two thumbs and loves to push the bounds of CSS? This guy. Let’s jump into a project that does just that. It’s pretty experimental and won’t pass the semantic police, but it’ll teach you a heck of a lot about advanced CSS tactics and will be tons of fun.
What we’re going to build is a pure CSS horizontal accordion slider. You’ll be able to insert as many slides as you want, each with unique content and each accessible via a click event, all without a lick of JavaScript. Impossible you say? Never!
November 28th, 2012 Posted in CSS
30 Amazing Resources for Sass Lovers
Despite the predictions of countless skeptics, Sass hasn’t proved to be a fad at all, but rather a remarkably robust set of tools that genuinely improve CSS authoring.
I’m a huge Sass fan and I know many of you are too, so I’ve compiled this list of thirty amazing resources for Sass lovers. In it you’ll find all kinds of goodies built on and for Sass: frameworks, plugins, apps and a lot more.
November 26th, 2012 Posted in CSS
Easel: A WYSIWYG Bootstrap Page Builder
Twitter Bootstrap makes creating complex page layouts a breeze. Drop in a few lines of HTML, apply a few classes and you’ve got yourself a decent looking, minimal working mockup.
Wouldn’t it be nice if things were even easier though? What if Bootstrap had a visual interface? What if you could build Bootstrap pages by dragging and dropping elements onto an empty canvas? With Easel.io, you can do exactly that. Let’s see how it works.
November 20th, 2012 Posted in CSS