Posts Tagged ‘CSS3’

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.

:nth-child

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.