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

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

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

Target an Element
<ul>
</ul>

<div id="note">
</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
<ul>
</ul>

<div id="note">
</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
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);

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>

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

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)

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);
} }
50% { {
50%
} }
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

Recomendados

Recomendados

Más contenido relacionado

Similar a CSS3 Talk at SF HTML5 Meetup

Similar a CSS3 Talk at SF HTML5 Meetup (20)

Último

Último (20)

CSS3 Talk at SF HTML5 Meetup

Notas del editor