April 17, 2013 in Learn
Customize an HTML5 Webpage using the Bootstrap Framework
Many web developers are familiar with Twitter Bootstrap and have seen this library on a number of projects. The Bootstrap core is fantastic when you need a CSS reset along with other common layout features. It may not be the…
March 26, 2013 in Learn
Dynamic jQuery Image Avatar Cropping Effect
I can still remember the old digg.com user profiles with dynamic avatar cropping via JavaScript. Their user interface was clean, easy to use, displayed a sample before you cropped, and would auto-update as you changed the selection box. I have…
March 6, 2013 in Learn
HTML5/CSS3 Image Thumbnail Gallery with Lightbox Effect
The fading lightbox interface has become a staple in many website layouts. This dynamic script was originally based off Lightbox as a pure JavaScript library. Open source developers eventually start playing around with these codes to generate new designs, plugins,…
February 21, 2013 in Learn
Adding Motion into Web Design with Animate.css
Lots of frontend web developers have been getting interested in dynamic interfaces using motion effects. This is all too common with many advancements within popular JavaScript libraries. But there has also been a lot of interest in CSS3 animated effects….
February 20, 2013 in Learn
Create an Absolute Basic Mobile CSS Responsive Navigation Menu
In this tutorial we will go over the process in coding a very basic CSS responsive navigation menu. We will transform a basic non-list style navigation to a drop down menu using media queries in our stylesheet. There’s no need…
February 18, 2013 in Learn
Take Control of the Box Model with box-sizing
I get asked a lot about the CSS box-sizing property, especially from beginning designers and developers who’ve dealt with broken layouts and misaligned grids. The CSS box model can be a little deceiving and tricky to work with at times,…
February 13, 2013 in Learn
SVG Path Animation with jQuery and Illustrator
As technology in the web moves forward we are offered new tools to build amazing web applications. Scalable Vector Graphics or SVG’s have been gaining traction in the past year or so as most browsers handle the image file extension…
January 29, 2013 in Learn
Create a Themable Button Set with Sass
If you have yet to give Sass a try, don’t worry, this is a good place to start. And if you haven’t already read Andrew’s primer on Sass, give it a read for a better understanding of what we’ll be…
January 28, 2013 in Learn
How To Create HTML5/CSS3 Columns for All Browsers
There are many techniques you may follow to create generic HTML5/CSS3 website layouts. Designers often talk in terms of columns such as 2-col or 3-col styles. There are many CSS libraries based around grid design which also allows for easy…
January 16, 2013 in Learn
The Absolute Beginner’s Guide to Sass
What is Sass? Sass stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin. It’s a way to simplify your CSS workflow, making development and maintenance tasks easier. For instance, have you ever had to do a find-and-replace…
January 14, 2013 in Learn
Using jQuery to Detect When CSS3 Animations and Transitions End
It seems like only a couple of years ago that almost every animation on a web page was done either by means of Flash or a JavaScript library like jQuery. CSS3 has put that to rest. Simple, elegant animations are…
January 10, 2013 in Learn
5 Useful CSS Selectors
Besides the usual type, descendant, class and ID selectors, CSS offers several pseudo-class and pseudo-element selectors that allow us to target HTML elements based on their positions in the document –– some even target virtual elements and generate content from…