This Week in CSS—November 18, 2013

Here are some nice links that we’ve gathered for you this week:

CSS3 Galleries and more

Over recent years, CSS3 has been stealing some of the ground of JS. Here are some nice slideshow examples (it’s impressive to see these pages working even with JS off. :wink: ):

CSS3 Fullscreen Slideshow (tutorial and code download [URL=“http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/”]here)
A CSS3 image slider
Responsive carousel
Responsive slider (tutorial [URL=“http://demosthenes.info/blog/627/Make-A-Responsive-CSS3-Image-Slider”]here)
Hover gallery
Fading and click to toggle examples
Fading image gallery

It’s not just slideshows that can be done with CSS3, of course. Check out these amazing demos …
Walking cat with parallax background
An analog clock
spinning shapes
Animated geometry
Card flipping
Animated card stack

Articles

Soon, layout will be transformed by new CSS3 features like Flexbox. Here’s a nice starting guide to Flexbox.
Responsive images end of year report (it’s certainly been a wild ride following this story over the past year or so).
Craig Buckler provides a nice tip on How to Maintain Image Aspect Ratios in Responsive Web Design

A bit of fun

You may never have thought to check this before, but you can now easily find out what color your name is in CSS!

Cheek of the week

“Knock knock.”
“Who’s there?”
[… extremely long pause…]
“Your web app.”

source

Wow this is AMAZING!! A flight simulator built with PURE CSS3 ANIMATION!! → http://goo.gl/o1KEP

source

If you code CSS3, make sure you use progressful degrahancement, you know, for older browsers.

source

[rule=100%]orange[/rule]

Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue. :slight_smile:

You can also view a list of previous posts here.