Download - CSS3 Talk (PDF version)
![Page 1: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/1.jpg)
CSS3Robyn OverstreetMarakana, Inc.
![Page 2: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/2.jpg)
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
![Page 3: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/3.jpg)
Modules!Presentation LevelsReader Media TypeRubyScopingGrid PositioningSpeechStyle Attribute SyntaxSyntaxTablesTextText LayoutLine GridValues and UnitsWeb FontsBehavioral Extensions to CSSFlexible Box Layout Image Values Module2D Transformations3D TransformationsTransitionsAnimationsMedia QueriesSelectors
Template LayoutAural Style SheetsBackgrounds and BordersBasic User InterfaceBasic Box ModelExtended Box ModelMarqueeCascading and InheritanceColorFontsGenerated Content for Paged MediaGenerated and Replaced Content Hyperlinks PresentationIntroductionLine LayoutListsMathMulti-column LayoutNamespacesObject ModelView ModulePaged MediaPositioning
![Page 4: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/4.jpg)
Relevant ModulesRuby
Grid PositioningSpeechStyle Attribute Syntax
Text
Values and UnitsWeb FontsBehavioral Extensions to CSSFlexible Box Layout Image Values Module2D Transformations3D TransformationsTransitionsAnimationsMedia QueriesSelectors
Template Layout
Backgrounds and BordersBasic User InterfaceBasic Box Model
MarqueeCascading and InheritanceColorFontsGenerated Content for Paged MediaGenerated and Replaced Content
Line Layout
Multi-column LayoutNamespaces
View ModulePaged Media
![Page 5: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/5.jpg)
Active (Interesting) Modules
Backgrounds and BordersBasic Box ModelColorFontsMulti-column LayoutPaged MediaSpeechText
Web Fonts2D Transformations3D TransformationsTransitionsAnimationsMedia QueriesSelectors
![Page 6: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/6.jpg)
New Features in CSS 3
New Selectors
Rounded Corners
Border Image
Color and Opacity: RGBA
Gradients
Box and Text Shadows
Multiple Backgrounds
Masks
Reflection
Text-Overflow
Multi-Column Layout
Web Fonts
Transitions
Transformations
Animation
![Page 7: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/7.jpg)
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
Webkit-specific properties
http://qooxdoo.org/documentation/general/webkit_css_styles
Mozilla-specific properties
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
Browser Compatibility Charts
http://caniuse.com/#cats=CSS3
http://www.findmebyip.com/litmus
![Page 8: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/8.jpg)
Selectors
![Page 9: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/9.jpg)
New Attribute Selectors
[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.
Three new kinds of attribute selectors for substring matching
![Page 10: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/10.jpg)
New Combinator
Styles all images that have the same parent as divs with class “note”
div.note~img{ float:left;}
Sibling combinator - Finds siblings of an element
![Page 11: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/11.jpg)
nth-child Pseudo-Class
Style the fifth paragraph within its parent element
or
Apply the style to every third element, starting at 0
Apply to every other element, starting with the fourth element
p:nth-child(5){ color: #f00;}
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
p:nth-child(2n+4) { color:#ff0; }
![Page 12: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/12.jpg)
More Pseudo-Classes
:nth-last-child():last-child():nth-of-type():not():empty:checked:enabled:disabled:target:lang
![Page 13: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/13.jpg)
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>
![Page 14: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/14.jpg)
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;}
![Page 15: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/15.jpg)
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;}
Third item in a list
![Page 16: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/16.jpg)
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;}
Third item in a list
![Page 17: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/17.jpg)
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;}
Third item in a list
Paragraphs that are direct siblings of an image in the content div
![Page 18: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/18.jpg)
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;}
Third item in a list
Paragraphs that are direct siblings of an image in the content div
![Page 19: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/19.jpg)
Media Queries
![Page 20: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/20.jpg)
Media Queries
@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);
Define styles based on output device
![Page 21: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/21.jpg)
Basic Visuals
![Page 22: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/22.jpg)
Rounded Corners
-webkit-border-radius: 55pt 25pt;-moz-border-radius: 55pt / 25pt;
Textborder-radius:55pt / 25pt;
W3C Official Spec:
Browser Implementation:New in FF 3.5 !
Previous versions did not support elliptical borders
![Page 23: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/23.jpg)
Border Image
border2.png
<div id=”box”>
#box{ border-width: 8px; -webkit-border-image: url("border2.png") 8 round;}
![Page 24: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/24.jpg)
RGBA
background: rgba(255,70,280,.6);red green blue alpha
60% opacity
![Page 25: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/25.jpg)
Gradients
0, 100%
0, 0type: linear or radial.
points: space separated
from() and to(): value
color stop (optional)color-stop(80%, #e4c700)
background: webkit-gradient(linear,0 0, 0 100%, from(#333),to(#fff));
![Page 26: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/26.jpg)
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>
![Page 27: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/27.jpg)
Advanced Visuals
![Page 28: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/28.jpg)
Multiple BackgroundsAdd 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;
}
![Page 29: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/29.jpg)
Masksimg.photo { -webkit-mask-box-image: url(mask.png);}
+ =
![Page 30: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/30.jpg)
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)));}
![Page 31: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/31.jpg)
Reflectionimg.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)));}
![Page 32: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/32.jpg)
Text Features
![Page 33: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/33.jpg)
Text OverflowA new option for content that overflows its containing box
#poem_box{text-overflow: ellipsis;
}
Two roads diverged in a yellow wood, and sorry I could not ...
![Page 34: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/34.jpg)
Multi-Column Layout
column-count:2;
column-width:250px;
column-gap:20px;
column-rule:1px dotted;
Add -moz- and/or -webkit- to each of these
![Page 35: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/35.jpg)
Multi-Column Layoutcolumn-count
column-gap
column-rule
column-break-after
column-break-before
column-span
column-fill
These require -webkit- or -moz- prefixes
![Page 36: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/36.jpg)
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; }
![Page 37: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/37.jpg)
Web FontsThe Thorough: Best bet for cross-browser support
• 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
@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"); }
![Page 38: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/38.jpg)
Web Fonts
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
Copyright. Fonts are copyrighted material. !
![Page 39: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/39.jpg)
Graphic Transformations
![Page 40: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/40.jpg)
2D Transformations
The transformation functions:
scale, scaleX, scaleY
translate, translateX, translateY
skew, skewX, skewY
rotate
matrix
-webkit-transform: skew(0deg, 30deg);-webkit-transform: rotate(30deg);
![Page 41: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/41.jpg)
Transformations: scale
1 = 100%.2 = 20%1.5 = 150%3 = 300%
transform: scale(3);transform: scale(1,4);transform: scaleY(1.5);transform: scaleX(.2);
-moz-or
-webkit-
![Page 42: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/42.jpg)
Transformations: skew
skewX skewY
transform: skew(0deg, 30deg);
-webkit-transform: skew(-25deg); -moz-transform: skew(0deg,-25deg);
![Page 43: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/43.jpg)
.cube { position: relative; top: 200px; }.rightFace,.leftFace,.topFace{ position: absolute; padding: 10px; width: 180px; height: 180px;}.leftFace { -webkit-transform: skew(0deg, 30deg);}.rightFace { -webkit-transform: skew(0deg, -30deg); left: 200px;}.topFace { -webkit-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16); top: -158px; left: 100px;}
Faking 3D: a 2D Cube
![Page 44: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/44.jpg)
3D Transformations
Supported in
•Safari 5
•iPhone
•Chrome 5
Adds support for the z-axis, and works similarly to 2D transformations
-webkit-transform: translateZ(200px);
![Page 45: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/45.jpg)
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
![Page 46: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/46.jpg)
3D Examples
http://webkit.org/blog-files/3d-transforms/morphing-cubes.htmlhttp://webkit.org/blog-files/3d-transforms/poster-circle.htmlhttp://www.fofronline.com/experiments/cube-3d/
http://webkit.org/blog-files/3d-transforms/perspective-by-example.html (open in WebKit nightly)
![Page 47: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/47.jpg)
Animation!
![Page 48: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/48.jpg)
Transitions
#box { transition-property: width,height; transition-duration: 2s; height: 150px; width: 150px;}
#box:hover{ height: 500px; width: 500px;}
![Page 49: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/49.jpg)
Animation: keyframes
Illustration: Yurike Cynthia GoCreative Commons License
![Page 50: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/50.jpg)
Animation: keyframes@-webkit-keyframes moveitaround { from { -webkit-transform: translate(50px,50px) rotate(30deg); } 50% { -webkit-transform: translate(100px,100px) rotate(140deg); } to { -webkit-transform: translate(500px,200px) rotate(360deg) ; }}
@-webkit-keyframes moveitaround { from { -webkit-transform: translate(50px,50px) rotate(30deg); } 50% { -webkit-transform: translate(100px,100px) rotate(140deg); } to { -webkit-transform: translate(500px,200px) rotate(360deg) ; }}
div.mydiv { -webkit-animation-name: moveitaround; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 3;
}
![Page 51: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/51.jpg)
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 onclick= "this.style.webkitTransform='rotate(360deg)'">
onclick using javascript
div.brick:target{-webkit-transform: rotate(30deg);
}
![Page 52: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/52.jpg)
Animation ExamplesWalk cycle:http://anthonycalzadilla.com/css3-ATAT/index-bones.html
Dock-style menu:http://buildinternet.com/live/elasticthumbs/
Photo gallery:http://www.alexandtheweb.com/demos/transitions-test.html
List of 50:http://www.1stwebdesigner.com/development/50-awesome-css3-animations/
![Page 53: CSS3 Talk (PDF version)](https://reader033.vdocument.in/reader033/viewer/2022042614/557bb08fd8b42a052c8b54d4/html5/thumbnails/53.jpg)
Thank you!
Upcoming CSS3 class in San Francisco
August 30 & 31 at Marakana, Inc.
See marakana.com for more info