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

Posts Tagged ‘CSS3’

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.

    Liffect

    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
  • 0 Comments
  • 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.

    oriDomi

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

    Proto.io, 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
  • 0 Comments
  • ResponsiveAeon is a HTML5/CSS3-powered framework for creating responsive layouts very quickly.

    It has a grid system that is based on 12 columns with 1104px width in total and offers a very easy to understand usage with only 3 basic classes.

    The framework makes use of @mediaqueries and can work with any device in any size.

    ResponsiveAeon

    Besides the grid system, there are also styles for typography, lists, tables, buttons and forms.

    The download package includes several JavaScript files for IE compatibility, modal boxes and also PSD/AI/PNG files of the grid.

    CSS3Ps is a free Photoshop plugin that allows us to convert shapes in a PSD file into CSS3-powered elements.

    It has support for Photoshop versions starting from CS3 and works by re-directing any conversion requests to the website of the plugin.

    The CSS3 rules for the shapes are created within seconds and presented with the output.

    It works well with objects in any shape and there is support for gradients.

    CSS3Ps

    RefineSlide is a lightweight (4kb gzipped) jQuery plugin for quickly integrating a responsive, image-based slider into our websites.

    The slider uses CSS3 transitions + 3D transforms (has JS fallback) and has a bunch of attractive transitions.

    It has an option to display thumbnails (auto-formatted and responsive) or arrows as the navigation (and, there is keyboard support as well).RefineSlide

    RefineSlide allows defining captions and can display them above the each image.

    The plugin can auto-play the items, delay between each slide can be set and callbacks exist on every level.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • 1 Comment
  • Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com