Friday, March 6th, 2009
CSS3 Fun Tests and Hackz
- border-radius*
- text-shadow
- box-shadow*
- column-width*
- column-gap*
- column-rule*
- @font-face
- border-color*
This, if you are viewing in FF3.1+:
All via:
HTML:
-
-
@font-face {
-
font-family: Delicious;
-
src: url('http://blog.mozilla.com/webdev/files/2009/02/delicious-roman.otf');
-
}
-
#css3test {
-
width: 350px;
-
margin: 0 auto;
-
background: #000;
-
padding: 20px;
-
color: #fff;
-
text-align:left;
-
-moz-border-radius: 10px;
-
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
-
-moz-box-shadow: 10px 10px 5px #888;
-
-moz-column-count: 3;
-
-moz-column-gap: 1em;
-
-moz-column-rule: 1px solid white;
-
font-family: Delicious, sans-serif;
-
font-size:127% !important;
-
border: 8px solid #000;
-
-moz-border-bottom-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
-
-moz-border-left-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
-
-moz-border-right-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
-
-moz-border-top-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
-
}
-
</style>
-
-
<div id="css3test">
-
</div>
-
Also, Daniel Glazman had a fun thought and discusses a technique that could get:
CSS:
-
-
@if-implemented { display: table-cell}
-
p { background-color: green; color: yellow}
-
@else-implemented;
-
p {background-color: red}
-
@endif-implemented;
-
p { font-size: large}
-
Related Content:
3 rating from 2 votes
Leave a comment