CSS3 Generator v1.6

 

Are your borders going to be rounded equally?

Yes
No
px

Your Code

FirefoxChromeSafariInternet ExplorerOpera
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
Preview Area
px
px
px
px

Your Code

FirefoxChromeSafariInternet ExplorerOpera
-webkit-border-top-left-radius: px;
-webkit-border-top-right-radius: px;
-webkit-border-bottom-right-radius: px;
-webkit-border-bottom-left-radius: px;
-moz-border-radius-topleft: px;
-moz-border-radius-topright: px;
-moz-border-radius-bottomright: px;
-moz-border-radius-bottomleft: px;
border-top-left-radius: px;
border-top-right-radius: px;
border-bottom-right-radius: px;
border-bottom-left-radius: px;
Preview Area
px
px
px

Your Code

FirefoxChromeSafariOpera
-webkit-box-shadow: ;
-moz-box-shadow: ;
box-shadow: ;
Preview Area
px
px
px

Your Code

FirefoxChromeSafariOpera
text-shadow: px px px #;
filter: dropshadow(color=#, offx=, offy=);
Preview Area



Your Code

FirefoxChromeSafariOpera

background-color: rgba(, , , );

 

color: rgba(, , , );

Preview Area

Your Code

FirefoxChromeSafariInternet ExplorerOpera
@font-face {
font-family: '';
src: url('.eot');
src: local('☺'),
url('.woff') format('woff'),
url('.ttf') format('truetype');
}

Thanks to Paul Irish for the brilliant Bullet Proof Font-Face code.

Preview Area
Nothing to see here, move along

px

Your Code

FirefoxChromeSafari
-moz-column-count: ;
-moz-column-gap: px;
-webkit-column-count: ;
-webkit-column-gap: px;
column-count: ;
column-gap: px;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Your Code

ChromeSafari
resize: ;
overflow: auto;
min-width: 50px; /*suggest a mid-width & min-height*/
min-height 50px;
Preview Area

Your Code

FirefoxChromeSafariInternet ExplorerOpera
-moz-box-sizing: ;
-webkit-box-sizing: ;
box-sizing: ;
Preview Area
If you set this to content-box, it will act like the box model we all know and love from CSS2.1
If you set it to border-box, the padding and border will render inside the box.
px

Your Code

FirefoxChromeSafariInternet ExplorerOpera
outline: px #;
outline-offset: 10px; /*Delete if you don't want an offset*/
Preview Area
You should see a white border around this box in addition to your outline.



Your Code

FirefoxChromeSafariOpera
#myID {
-webkit-transition: all ;
-moz-transition: all ;
-o-transition: all ;
transition: all ;
/* Some Defaults For You */
height:100px;
width:100px;
background:#f00;
padding:50px;
color:#00f
outline: 1px dashed #ff00ff;
/* End Defaults */
}

#myID:hover {
background:#0f0;
color: #ff0;
height:500px;
width:500px;
outline: 10px dashed #ff00ff;
}
Preview Area
Hover over here when you're done.

deg
px px
deg deg

Your Code

FirefoxChromeSafariOpera

-moz-transform: scale() rotate(deg) translate(px, px) skew(deg, deg);
-webkit-transform: scale() rotate(deg) translate(px, px) skew(deg, deg);
transform: scale() rotate(deg) translate(px, px) skew(deg, deg);

Preview Area
Selectors are incredibly amazing, but beyond the scope of this project. If you want a great article that explains them, view 456 Berea St's CSS3 Selectors Explained.
I was going to write a CSS gradient generator but then I found the CSS3 Gradient Generator which is does the job quite well.