CSS3

June 14, 2013 CSS , CSS3 , Design no responses # , , ,

Magic – CSS Animations With Impressive Effects

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.

Requirements: No Requirements
Compatibility: All Modern Browsers

Website: http://www.minimamente.com/magic-css3-animations/
Download: https://github.com/miniMAC/magic

May 29, 2013 CSS3 , Design no responses # , , ,

Pure – A CSS Framework By Yahoo!

Pure is a fresh one that is created by Yahoo!. It uses Normalize.CSS and doesn’t use any JavaScript but only HTML-CSS. It is so good to see new and quality frameworks are being introduced regularly by the web design/development community. 

Pure by Yahoo!

The framework is built with responsive layouts in mind and has styles for typography, grids, forms, buttons, tables and navigation.

Markup used is very simple and the whole framework is pretty lightweight (5.7KB minified and gzipped).

Also, it is modular and styles for each module can be used separately.

Requirements: Normalize.CSS
Compatibility: All Major Browsers

Website: http://purecss.io/
Download: https://github.com/yui/pure/

January 14, 2013 CSS3 , Design no responses # , , , ,

Profound Grid: A Grid System With SCSS

Profound Grid is a fresh grid system for creating responsive fixed and fluid layouts.

The grid system uses semantic markup and renders just the same in all browsers (it is using negative margins to calculate columns).

Profound Grid

It is built with SCSS, has support for nested grids and rules for pulling/pushing columns.

There are various examples provided in Profound Grid’s website and a documentation helps learning it (which is pretty straightforward).

Website: http://www.profoundgrid.com/
Download: https://github.com/artofrawr/profoundgrid/
Compatibility: All Major Browsers

December 25, 2012 CSS3 , Tutorials no responses # , , ,

Photobox – CSS3 Powered jQuery Image Gallery

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.

December 24, 2012 CSS3 , Design , HTML5 no responses # , ,

Centurion – A Responsive CSS Framework For Rapid Prototyping

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

December 3, 2012 CSS3 , Design no responses # , ,

How to design a beautiful CSS3 search form

Search box on site is one of the elements most frequently used. If you want to improve user experience in a simple way, and make it easy to search and find content for your users, then you have to add a search form on your website..

So, today we’re going to cover how to style a search form using the most exciting CSS3 features.

Continue reading

December 3, 2012 CSS3 no responses # ,

Create CSS3 dropdown menu

Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made:

Continue reading

December 3, 2012 CSS3 no responses # , ,

Create CSS3 tabs with beveled corners

To organize content on site was always an important task for web designers. Using a CSS3 tabbed navigation can help you structuring similar groups of content.

Along with so many rounded corners (which lately became the default), today you’ll learn how to create some good looking CSS3 tabs with beveled corners. We’ll do that using a clever CSS3 gradients technique.

Continue reading

May 18, 2012 CSS3 no responses # ,

CSS3 Gradient Buttons

CSS3 Buttons – a set of scalable CSS3 gradient buttons created with pure CSS , without any image or Javascript.

The buttons are scalable based on the font-size, button size and rounded corners can be adjusted by changing the font size and padding values.

Continue reading

May 2, 2012 CSS , CSS3 no responses #

Border-radius: create rounded corners with CSS!

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.

Continue reading

Pin It on Pinterest