css3 talk at sf html5 meetup
DESCRIPTION
Slides from my talk at the San Francisco CSS3 meet-up Thursday July 29.TRANSCRIPT
CSS3Robyn OverstreetMarakana, Inc.
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
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
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
Active (Interesting) Modules
Backgrounds and BordersBasic Box ModelColorFontsMulti-column LayoutPaged MediaSpeechText
Web Fonts2D Transformations3D TransformationsTransitionsAnimationsMedia QueriesSelectors
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
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
Selectors
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
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
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; }
More Pseudo-Classes
:nth-last-child():last-child():nth-of-type():not():empty:checked:enabled:disabled:target:lang
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>
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;}
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
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
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
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
Media Queries
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
Basic Visuals
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
Border Image
border2.png
<div id=”box”>
#box{ border-width: 8px; -webkit-border-image: url("border2.png") 8 round;}
RGBA
background: rgba(255,70,280,.6);red green blue alpha
60% opacity
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));
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>
Advanced Visuals
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;
}
Masksimg.photo { -webkit-mask-box-image: url(mask.png);}
+ =
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)));}
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)));}
Text Features
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 ...
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
Multi-Column Layoutcolumn-count
column-gap
column-rule
column-break-after
column-break-before
column-span
column-fill
These require -webkit- or -moz- prefixes
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; }
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"); }
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. !
Graphic Transformations
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);
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-
Transformations: skew
skewX skewY
transform: skew(0deg, 30deg);
-webkit-transform: skew(-25deg); -moz-transform: skew(0deg,-25deg);
.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
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);
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
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)
Animation!
Transitions
#box { transition-property: width,height; transition-duration: 2s; height: 150px; width: 150px;}
#box:hover{ height: 500px; width: 500px;}
Animation: keyframes
Illustration: Yurike Cynthia GoCreative Commons License
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;
}
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);
}
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/
Thank you!
Upcoming CSS3 class in San Francisco
August 30 & 31 at Marakana, Inc.
See marakana.com for more info