Friday, March 6th, 2009

CSS3 Fun Tests and Hackz

Category: CSS, Standards

What would you get if you have a sample that used the following CSS3 features:

This, if you are viewing in FF3.1+:

All via:

  1. <style type="text/css" media="screen">
  2.     @font-face {
  3.         font-family: Delicious;
  4.         src: url('http://blog.mozilla.com/webdev/files/2009/02/delicious-roman.otf');
  5.     }
  6.    #css3test {
  7.            width: 350px;
  8.            margin: 0 auto;
  9.            background: #000;
  10.            padding: 20px;
  11.            color: #fff;
  12.            text-align:left;
  13.            -moz-border-radius: 10px;
  14.            text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
  15.            -moz-box-shadow: 10px 10px 5px #888;
  16.            -moz-column-count: 3;
  17.            -moz-column-gap: 1em;
  18.            -moz-column-rule: 1px solid white;
  19.            font-family: Delicious, sans-serif;
  20.            font-size:127% !important;
  21.            border: 8px solid #000;
  22.            -moz-border-bottom-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
  23.            -moz-border-left-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
  24.            -moz-border-right-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
  25.            -moz-border-top-colors:#CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
  26.        }
  27.     </style>
  28.  
  29. <div id="css3test">
  30. <p>This is a CSS3 awesome test. It demonstrates some of the awesome parts of CSS3 implemented in Firefox 3.1.</p>
  31. </div>

Also, Daniel Glazman had a fun thought and discusses a technique that could get:

  1. @if-implemented { display: table-cell}
  2.    p { background-color: green; color: yellow}
  3. @else-implemented;
  4.    p {background-color: red}
  5. @endif-implemented;
  6.  p { font-size: large}

Posted by Dion Almaer at 6:59 am
Comment here

+++--
3 rating from 7 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.