This presentation showcases CSS3 features that are being implemented in Opera. Some features (media queries, selectors) are supported in Opera 9, and we hope to support the rest in the upcoming Opera 10. To try our latest technology preview builds, go to Opera Labs.
To enter presentation mode in Opera, press [F11] and use PgDn and PgUp to navigate in the document
Some text
font-size: 40px
font-size
font-style: italic
font-style
font-family: serif
font-family
text-transform: uppercase
Text-transform
background: #fe7
background
border: 0.1em solid black
border
border: 0.1em solid #486
border-color
border: 0.1em dotted #486
border-style
border: 0.3em inset #46F
border-width
border: 0.5em outset #F46
border-width
text-shadow: 10px 10px black
text-shadow
text-shadow: 5px 5px 5px #F79
text-shadow
text-shadow: 0px 0px 20px orange; color: white
text-shadow
@import url(http://www.princexml.com/fonts/steffmann/index.css);
font-family: Angel
Angel
font-family: Becker Inline
Becker Inline
font-family: Broadcast Titling
Broadcast Titling
font-family: Cardiff
Cardiff
font-family: Forelle
Forelle
font-family: Direction
Direction
border: 0.1em solid black
A box
border-radius: 40px
border-radius
border-radius: 150px / 50px
border-radius
border-radius: 60px 0 / 60px 0;
border-radius
box-shadow: 20px 20px gray;
box-shadow
box-shadow: 20px 20px 10px #993;
box-shadow
box-shadow: 0px 0px 20px 10px #993;
box-shadow
box-shadow: 0px 0px 20px 10px #993 inset;
box-shadow
box-shadow: 0px 0px 20px 10px #993 inset;
border-radius: 100px
box
box-shadow: 0px 0px 20px 10px #993,
0px 0px 20px 10px #993 inset
box-shadow
box-shadow: 0px 0px 20px 10px #993,
0px 0px 20px 10px #993 inset
border-radius: 100px
box
font-family border-radius box-shadow background
Direction
border-image
border-image
width: 200px; height: 200px; background: red
border: 15px dashed #4D4;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5)
box-shadow: inset 0 0 0 15px yellow,
10px 10px 10px rgba(0, 0, 0, 0.5)
border-radius: 20px
border-radius: 2em / 0.7em
border-radius: 2em 1em 2em 1em / 1em 2em 1em 2em
border-radius: 6em 6em 0em 6em
border-radius: 0.5em 2em 0.5em 2em
border-radius: 0em 6em 0em 6em
border-radius: 6em 6em 6em 6em
<span></span><span></span>
td:nth-child(odd) { box-shadow: 5px 5px 5px }
td:nth-child(even) { box-shadow: 5px 5px 5px inset }
| foo | bar | foobar | foobar |
| foo | bar | foobar | foobar |
| foo | bar | foobar | foobar |
