z-index seems so simple: elements with a higher z-index are stacked in front of elements with a lower z-index, right? Well, actually, no. Turns out stacking contexts are triggered by more than the general rules most of us (including me) know .. What no one told you about z-index →
Tag Archives: css
Rotating Words with CSS Animations
Dive into Flexbox
Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Great to see that after three years it has become a candidate recommendation. Time to start digging a grave for faux columns (née 2004) …
Bootstrap components using Bootleg.css
3D Hartwig Chess Set
Focal Point: Intelligent Cropping of Responsive Images
When working with images on small screen devices it is recommended to focus on the subject: don’t just show a scaled down version of the photo, it’s better to remove some of the background scenery and show the person on the photo (see the Obama example at the top of this post on responsive images). …
Continue reading “Focal Point: Intelligent Cropping of Responsive Images”
CSS Filterlab
While we have to wait for CSS Custom Filters to hit mainstream browsers, you can use CSS Filter Lab to play with built-in CSS filters already available in most WebKit browsers today, including Chrome, Safari, and even Mobile Safari on iOS6. With CSS Filters you can create stunning effects. filter: sepia(0.8) saturate(3) brightness(0.25) contrast(2); for …
CSS3 Lighting Effects
Responsive CSS3 Slider
With clever use of the general sibling selector: #slide1:checked ~ #slides .inner { margin-left:0; } #slide2:checked ~ #slides .inner { margin-left:-100%; } #slide3:checked ~ #slides .inner { margin-left:-200%; } #slide4:checked ~ #slides .inner { margin-left:-300%; } #slide5:checked ~ #slides .inner { margin-left:-400%; } Responsive CSS3 Slider →