• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS3 Talk at SF HTML5 Meetup
 

CSS3 Talk at SF HTML5 Meetup

on

  • 4,225 views

Slides from my talk at the San Francisco CSS3 meet-up Thursday July 29.

Slides from my talk at the San Francisco CSS3 meet-up Thursday July 29.

Statistics

Views

Total Views
4,225
Views on SlideShare
4,218
Embed Views
7

Actions

Likes
4
Downloads
107
Comments
0

4 Embeds 7

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • webkit perspective rotating boxes
  • keyframes example : anim.html other links: walk cycle, photo viewer

CSS3 Talk at SF HTML5 Meetup CSS3 Talk at SF HTML5 Meetup Presentation Transcript

  • 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{ 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; }
  • 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); } + =
  • 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))); }
  • 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))); }
  • Text Features
  • 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; }
  • 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