CSS3 Talk at SF HTML5 Meetup

CSS3 Robyn Overstreet Marakana, 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

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

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

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

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 

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

Selectors

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.

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”

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

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){ Third item in a list 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){ 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; }

Media Queries

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);

Basic Visuals

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

Border Image #box{ border-width: 8px; -webkit-border-image: url("border2.png") 8 round; } <div id=”box”> border2.png

RGBA background: rgba(255,70,280,.6); red green blue alpha 60% opacity

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%

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 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; }

Masks img.photo { -webkit-mask-box-image: url(mask.png); } + =

Reﬂection -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))); }

Reﬂection 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))); }

Text Features

Text Overﬂow 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; }

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;

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

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 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

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

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 -moz-transform: scale(3); 1 = 100% or transform: scale(1,4); .2 = 20% -webkit-transform: scaleY(1.5); 1.5 = 150% transform: scaleX(.2); 3 = 300%

Transformations: skew transform: skew(0deg, 30deg); skewX skewY -webkit-transform: skew(-25deg); -moz-transform: skew(0deg,-25deg);

Faking 3D: a 2D Cube .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; }

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

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.html http://webkit.org/blog-files/3d-transforms/poster-circle.html http://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 Go Creative Commons License

Animation: keyframes @-webkit-keyframes moveitaround{ { @-webkit-keyframes moveitaround from { { from -webkit-transform: translate(50px,50px) rotate(30deg); -webkit-transform: translate(50px,50px) rotate(30deg); } } 50% { { 50% -webkit-transform: translate(100px,100px) rotate(140deg); -webkit-transform: translate(100px,100px) rotate(140deg); } } to { to -webkit-transform: translate(500px,200px) rotate(360deg) ; { -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.brick:target{ -webkit-transform: rotate(30deg); } onclick using javascript <div onclick= "this.style.webkitTransform='rotate(360deg)'">

Animation Examples Walk 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

CSS3 Talk at SF HTML5 Meetup

by Robyn Overstreet

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 5

Statistics

CSS3 Talk at SF HTML5 Meetup Presentation Transcript

http://www.linkedin.com	3
http://anonymouse.org	1
http://localhost:8080	1