CSS3 Talk at SF HTML5 Meetup

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>






</div></div>

li:nth-child(3){ background-color:#36f;}.content>img~p{ font-family:Courier; font-size:40px;}






</div></div>


Third item in a list






</div></div>


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

http://site/fonts/Gentium.ttf

http://site/fonts/Gentium.ttf

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

CSS3 Talk at SF HTML5 Meetup

Technology

Transcript of CSS3 Talk at SF HTML5 Meetup