Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘CSS3’

Writing clean CSS is a laborious task when you get into newer CSS3 properties and their respective browser prefixes. Thankfully some crafty developers have built online web applications to save us all that tiny bit of frustration.

Take a glance over these links and see if you can find any gems. Those who understand Sass/Compass will find some cool webapps in the list. Plus a number of code generators and other helpful CSS tools for any frontend developer.

CSS Comb

webapp tool css comb logo

Read the rest of this entry »

Loader/spinner icons are a part of almost any web project that involves ajax requests.

Lea Verou, an inspiring web designer has recently shared a simplistic solution to create a spinner with pure CSS.

CSS Spinner

There are already other solutions but this one is the cleanest of them all, uses only 2 elements and not much of CSS.

Everything is sized with ems, so it can be resized however preferred, it works on all modern browsers and has a fallback text for others.

Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders.

It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript.

The slider is responsive, it’ll adapt well to all devices and comes with touch support.


You can navigate through the items with keyboard, swipe events or with the help of the bullet and arrow menus.

Glide.js also has a public API that supports all its events (play, pause, next, prev, etc.).

UIPlayGround has created a huge set of icons that are built with only CSS(3).

There are 200 items in the set and uses only or two <span> tags depending on the complexity.

CSS3 Icons

It is possible to find icons for arrows, charts, media controls and lots of other actions.

Once an icon is clicked, the HTML-CSS is presented with the browser compatibility chart (worth checking before use).

Odometer is a JavaScript-CSS library for creating effects/interfaces that are familiar from “car mileage displays, airport info boards or slot machines”.

The library is standalone + lightweight (3kb) and uses CSS transformations for the effect which works pretty fast (has a fallback too).

Odometer With Javascript

It simply transforms the value of a given element to another pre-defined value with a single-line function.

And, there are few options for customization like the theme or the duration of the effect.

Custombox is a lovely jQuery plugin that enables us to create modal boxes with attractive CSS3-powered animations.

There are multiple built-in animations like fadeIn, slide, newspaper, slip, fall and much more.

The plugin has options for enabling/disabling the overlay, defining the animation speed or dimensions.

Also, there are callbacks for all the events and it has support for loading content via ajax.

Previously, few web-based CSS3 generators were shared at WRD which helped getting started with the new features of CSS3.

Create CSS3 is another one but more complete compared to others as it has support for most of the CSS3 properties.

Create CSS3

It lists the properties + allows us to customize the values of each and displays the preview instantly.

Multiple rules can be added to the same element and the generated CSS code can be edited as well.

:nth-child, the powerful CSS selector for selecting elements with a formula, has a great use when styling layouts.

If you are not experienced with the usage of this selector, nthMaster, a website focused for this helps a lot.


nthMaster presents various usage scenarios of :nth-child simply, visually and with a basic description.

These include targeting a specific element, a range, negative range, :nth-of-type usage and more.

In mobile layouts, the space is limited and it should be used wisely to display as much as possible.

That was when “off-canvas navigations (hidden menus which appear when requested)” became popular. And now, they are used on desktop too.

Off-Canvas Navigations

Codrops has recently published an article which describes how such navigations can be created and lists multiple transitions for them.

There are 10+ lovely transitions and a demo page that features them all.

P.S. If you remember, there was also another code, Meny, for such navigations.

Lately, Codrops had published an article that was sharing a list of page transitions.

The article consisted of transitions that move, fade, scale, rotate or slide elements.

Daniel Silver has wrapped them to a single CSS + JS file (elementTransitions.js) and more than one animatad element can be used in a single page.

Also, these transitions can now be triggered directly with HTML tags.

Element Transitions

Uptime Robot