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

Posts Tagged ‘CSS3’

Centurion is a CSS framework, built using SASS and CSS3 media queries, for creating (mostly prototype) layouts that behave good on all devices.

It includes a 960px grid (that scales down to 320px), can handle image scaling and has a navigation with desktop and mobile versions.

There are also styles for CSS-only buttons and tables. The framework is easy to learn and customizable (thanks to SASS).


Useless CSS3 Generator is a free web application that allows anyone to play with CSSs3 properties quickly.

It has generators for border-radius, box-shadow, text-shadow, opacity, RGBA and transform where values are selected with the help of sliders.

Useless CSS3 Generator

Once the values are updated, an HTML element displays the output in real-time and also generates the CSS rules.

Simply, in contrary to its name, a handy tool for anyone willing to learn and experiment CSS3 quickly.

We have icons as images, fonts and here is an inspiring gallery of icons with only HTML-CSS.

One Div is an inspiring set and showcase of icons that are created with a single <div> element and with the help of creative CSS3 rules.

One Div

There are 55+ icons, new ones are added from time-to-time and it is possible to click the source codes with a click or download them.

The icon set may not be the perfect fit for everyday use but it is a very nice source of inspiration.

  • Tags:
  • Filed under: Design, Icons, License Free
  • Baraja is a jQuery plugin, created by the talented Codrops team, for presenting a list of items similar to a deck of playing cards.

    The plugin makes use of CSS transforms for rotating + translating the items and comes with different spreading methods.

    Baraja jQuery Plugin

    It is possible to define the direction, speed, range + easing of the effect and they can be browsed with prev-next buttons.

    Once an item is clicked, it is the deck closes and focuses to the clicked item.

    The demo page for the plugin features various different uses and how the functionality can be extended.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • 1 Comment
  • Liffect is a web-based generator that provides lots of different effects for list elements.

    It makes use of CSS animations and requires jQuery for applying the delay in effects.

    There are items fading, zooming, sliding, flipping, bouncing and, a fun one, Star Wars-inspired effect.


    The website allows us to define the duration + delay and generates the necessary CSS rules instantly.

    Liffect is a must-bookmark not only for copy-pasting the effects but it is also a nice reference.

    jq-tiles is a jQuery image gallery plugin that comes with many different tile-based CSS3 effects.

    The tile effects can be customized in various ways: number of tiles in x/y axis, fading for them, their speed and more.

    It is possible to create looping galleries, feature items in a reverse order or enable auto-slide.

    jq-tiles jQuery Image Gallery

    Multiple methods exist for navigation: bullets, prev-next controls, thumbnails and an optional timer can be activated for informing users about the arrival of the next slide.

    There are also callbacks which are triggered before + after the image changes and once the slideshow ends.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • Kort is a creative concept, by Hakim El Hattab (who creates awesome stuff regularly) for displaying thumbnails.

    It works by displaying a single thumbnail where others are hidden like a stack of cards and shown when hovered.

    Kort - Thumbnail Concept

    The navigation is made with mouse movements and there are multiple built-in efffects offered.

    Kort is built with CSS3 + JavaScript and a handy resource for featuring images in a limited space.

    One% CSS Grid is a fluid grid system for creating responsive layouts quickly.

    The system is a percentage-based which means that it will adapt to any screen resolutions (mobile, tablets and big screens).

    There are 2 options provided for starting a project which is based on the sizes of the fullscreen views; 1280px and 1024px.

    One Percent CSS Grid

    Only CSS3 media queries are used (requires JS for IE 7-8 support) and image resizing is handled as well.

    Also, Photoshop actions and a Photoshop grid is available to design for the One% CSS Grid.

    oriDomi is a JavaScript library for beautifully folding up any HTML element just like a paper.

    The library doesn't depend on any JavaScript frameworks (but has optional support for jQuery) and uses CSS 3D transitions for creating the effect.


    Folding is performed as an animated event where the number of vertical/horizontal slices, speed and shading can all be set.

    There are multiple effects and events provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

    oriDomi is compatible with all modern browsers (including mobile)., a mobile prototyping service, has created a handy generator for quickly creating on/off flipswitches.

    The switches are built with pure CSS3 and it is possible to customize the look completely.

    CSS3 On/Off Switch

    It also comes with pre-defined styles for iOS4, iOS5 and Android as well.

    P.S. In order to add functionality to such a control, it would be a good idea to listen to the "state" of the switch and add our custom events accordingly.

  • Tags:
  • Filed under: Forms, Goodies, No License
  • Uptime Robot