A detailed code walkthrough that show how to create a fancy postage stamp effect on an image using only CSS…
Direct link: CSS3 Stamp effect using radial gradients
An article that discusses the pros and cons of using inline-blocks versus floats for coding your CSS layouts…
Direct link: Should You Use Inline-Blocks As A Substitute For Floats?
Direct link: Accessible custom checkboxes and radio buttons
Describes a technique to scale background images in responsive layouts…
Direct link: Responsive background images with fixed or fluid aspect ratios
A core tenet of Responsive Web Design (RWD) is fluidity and proportion. Instead of using fixed-width layouts, we enlightened web devs and designers use percentages in our CSS. Font units aren’t pixels or points anymore, they’re percentages…
Direct link: The EMs have it: Proportional Media Queries FTW!
This post is about the drop-shadow filter. You may have looked at it and thought “this is pretty much the same thing as a box-shadow” right? Well, not exactly. The big advantage of the drop-shadow filter is that it acknowledges the outline and transparency of an element…
Direct link: box-shadow vs filter: drop-shadow
A useful CSS coding reference reference for images and videos in responsive designs…
Direct link: Rundown of Handling Flexible Media
CSS 2.1 gave us 4 layout modes: block, inline, table and positioned. ‘Flexbox’ will work in addition to those. If you’re into responsive web design this should interest you as the contents of a flex container can have their display order reversed or rearranged within your CSS file. In other words, it doesn’t matter what order the source code is in as the visual order can be changed using CSS…
Direct link: Understanding the CSS3 Flexbox Flexible Box Layout Module
There are tons of free HTML email templates around but most of them don’t work well on mobile devices. This tutorial will help you cater for your newsletter subscribers that read messages on iPhones, iPads etc.
Direct link: Responsive Email Design
If you have a modern browser, check out this impressive tutorial that shows a variety of hover effects on circles. Uses border radius to create circular thumbnails and then uses CSS transitions and animations to create some interesting hover effects…
Direct link: Circle Hover Effects with CSS Transitions