1. CSS3
©Inbal Geffen 2012

2. What's new in CSS3?
● Syntax
● Selectors
● Design Features
©Inbal Geffen 2012

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

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

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

6. Attribute Selectors
● [attr='value'] - Exact Attribute Selector
a[rel='friend']
{
color:red;
}
Only Shiri will be colored red
©Inbal Geffen 2012

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

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

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

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

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

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

13. CSS3 - Design Features
©Inbal Geffen 2012

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

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

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

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

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

19. CSS3 Opacity & Color
#img1
{
filter: alpha(opacity=50);
}
p
{
color: rgba(0,0,0,0.5);
}
Example HTML Opacity
©Inbal Geffen 2012

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

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

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

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

24. CSS3 Animations - Transitions
#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();" />
©Inbal Geffen 2012

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

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

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