A simple, cross-browser method for vertical centering. All it needs is a declared height and some simple CSS. Works on images too…
Direct link: Absolute Horizontal And Vertical Centering In CSS
REM can be confusing, especially without a solid understanding of its partner EM and their archvillain, the PX. This article does a pretty good job of explaining all that…
Direct link: Confused About REM and EM?
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.
Direct link: Vertical align anything with just 3 lines of CSS
Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons.
Direct link: Bulletproof Accessible Icon Fonts
The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio. This post describes the implementation…
Direct link: Flexible CSS cover images
The z-index property in CSS seems simple enough, but there’s a lot to discover beneath the surface if you really want to understand how it works. In this tutorial we’ll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples…
Direct link: What You May Not Know About the Z-Index Property
Learn how to create impressive animated navigation icon transformations…
Direct link: Navicon Transformicons: Animated Navigation Icons with CSS Transforms
Some simple CSS tricks, using pseudo-elements, that you can use for centering header (or any other) elements vertically and justifying them…
Direct link: Justified and Vertically Centered Header Elements
A CSS only solution to maintaining aspect ratios when elements are resized…
Direct link: Height equals width with pure CSS
A tutorial to show you some simple CSS tricks using data attributes and pseudo-elements. The aim is to create an image caption using only an anchor and an image as markup…
Direct link: Using Custom Data Attributes and Pseudo-Elements