2. Modular
CSS3 is a collection of modules
• Allows updates on a module-by-
module basis (instead of waiting
for an update of the full spec)
• Browsers can add support for
features one module at a time
• Browsers are able to implement
some modules and not others
3. Template Layout
Modules!
Presentation Levels
Aural Style Sheets Reader Media Type
Backgrounds and Borders Ruby
Basic User Interface Scoping
Basic Box Model Grid Positioning
Extended Box Model Speech
Marquee Style Attribute Syntax
Cascading and Inheritance Syntax
Color Tables
Fonts Text
Generated Content for Paged Text Layout
Media Line Grid
Generated and Replaced Content Values and Units
Hyperlinks Presentation Web Fonts
Introduction Behavioral Extensions to CSS
Line Layout Flexible Box Layout
Lists Image Values Module
Math 2D Transformations
Multi-column Layout 3D Transformations
Namespaces Transitions
Object Model Animations
View Module Media Queries
Paged Media Selectors
Positioning
4. Relevant Modules
Template Layout
Backgrounds and Borders Ruby
Basic User Interface
Basic Box Model Grid Positioning
Speech
Marquee Style Attribute Syntax
Cascading and Inheritance
Color
Fonts Text
Generated Content for Paged
Media
Generated and Replaced Content Values and Units
Web Fonts
Behavioral Extensions to CSS
Line Layout Flexible Box Layout
Image Values Module
2D Transformations
Multi-column Layout 3D Transformations
Namespaces Transitions
Animations
View Module Media Queries
Paged Media Selectors
5. Active (Interesting)
Modules
Backgrounds and Borders Web Fonts
Basic Box Model 2D Transformations
Color 3D Transformations
Fonts Transitions
Multi-column Layout Animations
Paged Media Media Queries
Speech Selectors
Text
6. New Features in CSS 3
New Selectors
Text-Overflow
Rounded Corners
Multi-Column Layout
Border Image
Web Fonts
Color and Opacity: RGBA
Transitions
Gradients
Transformations
Box and Text Shadows
Animation
Multiple Backgrounds
Masks
Reflection
7. Browser Compatibility
• Many of the CSS3 features only work on specific browsers.
• Need to use browser-specific property names in those cases.
• Prefix with -webkit or -moz
Browser Compatibility Charts
http://caniuse.com/#cats=CSS3
http://www.findmebyip.com/litmus
Webkit-specific properties
http://qooxdoo.org/documentation/general/webkit_css_styles
Mozilla-specific properties
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
9. New Attribute Selectors
Three new kinds of attribute selectors for substring matching
[attribute ^= "value"] Matches elements to an attribute that
starts with the specified value.
[attribute $= "value"] Matches elements to an attribute that ends
with the specified value.
[attribute *= "value"] Matches elements to an attribute that
contains the specified value.
10. New Combinator
Sibling combinator - Finds siblings of an element
div.note~img{ Styles all images that have the
float:left; same parent as divs with class
} “note”
11. nth-child Pseudo-Class
p:nth-child(5){ color: #f00;}
Style the fifth paragraph within its parent element
p:nth-child(3n+0) { color:#f00; }
or
p:nth-child(3n) { color:#f00; }
Apply the style to every third element, starting at 0
p:nth-child(2n+4) { color:#ff0; }
Apply to every other element, starting with the fourth element
13. Target an Element
<div class="content">
<img src="pic.jpg" width="100" height="100" />
<ul>
<li class="article_item">one</li>
<li class="article_item">two</li>
<li class="article_item">three</li>
<li class="article_item">four</li>
</ul>
<p>Nunc lacus enim, tincidunt vitae aliquam eget</p>
<div id="note">
<p>Suspendisse potenti. Placerat nisi varius.</p>
</div>
</div>
14. Target an Element
<div class="content">
<img src="pic.jpg" width="100" height="100" />
<ul>
<li class="article_item">one</li>
<li class="article_item">two</li>
<li class="article_item">three</li>
<li class="article_item">four</li>
</ul>
<p>Nunc lacus enim, tincidunt vitae aliquam eget</p>
<div id="note">
<p>Suspendisse potenti. Placerat nisi varius.</p>
</div>
</div>
li:nth-child(3){
background-color:#36f;
}
.content>img~p{
font-family:Courier;
font-size:40px;
}
15. Target an Element
<div class="content">
<img src="pic.jpg" width="100" height="100" />
<ul>
<li class="article_item">one</li>
<li class="article_item">two</li>
<li class="article_item">three</li>
<li class="article_item">four</li>
</ul>
<p>Nunc lacus enim, tincidunt vitae aliquam eget</p>
<div id="note">
<p>Suspendisse potenti. Placerat nisi varius.</p>
</div>
</div>
li:nth-child(3){
Third item in a list background-color:#36f;
}
.content>img~p{
font-family:Courier;
font-size:40px;
}
16. Target an Element
<div class="content">
<img src="pic.jpg" width="100" height="100" />
<ul>
<li class="article_item">one</li>
<li class="article_item">two</li>
<li class="article_item">three</li>
<li class="article_item">four</li>
</ul>
<p>Nunc lacus enim, tincidunt vitae aliquam eget</p>
<div id="note">
<p>Suspendisse potenti. Placerat nisi varius.</p>
</div>
</div>
li:nth-child(3){
Third item in a list background-color:#36f;
}
.content>img~p{
font-family:Courier;
font-size:40px;
}
17. Target an Element
<div class="content">
<img src="pic.jpg" width="100" height="100" />
<ul>
<li class="article_item">one</li>
<li class="article_item">two</li>
<li class="article_item">three</li>
<li class="article_item">four</li>
</ul>
<p>Nunc lacus enim, tincidunt vitae aliquam eget</p>
<div id="note">
<p>Suspendisse potenti. Placerat nisi varius.</p>
</div>
</div>
li:nth-child(3){
Third item in a list background-color:#36f;
}
.content>img~p{
Paragraphs that are direct siblings font-family:Courier;
of an image in the content div font-size:40px;
}
18. Target an Element
<div class="content">
<img src="pic.jpg" width="100" height="100" />
<ul>
<li class="article_item">one</li>
<li class="article_item">two</li>
<li class="article_item">three</li>
<li class="article_item">four</li>
</ul>
<p>Nunc lacus enim, tincidunt vitae aliquam eget</p>
<div id="note">
<p>Suspendisse potenti. Placerat nisi varius.</p>
</div>
</div>
li:nth-child(3){
Third item in a list background-color:#36f;
}
.content>img~p{
Paragraphs that are direct siblings font-family:Courier;
of an image in the content div font-size:40px;
}
20. Media Queries
Define styles based on output device
@media screen {
body { font-size: 13px }
}
@media only screen and (max-width: 480px){...}
<link rel="stylesheet" media="screen and (color)"
href="example.css" />
@import url(color.css) all and (max-width:2000px);
22. Rounded Corners
W3C Official Spec:
border-radius:
55pt / 25pt;
Text
Browser Implementation:
New in FF 3.5 !
-webkit-border-radius: 55pt 25pt; Previous versions
did not support
-moz-border-radius: 55pt / 25pt;
elliptical borders
25. Gradients
background: webkit-gradient(linear,0 0, 0 100%,
from(#333),to(#fff));
0, 0
type: linear or radial.
points: space separated
from() and to(): value
color stop (optional)
color-stop(80%, #e4c700)
0, 100%
26. Shadows
Applies to text and boxes with text-shadow and box-shadow.
box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
<horizontal distance> <vertical distance> <blur> <color>
28. Multiple Backgrounds
Add multiple background images by separating urls with a comma
#box{
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}
30. Reflection
-webkit-box-reflect: <direction> <offset> <mask-box-image>
<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection
from the edge of the original border box (using the direction specified). It can
be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the
reflection. If omitted, the reflection has no mask.
img.simple_reflect{
-webkit-box-reflect:below 5px;
}
img.deluxe_reflect{
-webkit-box-reflect:below 5px -webkit-gradient
(linear, left top, left bottom, from
(transparent), color-stop(.7,
transparent), to(rgba(255, 255, 255, 0.5)));
}
31. Reflection
img.deluxe_reflect{
-webkit-box-reflect:below 5px -webkit-
gradient(linear, left top, left bottom, from
(transparent), color-stop(.7,
transparent), to(rgba(255, 255, 255, 0.5)));
}
33. Text Overflow
A new option for content that overflows its containing box
Two roads diverged in
a yellow wood, and
sorry I could not ...
#poem_box{
text-overflow: ellipsis;
}
34. Multi-Column Layout
Add -moz- and/
or -webkit- to
each of these
column-count:2;
column-width:250px;
column-gap:20px;
column-rule:1px
dotted;
35. Multi-Column Layout
column-count
column-gap
column-rule
column-break-after
column-break-before
column-span
column-fill
These require -webkit- or -moz- prefixes
36. Web Fonts
@font-face allows use of fonts from URLs
The Basics: Call a font from a URL and give it a name
@font-face {
font-family: Gentium;
src: url(http://site/fonts/Gentium.ttf);
}
p { font-family: Gentium, serif; }
37. Web Fonts
The Thorough: Best bet for cross-browser support
@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("Your Typeface"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
• Start with the IE compatible font (.eot)
• Check for a local version of the font
(this also prevents IE from trying to load formats it can't understand)
• Offer other formats
38. Web Fonts
! Copyright. Fonts are copyrighted material.
Downloadable Fonts
• Font Squirrel fontsquirrel.com
Freeware fonts to download and host yourself
Font Hosting
• Google Font API code.google.com/webfonts
Open-source font library with limited number of fonts
• TypeKit typekit.com
Subscription-based font service with a large library
44. 3D Transformations
Adds support for the z-axis, and works similarly to 2D transformations
-webkit-transform: translateZ(200px);
Supported in
•Safari 5
•iPhone
•Chrome 5
45. 3D Transform
Functions
translate3d(x, y, z)
translateZ(z)
scale3d(sx, sy, sz)
scaleZ(sz)
rotateX(angle)
rotateY(angle)
rotate3d(x, y, z, angle)
perspective(p)
matrix3d(…)
-webkit-transform-origin
-webkit-perspective-origin
-webkit-transform-style
51. Triggering Animation
:hover as used in previous versions of CSS
:target trigger animation with a anchor link, e.g. page.html#start
<div id="b" class="brick">foo</div>
<div id="c" class="brick">foo</div>
<p><a href="#c">drop c</a></p>
div.brick:target{
-webkit-transform: rotate(30deg);
}
onclick using javascript
<div onclick=
"this.style.webkitTransform='rotate(360deg)'">