Weekend Web Design Readings — Issue 4

Hi my valued readers,

This is another weekend for some web design readings. Let’s have some fun with CSS this week.

CSS Patterns

The gradients and blend modes in CSS3 allow us to create creative background patterns. Lea Verou created a page to showcase different patterns. Bennett Feely went further by adding blending effects to the patterns in his gradient showcases.

Please note that latest IE supports the gradients but not supports the blend mode. So make sure to check the footer information of the showcase page on how we can fallback on non-supported browsers.

CSS gradients by Bennett Feely

Blending gradients patterns.

Pattern is not only for background usage. We can apply patterns to hr, horizontal rules, too. @tkrugg created a CSS-only fancy pattern rules.

Michiel Bijl shows how we can archive the same result that takes care of the accessibility by using background gradients in his CodePen example.

CSS Animations

Creative use of CSS effects can make your customers smile. Here we show 2 examples from readme.io and Basecamp.

The login screen of readme.io shows its owl character with a nice animation when user focuses and leaves the password input.

readme.io login

Password field animation.
*low-resolution gif to save your bandwidth.

The sign-up page of Basecamp provides a nice and helpful illustration. When user focuses on the inputs, the helper guy points to that field to let you focus. As a bonus, the guy changes to a sad face when the email format is incorrect. A subtle detail that enhances the user experience.

Basecamp signup helper

Basecamp signup helper.
*low-resolution gif to save your bandwidth.

I made a CodePen collection that contains some CSS 3D animations, which includes a card flipping effect for a lucky draw utility I use in my class. You can use my examples in your project freely. If you have further CSS animation questions, I’m here to help.

Easing function tool

When we create animations and transitions in CSS, we often need to tune the easing function. Different types of easing functions provide different characteristics for your animation.

Matthew Lein created a tool to let you create your own easing function.

Ceaser tool

A custom bounce easing function.

Too many images

I have talked a lot of CSS stuffs in this email. That’s because proper use of CSS can help reducing the use of images as decoration purposes. According to the HTTPArchive, the average image size for a web page is 1.2MB.

I shows some CSS-related links so that we may get creative visual effects without using the images.

At last, a tool named tmi, which stands for too-many-images, by Addy Osmani lets you exam the images usage of your own website, actually any websites, from your terminal.


Thanks for your time. Hope today’s CSS tools help in your web project. Wish you have a nice Sunday.

Best Wishes,
Makzan