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

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

Convert a Menu to a Dropdown

Convert a Menu to a Dropdown

Dynamic menu by css tricks that converts to a dropdown when viewed on a small screen. this is very useful while coding for a responsive layout.

responsive menu 

on small devices

Download

Read More...

jQuery MagicLine Navigation

jQuery MagicLine Navigation 

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it's animation abilities. As such, the "magic line" will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

jquery magic navigation

Demo Download

Read More...

Free Web fonts Compare and preview online

Free Web fonts Compare and preview online

1.) Web font tool , Font comparer

Web font tool , Font compare

click on altuts to go to website

2.) Typetester

Font compare and preview

click on altuts to go to website

3.) font dragr

Fonts Preview

click on altuts to go to website

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

Trasit - A Jquery plugin for css transitions and trasformations

Trasit  a Jquery plugin  transitions and trasformations

Trasit is a Jquery plugin for css transitions and trasformations like effects using jquery using which 2d and 3d transformations , transitions ,easing and many animation effects can be applied with ease.

Demo Download

Read More...

RESPONSIVE RETINA-READY MENU

A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.

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