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 updat...
Template Layout
                  Modules!
                                 Presentation Levels
Aural Style Sheets        ...
Relevant Modules
Template Layout

Backgrounds and Borders          Ruby
Basic User Interface
Basic Box Model              ...
Active (Interesting)
        Modules
Backgrounds and Borders   Web Fonts
Basic Box Model           2D Transformations
Colo...
New Features in CSS 3
New Selectors


                          Text-Overflow
                          

Rounded Corner...
Browser Compatibility
• Many of the CSS3 features only work on specific browsers.
• Need to use browser-specific property ...
Selectors
New Attribute Selectors
   Three new kinds of attribute selectors for substring matching



[attribute ^= "value"] Matches...
New Combinator
      Sibling combinator - Finds siblings of an element




div.note~img{                 Styles all images...
nth-child Pseudo-Class
 p:nth-child(5){ color: #f00;}
Style the fifth paragraph within its parent element


 p:nth-child(3...
More Pseudo-Classes

    :nth-last-child()
    :last-child()
    :nth-of-type()
    :not()
    :empty
    :checked
    :en...
Target an Element
<div class="content">
   <img src="pic.jpg" width="100" height="100" />
   <ul>
      <li class="article...
Target an Element
<div class="content">
   <img src="pic.jpg" width="100" height="100" />
   <ul>
      <li class="article...
Target an Element
<div class="content">
   <img src="pic.jpg" width="100" height="100" />
   <ul>
      <li class="article...
Target an Element
<div class="content">
   <img src="pic.jpg" width="100" height="100" />
   <ul>
      <li class="article...
Target an Element
<div class="content">
   <img src="pic.jpg" width="100" height="100" />
   <ul>
      <li class="article...
Target an Element
<div class="content">
   <img src="pic.jpg" width="100" height="100" />
   <ul>
      <li class="article...
Media Queries
Media Queries
 Define styles based on output device

@media screen {
    body { font-size: 13px }
}

@media only screen an...
Basic Visuals
Rounded Corners
W3C Official Spec:


border-radius:
55pt / 25pt;
                          Text



Browser Implementation:...
Border Image
#box{
     border-width: 8px;
     -webkit-border-image: url("border2.png") 8 round;
}




   <div id=”box”>
...
RGBA

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




                                     ...
Gradients
background: webkit-gradient(linear,0 0, 0 100%,
from(#333),to(#fff));


     0, 0
            type: linear or ra...
Shadows
Applies to text and boxes with text-shadow and box-shadow.


box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: ...
Advanced Visuals
Multiple Backgrounds
Add multiple background images by separating urls with a comma




#box{
  background: url(top.gif) t...
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 ri...
Reflection
img.deluxe_reflect{
    -webkit-box-reflect:below 5px -webkit-
gradient(linear, left     top, left bottom, from
...
Text Features
Text Overflow
 A new option for content that overflows its containing box


                   Two roads diverged in
      ...
Multi-Column Layout
                   Add -moz- and/
                    or -webkit- to
                     each of thes...
Multi-Column Layout
  column-count
  column-gap
  column-rule
  column-break-after
  column-break-before
  column-span
  c...
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 ...
Web Fonts
The Thorough: Best bet for cross-browser support

@font-face {
  font-family: "Your typeface";
  src: url("type/...
Web Fonts
        !   Copyright. Fonts are copyrighted material.


Downloadable Fonts
• Font Squirrel fontsquirrel.com
   ...
Graphic
Transformations
2D Transformations
The transformation functions:
scale, scaleX, scaleY
translate, translateX, translateY
skew, skewX, skew...
Transformations: scale




   -moz-transform:   scale(3);      1     = 100%
   or   transform:   scale(1,4);    .2    = 20...
Transformations: skew
                 transform: skew(0deg, 30deg);




              skewX                              ...
Faking 3D: a 2D Cube
.cube {
      position: relative;
      top: 200px;
}
.rightFace,.leftFace,.topFace{
      position: ...
3D Transformations
Adds support for the z-axis, and works similarly to 2D transformations

    -webkit-transform: translat...
3D Transform
         Functions
translate3d(x, y, z)
translateZ(z)
scale3d(sx, sy, sz)
scaleZ(sz)
rotateX(angle)
rotateY(a...
3D Examples
http://webkit.org/blog-files/3d-transforms/morphing-cubes.html
http://webkit.org/blog-files/3d-transforms/post...
Animation!
Transitions

#box {
    transition-property: width,height;
    transition-duration: 2s;
    height: 150px;
    width: 150p...
Animation: keyframes




             Illustration: Yurike Cynthia Go
                Creative Commons License
Animation: keyframes
@-webkit-keyframes moveitaround{ {
  @-webkit-keyframes moveitaround
  from { {
     from
     -webki...
Triggering Animation
:hover as used in previous versions of CSS
:target trigger animation with a anchor link, e.g. page.ht...
Animation Examples
Walk cycle:
http://anthonycalzadilla.com/css3-ATAT/index-bones.html

Dock-style menu:
http://buildinter...
Thank you!

Upcoming CSS3 class in San Francisco
  August 30 & 31 at Marakana, Inc.
 See marakana.com for more info
Upcoming SlideShare
Loading in...5
×

CSS3 Talk at SF HTML5 Meetup

3,885

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,885
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
115
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • webkit perspective rotating boxes
  • keyframes example : anim.html other links: walk cycle, photo viewer
  • CSS3 Talk at SF HTML5 Meetup

    1. 1. CSS3 Robyn Overstreet Marakana, Inc.
    2. 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. 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. 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. 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. 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. 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
    8. 8. Selectors
    9. 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. 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. 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
    12. 12. More Pseudo-Classes :nth-last-child() :last-child() :nth-of-type() :not() :empty :checked :enabled :disabled :target :lang
    13. 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. 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. 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. 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. 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. 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; }
    19. 19. Media Queries
    20. 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);
    21. 21. Basic Visuals
    22. 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
    23. 23. Border Image #box{ border-width: 8px; -webkit-border-image: url("border2.png") 8 round; } <div id=”box”> border2.png
    24. 24. RGBA background: rgba(255,70,280,.6); red green blue alpha 60% opacity
    25. 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. 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>
    27. 27. Advanced Visuals
    28. 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; }
    29. 29. Masks img.photo { -webkit-mask-box-image: url(mask.png); } + =
    30. 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. 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))); }
    32. 32. Text Features
    33. 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. 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. 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. 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. 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. 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
    39. 39. Graphic Transformations
    40. 40. 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);
    41. 41. 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%
    42. 42. Transformations: skew transform: skew(0deg, 30deg); skewX skewY -webkit-transform: skew(-25deg); -moz-transform: skew(0deg,-25deg);
    43. 43. 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; }
    44. 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. 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
    46. 46. 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)
    47. 47. Animation!
    48. 48. Transitions #box { transition-property: width,height; transition-duration: 2s; height: 150px; width: 150px; } #box:hover{ height: 500px; width: 500px; }
    49. 49. Animation: keyframes Illustration: Yurike Cynthia Go Creative Commons License
    50. 50. 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; }
    51. 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)'">
    52. 52. 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/
    53. 53. Thank you! Upcoming CSS3 class in San Francisco August 30 & 31 at Marakana, Inc. See marakana.com for more info
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×