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

Posts Tagged ‘CSS3’

We see lots of impressive CSS3 demos regularly: flipping, rotating or sliding items and more..

Magic is a stylesheet that includes many of these CSS effects (also mentioned that “more will be added”).

Magic CSS Animations

The effects are collected under few categories (magic, perspective, rotate, bling, static, slide) and all of the effects are pretty attractive.

Each of them has their own classes and the easiest way to use them is by adding/removing these classes to the targeted elements via JavaScript.

Least.js is a jQuery-powered image gallery that can display images in a Pinterest-like layout.

The images are displayed from an unordered list where their order is randomized on each load.

Least.js

Any clicked image doesn’t load the bigger version in a modal but by sliding other items down and the big version on the top (kinda similar to Google Image search).

The gallery makes use of HTML5-CSS3 features and works good on responsive layouts.

HTML5 Up! is a website that creates and shares very good-looking and free HTML5-CSS3 templates.

All the templates have responsive layouts (down to mobile) (uses Skel.js) and they are compatible with all major browsers.

There are already 10+ templates where new ones are added within time and they can be used freely under the CCA license for both personal or commercial projects.

Free HTML5 Templates by HTML5 Up1

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.

Bespoke.js

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

    Workless

    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
  • 2 Comments
  • 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).

    Centurion

    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
  • 2 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    HotScripts Marketplace
    PSD2HTML.com