MemoryAlpha

These are some proofs-of-concept for certain interesting CSS features. I recommend using the latest available version of your browser to view this page.

Some stuff on this page may work in your browser, some stuff may not!
Also, the CSS on this page is in no way valid (even though the page footer claims it is).

Animations

Works in: WebKit. Other browsers will apply the change, but won't animate.

Click the colored boxes to animate them. Click them again to reverse the animation.

Border radius

Works in: Gecko, WebKit. Other browsers will fall back to plain rectangles.

Some different values of border radius. 50% of the shortest side is the maxium value for any element. Higher values will be completely disregarded and result in a plain rectangle. These rectangles are 100px square.

It's also possible to set the radius for individual corners. This rectangle is 200px by 50px.

Source code

Below is the CSS for the features demonstrated above.

  1 /* @group Animations */
  2 #animation-1.red, #animation-2.green, #animation-3.blue {
  3         color:#000;
  4         width:100px;
  5         height:100px;
  6         line-height:100px;
  7         text-align:center;
  8         margin:0 25px 10px 0;
  9         float:left;
 10         cursor:pointer;
 11 }
 12 #animation-1.red {
 13         opacity:1;
 14         background-color:#f00;
 15         transition-property:opacity;
 16         transition-duration:2s;
 17         -webkit-transition-property:opacity;
 18         -webkit-transition-duration:2s;
 19 }
 20 #animation-1.red.hide {
 21         opacity:0;
 22 }
 23 #animation-2.green {
 24         background-color:#0f0;
 25         transition-property:background-color;
 26         transition-duration:2s;
 27         -webkit-transition-property:background-color;
 28         -webkit-transition-duration:2s;
 29 }
 30 #animation-2.green.change {
 31         background-color:#f80;
 32 }
 33 #animation-3.blue {
 34         background-color:#00f;
 35         transition-property:margin-left;
 36         transition-timing-function:ease-in-out;
 37         transition-duration:2s;
 38         -webkit-transition-property:margin-left;
 39         -webkit-transition-timing-function:ease-in-out;
 40         -webkit-transition-duration:2s;
 41 }
 42 #animation-3.blue.move {
 43         margin-left:200px;
 44 }
 45 /* @end */
 46 /* @group Border radius */
 47 #border-radius .red, #border-radius .green, #border-radius .blue {
 48         color:#000;
 49         width:100px;
 50         height:100px;
 51         line-height:100px;
 52         text-align:center;
 53         margin:0 25px 10px 0;
 54         float:left;
 55 }
 56 #border-radius .red {
 57         background-color:#f00;
 58         border-radius:10px;
 59         -webkit-border-radius:10px;
 60         -moz-border-radius:10px;
 61 }
 62 #border-radius .green {
 63         background-color:#0f0;
 64         border-radius:25px;
 65         -webkit-border-radius:25px;
 66         -moz-border-radius:25px;
 67 }
 68 #border-radius .blue {
 69         background-color:#00f;
 70         border-radius:50px;
 71         -webkit-border-radius:50px;
 72         -moz-border-radius:50px;
 73 }
 74 #border-radius-2 .yellow {
 75         color:#000;
 76         width:200px;
 77         height:50px;
 78         line-height:50px;
 79         text-align:center;
 80         background-color:#ff0;
 81         border-top-left-radius:25px;
 82         -webkit-border-top-left-radius:25px;
 83         -moz-border-radius-topleft:25px;
 84 }
 85 /* @end */
 86 /* @group Border image */
 87 .buttonDiv {
 88         margin:20px 0;
 89         padding-left:50px;
 90         color:#000;
 91 }
 92 #border-image-1 {
 93         height:25px;
 94         line-height:25px;
 95         background:url(images/border-image/button-1.png) no-repeat left center;
 96 }
 97 #border-image-1 .variant-1 {
 98         border-width:12px 12px 12px 12px;
 99         border-image:url(images/border-image/button-1.png) 12 12 12 12;
100         -webkit-border-image:url(images/border-image/button-1.png) 12 12 12 12;
101 }
102 #border-image-1 .variant-2 {
103         border-width:6px 12px 6px 12px;
104         border-image:url(images/border-image/button-1.png) 6 12 6 12;
105         -webkit-border-image:url(images/border-image/button-1.png) 6 12 6 12;
106 }
107 #border-image-1 .variant-3 {
108         border-width:0 12px 0 12px;
109         border-image:url(images/border-image/button-1.png) 0 12 0 12;
110         -webkit-border-image:url(images/border-image/button-1.png) 0 12 0 12;
111 }
112 #border-image-2 {
113         height:30px;
114         line-height:30px;
115         background:url(images/border-image/button-2.png) no-repeat left center;
116 }
117 #border-image-2 .variant-1 {
118         color:#fff;
119         padding:0 3px;
120         border-width:10px 4px 10px 12px;
121         border-image:url(images/border-image/button-2.png) 10 4 10 12;
122         -webkit-border-image:url(images/border-image/button-2.png) 10 4 10 12;
123 }
124 #border-image-2 .variant-2 {
125         color:#fff;
126         padding:0 3px;
127         border-width:5px 4px 5px 12px;
128         border-image:url(images/border-image/button-2.png) 5 4 5 12;
129         -webkit-border-image:url(images/border-image/button-2.png) 5 4 5 12;
130 }
131 #border-image-2 .variant-3 {
132         color:#fff;
133         padding:0 3px;
134         border-width:0 4px 0 12px;
135         border-image:url(images/border-image/button-2.png) 0 4 0 12;
136         -webkit-border-image:url(images/border-image/button-2.png) 0 4 0 12;
137 }
138 /* @end */
139