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

Posts Tagged ‘CSS3’

Although JavaScript is seen as a reliable language for animation CSS3 has also become a great choice. Transition effects can be used even in browsers where JavaScript has been disabled. But the greatest opportunity comes with a combination of both CSS3 and jQuery using fallback methods.

This post includes a handful of brilliant CSS3 animation libraries using transition effects. Many of them are based solely on CSS3 while others utilize a jQuery fallback. You’ll also find a small heap of open source code snippets which implement the same functionality with animated transitions.

Animisition

css open source jquery plugin animition

Read the rest of this entry »

The popularity of Google Material Design has engendered a new era of user interface conceptualization. Both mobile applications and websites can be affected by Material Design precepts. This gives every type of interface designer a new style guide to follow.

In this gallery I’ve organized 15 handy resources for designing with Google Material. These include animations, buttons, CSS libraries, and a whole lot more. Take a peek at the examples in this post and see if anything can prove useful in future work.

Material UI

material ui design google open source

Read the rest of this entry »

Modern websites are using so many effects that it can be tough keeping up with everything. The initial process of learning how to code CSS3 and jQuery is often confusing but fun. As you delve into more advanced topics you’ll bump into much bigger puzzle pieces to solve.

This gallery focuses on some amazing tutorials which demonstrate how to code advanced website interface features. Topics range from tabbed widgets to SVG animations and many other ideas in-between. Take a peek at these articles and see if anything catches your attention. With a bit of practice and volition you can learn how to build other exciting user interface effects.

Tilted Content Slideshow

tilted content slideshow tutorial

Read the rest of this entry »

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.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com