css3
DESCRIPTION
TRANSCRIPT
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