To enter presentation mode in Opera, press [F11] and use PgDn and PgUp to navigate in the document
CSS3: The Future of Web Styling
Håkon Wium Lie
CTO, Opera Software
howcome@opera.com
HTML
<H1>Headline</H1>
- simple structure
- universal semantics
- media-independent
CSS
<h1>Headline</h1>
h2 {
font-size: 18px;
color: red;
text-align: left;
}
CSS properties
Some text
font-size: 40px
font-size
font-style: italic
font-style
font-family: serif
font-family
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
CSS3
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,
0px 0px 20px 10px #993 inset
box-shadow
box-shadow: 0px 0px 20px 10px #993,
0px 0px 20px 10px #993 inset
border-radius: 100px
rounded box
Specifications
- CSS3 Backgrounds and borders
- CSS3 Fonts
- CSS3 Multi-column layout
- CSS3 Transitions
- CSS3 Media Queries
- CSS3 Generated content for paged media
Multicolumn layout
body { columns: 2 }
body { columns: 20em }
CSS3 Fonts
WebFonts
Microsoft's Core fonts
Andale Mono
Arial
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
@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: Direction
Direction
Multi-column layout
CSS3 Transitions
#trans { transition-duration: 1s; }
#trans li:hover {
color: red;
background: black;
letter-spacing: 1em;
}
CSS3 Media Queries
CSS3 Media Queries
@media (max-width: 600px) {
...
}
@media (max-width: 300px) {
...
}
CSS3 Generated Content for Paged Media
Page setup
@page {
size: letter;
marks: crop cross;
margin: 2.54cm;
}
Populating the margin boxes
@page {
@bottom-left {
content: counter(page);
}
}
Populating the margin boxes
@page:left {
@bottom-left {
content: counter(page);
}
}
@page:right {
@bottom-right {
content: counter(page);
}
}
Populating the margin boxes
@page {
@top-right {
content: "Document title";
}
}
Populating the margin boxes
<html>
<title>Document title</title>
...
title { string-set: title content() }
@page {
@top-right {
content: string(title);
}
}
Footnotes
<p>Footnotes<span class="footnote">A footnote is a note placed at
the bottom of a page.</span> are
essential in printed documents.
.footnote { float: footnote }
Footnotes
<p>Footnotes <span class="footnote">A footnote is a note placed at
the bottom of a page.</span> are
essential in printed documents.
@media print {
.footnote { float: footnote }
}
@media projection, screen {
.footnote:before { " (" }
.footnote:after { ")" }
}
Footnotes
Footnotes () are essential in printed documents.
Page floats
.figure { float: bottom page }
Table of contents
<ul id=toc>
<li><a href="#chapter1">Chapter 1</a>
<li><a href="#chapter2">Chapter 2</a>
</ul>
#toc a::after {
content: leader('.')
target-counter(attr(href), page);
}
Table of contents
Chapter 1.............12
Chapter 2.............45
Testing
www-style@w3.org
