Category Archives: CSS

Looking back in time by 900hp, on Flickr

A better simple slideshow

If you don’t have time to do it right, when will you have time to do it over?
— John Wooden

It’s a do-over! This is another fairly basic slideshow, written in javascript, html, and css. This is a dual-purpose project, it’s meant (1) to be something you can drop right into your page and use if you so choose, but it’s also meant (2) as an example/tutorial showing you how to build a simple DIY slideshow from scratch on your own. You can see a couple of demos of the finished product here: Continue reading A better simple slideshow

Slide Projector by macattck, on Flickr

A simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript

“It takes half your life before you discover life is a do-it-yourself project.” ― Napoleon Hill

IMPORTANT: I’ve written a new more robust slideshow, along with a code walkthough/tutorial. If you’re looking for a slideshow to use on your own site, it’ll be better and easier to use than this one. Go check it out:

A while back I wrote about a technique for building a simple automatically cycling slideshow using CSS animations, no JavaScript required. While that is definitely an interesting technique, it’s also pretty limited in how you can use it. For example, often with an image slideshow rather than just auto-advancing the slides you may want to let the user have control, so they can navigate forwards and backwards through the images at their own pace. These days you also may want a slideshow that’s responsive, so that it will work across a wide range of devices, automatically resize to fit different screen sizes, and maybe even allow some more touch-centric interaction–like swiping to the left or right instead of clicking “previous” and “next” buttons to cycle through the slides.

If this is what you need and you’re just looking for a drop-in solution, there’s no reason to reinvent the wheel, there are some great slideshow options out there already (here are just a few: Unslider, SwipeJS, SlidesJS). However if you’re more of the do-it-yourself type and you want to custom-build your own to suit your exact needs, or just want to see how it can be done, then it’s pretty easy to get started with just a little bit of HTML, CSS, and JavaScript.
Continue reading A simple DIY responsive image slideshow made with HTML5, CSS3, and JavaScript

CSS gradients: basic to advanced

“All that’s bright must fade, the brightest still the fleetest; All that’s sweet was made but to be lost when sweetest.” ― Thomas Moore

It used to be when you wanted a nice simple gradient background for your page, the process looked like this: Step 1) fire up Photoshop; Step 2) use the Gradient tool to fill the canvas with a horizontal or vertical gradient; Step 3) crop canvas into a as-small-as-possible slice (often 1px high or 1px wide); Step 4) export .gif or .jpg graphic; and so on. I’m leaving off the rest of the steps, because you either remember how to do it from past experience, or you’ll never need to know how to make a gradient that way thanks to the awesomeness of CSS gradients. Let’s take a look at what they can do! Continue reading CSS gradients: basic to advanced

A design pattern for making interesting CSS animations in under 10 minutes

“the way is long if one follows precepts, but short and helpful, if one follows patterns” ― Lucius Annaeus Seneca

I’ve had a lot of fun making a certain style of CSS animation demos on CodePen lately, all of which seem to follow a similar design pattern. Below are a couple of examples (embedded here as .gifs, but click through to see the live HTML/CSS versions): Continue reading A design pattern for making interesting CSS animations in under 10 minutes

A simple crossfading slideshow made with CSS

“Simplicity is the ultimate sophistication.” ― Leonardo da Vinci

One of the great things about the current web design landscape, compared to a few years ago, is that now it’s possible to create things with just HTML & CSS that you would have in the past needed to use JavaScript or even Flash to accomplish. One example of this is a simple image slideshow, a set of images that automatically rotates every X seconds, often with a caption for each image, like the one below (mouse over for caption).


CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.

Semantics: Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.

Offline & Storage: Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.

Device Access: Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.

Connectivity: More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.

Multimedia: Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!

3D, Graphics & Effects: Between SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.

Performance & Integration: Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.

Images and captions are from the W3C

Wait, how is the transition happening automatically, without JavaScript?

Thanks for asking. It’s accomplished through the magic of CSS keyframe animation (Also see: An Introduction To CSS3 Keyframe Animations by Louis Lazaris for an introduction). If you’re already pretty familiar with CSS animations, then go read this article by Lea Verou and see if you don’t learn something new :-)
Continue reading A simple crossfading slideshow made with CSS

Repeating patterns in CSS with :nth-child and :nth-of-type

“What we call chaos is just patterns we haven’t recognized. What we call random is just patterns we can’t decipher.” ― Chuck Palahniuk

I’ve been trying to wrap my head around how the :nth-child pseudo-class can be used to create repeating patterns with CSS, beyond just even and odd (which are perfect for zebra-striping table rows, amongst other things). What really helped me understanding it was coding up a few examples to play around with. These examples are all available on CodePen too, so you can fork or edit them there if you want. I’ll embed the pen at the bottom. Note that while I will use :nth-child for all of the examples below, they should all work just as well with the :nth-of-type pseudo-class. Continue reading Repeating patterns in CSS with :nth-child and :nth-of-type

Random fly-in animation using Sass

“It’s a cruel and random world, but the chaos is all so beautiful.”
― Hiromu Arakawa

One of the things that’s changed in the CSS world over the past several years is the rise of CSS preprocessors, and Sass is one of the most popular (LESS is another big one, if you’re interested here’s a comparison between the two from Smashing Magazine; here’s another comparison from CSS Tricks).  I hadn’t explored either much until recently, as useful as they are they have to fit into your workflow, and I just haven’t had the opportunity to use either in the context of my day job, but coding playground Codepen makes it super-easy to try out Sass (LESS too, if that’s more your thing).
Continue reading Random fly-in animation using Sass