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

Posts Tagged ‘CSS3’

Bespoke.js is a lightweight (<1kb minified-gzipped) JavaScript framework for crafting totally custom presentations or content sliders.

It is a foundation that offers the base (keyboard + touch support and adding the necessary classes to slide items) and the rest (CSS transitions or any other JS ) can be developed however preferred.


There is a JavaScript API provided with all the major events like next, prev, a specific slide, etc. and a plugin system exists for extending it.

Also, the demo includes awesome themes that can be find many use cases to themselves.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • CSS3 provides us lots of styling options to create good-looking form elements.

    Fancy Input, a jQuery plugin, doesn’t focus on the styling part but makes the fields attractive (and fun-to-use) by adding CSS3-powered effects.

    Fancy Input

    The plugin hides the input field, places a span element containing the character pressed and applies CSS3 transitions to each element (letter).

    There are multiple built-in effects and it works with both input + textarea fields.

  • Tags:
  • Filed under: Forms, Goodies, MIT License
  • Workless is an HTML5-CSS3 framework for building cross-browsers websites with ease.

    It is a project that started as a mashup of Bootstrap + HTML5 Boilerplate, evolved more and now has most of the frequently-used stuff.


    The framework includes a grid system and styles for forms, tables, buttons, labels, notifications and typography.

    Also, there is an icon font and few jQuery plugins (modals, tooltips, text formatting) integrated.

    Photobox is a good looking jQuery image gallery that uses CSS3 transitions and animations.

    The gallery is lightweight (14kb, not gzipped) and presents the items as a wall where each item can be viewed inside a modal box.

    When the modal box is “on”, it automatically displays a list of other images as thumbnails and browsing is possible with the help of the thumbnails, prev-next buttons or keyboard.

    Photobox - jQuery Image Gallery

    Images can be zoomed in/out with the mousewheel and there is support for looping galleries.

    There are very few settings to define, which is both good and bad, depending on the way the gallery will be used.

  • Tags:
  • Filed under: Gallery, Goodies
  • 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
  • Uptime Robot