Css3

CSS3

©Inbal Geffen 2012

What's new in CSS3?
● Syntax

● Selectors

● Design Features

©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

New Selectors
● 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

©Inbal Geffen 2012

Attribute Selectors
● [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
©Inbal Geffen 2012

Attribute Selectors
● [attr='value'] - Exact Attribute Selector
a[rel='friend']
{
color:red;
}

Only Shiri will be colored red

©Inbal Geffen 2012

Attribute Selectors
● [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 Syntax
element[att^=val]
Examples
a[href^="http://"]
p[title^="Hello"]

Example HTML 2

©Inbal Geffen 2012

Attribute Selectors
● [attr$='value'] - the “ends with” selector
The Syntax
element[att$=val]
Examples
a[href$=".pdf"] p[title$="World"]

● [attr*='value'] - the “contains” selector
The Syntax
element[att*=val]
Examples
a[href*="google.com"] p[title$="orl"]

©Inbal Geffen 2012

Attribute Selectors
● 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
©Inbal Geffen 2012

Pseudo-Class Selectors
● 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
©Inbal Geffen 2012

Structural Selectors
● 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

©Inbal Geffen 2012

UI-Element State Selectors
● 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

©Inbal Geffen 2012

CSS3 - Design Features

©Inbal Geffen 2012

CSS3 Borders
Border-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

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

#div1
{
box-shadow: 4px 4px black;
background-color: silver;
width: 200px;
height: 100px;
}

©Inbal Geffen 2012

CSS3 Shadows
Text-shadow
E { 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>

©Inbal Geffen 2012

CSS3 Columns
.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> ©Inbal Geffen 2012

CSS3 Columns -2-
.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;
}

©Inbal Geffen 2012

CSS3 Opacity & Color
#img1
{
filter: alpha(opacity=50);
}

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

Example HTML Opacity

©Inbal Geffen 2012

CSS3 2D Transforms
● Translate
div {
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%);
} ©Inbal Geffen 2012

CSS3 Animations

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

● Transitions
occur only when the relevant attribute changes

● Animations
occur 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

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

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

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

<input type="button" value="Start Animation" onclick="startAnimation();" />
©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

CSS3 Animations
@keyframes - no triggers needed!

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

Css3

Recommended

More Related Content

What's hot (20)

Similar to Css3 (20)

More from Inbal Geffen (9)

Css3