CSS generators for fast web page styling

CSS generators for fast web page styling

1. http://www.colorzilla.com/gradient-editor/

2. http://www.css3factory.com/linear-gradients/

3. http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

4. http://www.css3maker.com/

5.  http://www.css3.me/


Gradient Guide

1. http://louis-sawtell.com/content/tutorial-css-3-gradient-border-radius-box-shadow-reflect 

CSS 3 Gradient

Firefox
background:-moz-linear-gradient(
center top,
green 0%, green 50%,
blue 50%, red 100%
);

CSS 3 Gradient

Webkit (chrome & safari)
background:-webkit-gradient(
linear,
left top, left bottom,
from(green), color-stop(0.5,green),
color-stop(0.5,blue), to(red)
);

Border-radius

/* set the radius of each corner */
boder-radius:5px;
-moz-border-radius:5px;
/* or..
set each corner individually */
border-top-left-radius:10px;
-moz-border-top-left-radius:10px
/* or.. */
border-radius: 10px 5px 5px 5px;
-moz-border-radius: 10px 5px 5px 5px;

Box-shadow
/* drop shadow */
box-shadow: 0px 2px 5px 0px #000;
-moz-box-shadow: 0px 2px 5px 0px #000;
-webkit-box-shadow: 0px 2px 5px 0px #000;
/* inner shadow */
box-shadow: 0px 2px 5px 0px #000 inset ;
-moz-box-shadow: 0px 2px 5px 0px #000 inset ;
-webkit-box-shadow: 0px 2px 5px 0px #000 inset ;

 

2. CSS3 Circular And Elliptical Gradients [CSS3 Tips]

3. The Best CSS3 Tools, Experiments And Demos For Web Developers

The CSS3 Test
CSS3 Click Chart
CSS3 Gradient Generator

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다