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

CSS3 in Opera

Håkon Wium Lie
CTO, Opera Software

CSS3 ready for demo

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(;
font-family: 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


CSS3 Backgrounds and Borders

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-shadow: 0px 0px 20px 10px #993,
     0px 0px 20px 10px #993 inset
box-shadow: 0px 0px 20px 10px #993,
     0px 0px 20px 10px #993 inset
border-radius: 100px
font-family border-radius box-shadow background Direction

A box, CSS3 style

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

CSS3 Transitions

menu bar

CSS3 Selectors

td:nth-child(odd) { box-shadow: 5px 5px 5px }
td:nth-child(even) { box-shadow: 5px 5px 5px inset }

Media queries

@media all and (max-width: 600px) {
@media all and (max-width: 300px) {

Generated Content for Paged Media

book cover wikipedia book cover