CSS3

©Inbal Geffen 2012

● Syntax

● Selectors

● Design Features

What's new in CSS3?

©Inbal Geffen 2012

Basic Syntax● New prefix for browser support

○ -moz- (Firefox)

○ -webkit- (Safari, Chrome)

○ -ms- (IE)

○ -o- (Opera)

div{

-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);

} ©Inbal Geffen 2012

● Dom Selectors ○ Attribute selectors

○ id selectors

○ class selectors

● Pseudo selectors○ Work on elements outside the DOM

■ First letter or last child of parent element

○ All browsers but IE are supported

New Selectors

©Inbal Geffen 2012

● [attr] - Simple Attribute Selector○ Perform css style on all the elements with the attribute in the braces

○ In this example Shiri & Elad will be shown as red links

<ul><li><a href="page1.html">Neta</a><li><li><a href="page2.html" rel="friend">Shiri</a><li><li><a href="page3.html" rel="contact">Elad</a><li>

</ul>

a[rel]{

color:red;}

Example HTML 1

Attribute Selectors

©Inbal Geffen 2012

● [attr='value'] - Exact Attribute Selectora[rel='friend']{

color:red;}

Only Shiri will be colored red

Attribute Selectors

©Inbal Geffen 2012

● [attr^='value'] - the “begins with” selector

The “begins with” selector allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”).

The Syntaxelement[att^=val]

Examplesa[href^="http://"]p[title^="Hello"]

Example HTML 2

Attribute Selectors

©Inbal Geffen 2012

● [attr$='value'] - the “ends with” selectorThe Syntaxelement[att$=val]

Examplesa[href$=".pdf"] p[title$="World"]

● [attr*='value'] - the “contains” selectorThe Syntaxelement[att*=val]

Examplesa[href*="google.com"] p[title$="orl"]

Attribute Selectors

©Inbal Geffen 2012

● E~F○ Perform css style on all F typed elements that exist after E typed

elements in the same DOM level

h2 ~ p{

font-style:italic;}

h2 + p{

font-style:bold;}

Example HTML 3

Attribute Selectors

©Inbal Geffen 2012

● Structural○ Dynamically select content based on its position in the document

■ :first-child

■ :first-of-type

■ :nth-child(n)

● UI-Element State○ Dynamically select content based on the element state

■ Checked

■ Disabled

Pseudo-Class Selectors

©Inbal Geffen 2012

● Dynamically select content based on its position in the document

○ :first-child :last-child :only-child

○ :first-of-type :last-of-type :only-of-type

○ :nth-child(n) :nth-last-child(n)

○ :nth-of-type(n) :nth-last-of-type(n)

Example HTML 4

Structural Selectors

©Inbal Geffen 2012

● Dynamically select content based on its UI state

e:pseudo-class {}.class:pseudo-class {}#id:pseudo-class {}

a:hover { background-color: #ccc; text-decoration: none; }● :disabled :enabled● :checked● ::selection - what the user selected on the page

Example HTML 5

UI-Element State Selectors

©Inbal Geffen 2012

CSS3 - Design Features

©Inbal Geffen 2012

CSS3 BordersBorder-radius (Rounded corners)#div1{

border-radius: 20px 20px;background-color: red;width: 200px;height: 100px;

}

● border-top-left-radius● border-top-right-radius● border-bottom-left-radius● border-bottom-right-radius

©Inbal Geffen 2012

Box-shadow E { box-shadow: inset horizontal vertical blur spread color; }

#div1{

box-shadow: 4px 4px black;background-color: silver;width: 200px;height: 100px;

}

CSS3 Shadows

©Inbal Geffen 2012

Text-shadowE { text-shadow: x y blur-radius color; }

#header1{

text-shadow: 3px 3px gray;font-size: 80px;font-family: Tahoma;

}

<h1 id="header1">Hello CSS3</h1>

CSS3 Shadows

©Inbal Geffen 2012

.columns // System 1{

-webkit-column-count: 4;-moz-column-count: 4;

}

.columns // System 2 - more dynamic{

-webkit-column-width: 100px;-moz-column-width: 100px;width: 850px;

}

<div class="columns">René Descartes French (31 March 1596 – 11 February 1650) was a ..

</div>

CSS3 Columns

©Inbal Geffen 2012

.columns{

-webkit-column-count: 3;-webkit-column-gap: 2em;-webkit-column-rule: 0.3em double silver;-moz-column-count: 3;-moz-column-gap: 2em;-moz-column-rule: 0.3em double silver;

}

CSS3 Columns -2-

©Inbal Geffen 2012

#img1{

filter: alpha(opacity=50);}

p {

color: rgba(0,0,0,0.5); }

Example HTML Opacity

CSS3 Opacity & Color

©Inbal Geffen 2012

● Translatediv {

transform: translate(50px,100px);-ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px);-o-transform: translate(50px,100px); -moz-transform: translate(50px,100px);

}

● Rotate ● Scale ● Skew

div {-webkit-transform: rotate(-40deg) scale(0.75) translate(-20%, -220%);

}

CSS3 2D Transforms

©Inbal Geffen 2012

CSS3 Animations

● CSS can also affect design by behavior (:hover)

● Transitionsoccur only when the relevant attribute changes

● Animationsoccur immediately when they are given to an element

©Inbal Geffen 2012

CSS3 Animations - Transitions--------- in head style/css file --------h1{

font-size:70px;-webkit-transition: font-size 2s;-moz-transition: font-size 2s;

}

--------- in Body --------h1:hover{

font-size: 200px;}

©Inbal Geffen 2012

CSS3 Animations - Transitions--------- in head style/css file --------#div1{ background-color: Black; -webkit-transition: background-color 2s; -moz-transition: background-color 2s; width: 100px; height: 100px; } #div1:hover{ background-color: silver;}

--------- in Body --------<div id="div1"> </div>

©Inbal Geffen 2012

#div1 { background-color: Black; -webkit-transition: background-color 2s; -moz-transition: background-color 2s; width: 100px; height: 100px; } #div1.transition{ background-color: silver;}

function startAnimation() { document.getElementById("div1").className = 'transition'; }

<input type="button" value="Start Animation" onclick="startAnimation();" />

CSS3 Animations - Transitions

©Inbal Geffen 2012

CSS3 Transitions

div:hover {width:300px;

}

Multiple changes!div {

-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;

}

©Inbal Geffen 2012

div{width: 100px;height: 100px;background: red;position:relative;-moz-animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite;

}

@-moz-keyframes mymove /* Firefox */{

from {top: 0px;}to {top: 200px;}

}@-webkit-keyframes mymove /* Safari and Chrome */{

from {top: 0px;}to {top: 200px;}

}

CSS3 Animations@keyframes - no triggers needed!

©Inbal Geffen 2012

CSS3 Animations

Multi - animation@-moz-keyframes myfirst /* Firefox */ {

0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}

}

©Inbal Geffen 2012