Responsive product grid layout using Media-queries

Responsive product grid layout using Media-queries


 Responsive product grid layout that comes with some UI details . The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are  included. Media queries can be used to resize the items in the grid or change the number of items in a row. 

Demo Download

Read More...

Responsive Multi column form data by using Media-queries

Responsive Multi column form data by using Media-queries

The form has three columns and depending on the screens size, they are shown in a specific manner. The form elements are 100% width so they adjust to the column size.

Demo Download

Read More...

Animated Checkboxes and radio-buttons using svg

Animated Checkboxes and Radio-buttons using Svg

Animated  SVG to create a nice visual effect for selecting of checkboxes or radio inputs. There are many possibilities for the animated graphic, like a cross, a check mark, a circle and so on, ckeck them all.

Demo Download

Read More...

Animations and Transitions for Thumbnails grid

Animations and Transitions for Thumbnails grid

Thumbnails, when there are multiple items, like a grid of images. Theremay not be  much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that these can play with delays, intensifying the viewing pleasure of the whole thing with delays, randomly or reversed.

Download   Demo

Read More...

CSS text Animation effects

CSS text Animation effects

This tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.

Rotating Words with CSS Animations effects

CSS text Animation effects Demo


Tutorial

Read More...

Enhancing Your Webpages with CSS3 Animations

Enhancing Your Webpages with CSS3 Animations

The W3C's CSS 'Animations' module has taken a while to catch on. With limited browser support,it has not proven to be one of the mostly widely used CSS3 properties. It's been available in Webkit based browsers for ages – Chrome since version 2 and Safari since version 4, but no support in Opera, IE and Firefox... until now. Firefox 5 however came out recently and with it came support for the animations module.

Enhancing  your web pages with CSS3 Animations

CSS3 Animations Demo

Download

Read More...

Polaroids with CSS3

Easily Turn Your Images Into Polaroids with CSS3.Through a combination of browser-specific CSS (2 and 3) integration and some basic styling,  the regular old images into cool looking polaroid style images—with no additional markup to show the text.

Polaroid Images with Only CSS3 

 Demo works best in Safari 4.x and Chrome 5. In Firefox you won't see the enlarging transition.

Poloroids with css3 Demo

Read More...

        Star Wars 3D Scrolling Text in CSS3

 The star wars 3d scrolling text No JavaScript, no graphics — just pure HTML5 text and CSS3. It works in Chrome, Safari and Firefox. Opera won’t show the 3D transform in the current release, but it’ll work. Internet Explorer. Hmmm. Sorry, but you’ll need to wait for IE10 since previous versions don’t support transformations and animations.

The effect is remarkably easy to implement. The HTML requires an outer element (#titles) and a section which will be scrolled

CSS Star Wars Crawling Titles 

Css3 scrolling text Demo

Css3 Tutorial

Read More...

Simple CSS Text Animation Tutorials

Simple CSS Text Animation Tutorials 

Applying CSS  to text can eliminate the previous techniques that use javascript to animate text for websites.Moving and transformed text is meant to draw attention where needed, and with CSS animation, animating text on your site can simply be applied with using keyframes that change the elements style at a certain state like swipe text and fade text .

Fade in Text CSS Transition

Swipe text effect using css

Fade text effect using css

Tutorial

Read More...

Best CSS3 Tools for Web Developers and Designers.

CSS3-Tools

These are the collection of  css3 tools and generators online.which you can also preview the effects.

1.) CSS3 Generators

Click on altuts to go to website

2.) css3maker

Click on altuts to go to website

3.) css3 Transforms

css3 transform Generator

Click on altuts to go to website


4.) css3menu

css3 menus

Click on altuts to go to website


5.) css3 Drop shadow generator

css3 shadow generator

Click on altuts to go to website

6.) css3 text shadow generator

css3 text shadow generator 

Click on altuts to go to website


7.)  CSS Gradient Generator

css gradient generator

Click on altuts to go to website

8.) css3 button maker

CSS3 Button Maker

Click on altuts to go to website

Read More...

Sidebar navigations Transition effects for off-canvas views using css trasitions

Sidebar navigations Transition effects for off-canvas views using css trasitions

This effect shows a multi level push menu with many  fancy effects with 3d rotate,scale-up,psh,slide along and many other effects

Demo  Tutorial/Download

Read More...

3D Shading with Box-Shadows using css transformations

This example shows a 3d movie poster , when mouse-over the poster it transforms and displays the the meta data about the movie. 

3d poster transformations using css

Demo     Download

Read More...

Best tools to Optimize and Format CSS Style Code

1) proCssor

Improve the readability or compactness of your CSS code with ProCSSor – a CSS code minifier and prettifier.

Go To Website


2) CSS Portal
CSS tool will help you format your code to the style you prefer. Just paste your CSS code in the textarea below and select the options for how you would like your CSS code to be formatted to

 Go To Website

Read More...

CSS3 Transitions for E-commerce and Portfolio

CSS3 Transitions for E-commerce

css3 Transition effect can very much effective foe E-commerce store and Portfolio pages.

Demo/Download

Read More...

ANNOTATION OVERLAY EFFECT WITH CSS3

An overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-class with the sibling combinator.

Demo Download

Read More...

FLIPBOARD LIKE PAGE LAYOUT

EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARD

Demo Download

Read More...

SLIDER PAGINATION CONCEPT

SLIDER PAGINATION CONCEPT

An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

Demo Download

Read More...

Responsive CSS3 Slider Without Javascript.

CSS3 Responsive Slider is, as the name implies, a responsive CSS3 slider without Javascript. 

The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.

To save our input we are using radio buttons. As mentioned above you could also use :target and anchor links, but it doesn't mimic Javascript in the same way as you would only be able to handle one action at a time, you would end up with a bunch of items in your history (clicking back would turn the slider back one), and it's been done before.

Read More...