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

Posts Tagged ‘CSS3’

It seems as though 3D is quickly becoming the new 2D in digital design. This pattern has moved from the big screen onto smaller screens for the web. With a growing number of CSS/JS libraries for animation it has become easier to render objects right within the browser.

These tutorials should provide an excellent introduction to CSS3 and JavaScript oriented animation. If you’ve never coded your own custom page animations then this will take a bit of practice. But with time the whole process will become like second nature.

Read the rest of this entry »

Once you learn the basics of web development it’s common to either move into backend languages or push further into more detailed concepts. CSS alone is such an expansive subject which now includes a handful of fun CSS3 properties.

Advanced development includes complicated topics that you often need to go out of your way to understand. But it’s worth the effort to build your skillset as a designer and to fully comprehend the engrossing design language of CSS.

Read the rest of this entry »

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.

Glide.js

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.

: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.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com