0
CSS3       ©Inbal Geffen 2012
Whats 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)di...
New Selectors● Dom Selectors  ○ Attribute selectors  ○ id selectors  ○ class selectors● Pseudo selectors  ○ Work on elemen...
Attribute Selectors● [attr] - Simple Attribute Selector  ○ Perform css style on all the elements with the attribute in the...
Attribute Selectors● [attr=value] - Exact Attribute Selector  a[rel=friend]  {       color:red;  }  Only Shiri will be col...
Attribute Selectors● [attr^=value] - the “begins with” selectorThe “begins with” selector allows for the selection of elem...
Attribute Selectors● [attr$=value] - the “ends with” selectorThe Syntaxelement[att$=val]Examplesa[href$=".pdf"] p[title$="...
Attribute Selectors● E~F  ○ Perform css style on all F typed elements that exist after E typed          elements in the sa...
Pseudo-Class Selectors● Structural  ○ Dynamically select content based on its position in the document     ■ :first-child ...
Structural Selectors●   Dynamically select content based on its position in the document    ○   :first-child :last-child :...
UI-Element State Selectors●   Dynamically select content based on its UI statee:pseudo-class {}.class:pseudo-class {}#id:p...
CSS3 - Design Features                         ©Inbal Geffen 2012
CSS3 BordersBorder-radius (Rounded corners)#div1{    border-radius: 20px 20px;    background-color: red;    width: 200px; ...
CSS3 ShadowsBox-shadowE { box-shadow: inset horizontal vertical blur spread color; }#div1{    box-shadow: 4px 4px black;  ...
CSS3 ShadowsText-shadowE { text-shadow: x y blur-radius color; }#header1{    text-shadow: 3px 3px gray;    font-size: 80px...
CSS3 Columns.columns // System 1{     -webkit-column-count: 4;     -moz-column-count: 4;}.columns // System 2 - more dynam...
CSS3 Columns -2-.columns{     -webkit-column-count: 3;     -webkit-column-gap: 2em;     -webkit-column-rule: 0.3em double ...
CSS3 Opacity & Color#img1{    filter: alpha(opacity=50);}p{      color: rgba(0,0,0,0.5);}    Example HTML Opacity         ...
CSS3 2D Transforms ● Translatediv {        transform: translate(50px,100px);        -ms-transform: translate(50px,100px); ...
CSS3 Animations●   CSS can also affect design by behavior (:hover)●   Transitions    occur only when the relevant attribut...
CSS3 Animations - Transitions--------- in head style/css file --------h1{      font-size:70px;      -webkit-transition: fo...
CSS3 Animations - Transitions--------- in head style/css file --------#div1{          background-color: Black;          -w...
CSS3 Animations - Transitions#div1     {         background-color: Black;         -webkit-transition: background-color 2s;...
CSS3 Transitionsdiv:hover {     width:300px;}Multiple changes!div {        -moz-transition: width 2s, height 2s, -moz-tran...
CSS3 Animations@keyframes - no triggers needed!div{       width: 100px;       height: 100px;       background: red;       ...
CSS3 AnimationsMulti - animation@-moz-keyframes myfirst /* Firefox */ {   0% {background: red; left:0px; top:0px;}   25% {...
Upcoming SlideShare
Loading in...5
×

Css3

385

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
385
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Css3"

  1. 1. CSS3 ©Inbal Geffen 2012
  2. 2. Whats new in CSS3?● Syntax● Selectors● Design Features ©Inbal Geffen 2012
  3. 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. 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. 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. 6. Attribute Selectors● [attr=value] - Exact Attribute Selector a[rel=friend] { color:red; } Only Shiri will be colored red ©Inbal Geffen 2012
  7. 7. Attribute Selectors● [attr^=value] - the “begins with” selectorThe “begins with” selector allows for the selection of elements where aspecified attribute (e.g. the href attribute of a hyperlink) begins with aspecified string (e.g. “http://”, “https://” or “mailto:”).The Syntaxelement[att^=val]Examplesa[href^="http://"]p[title^="Hello"]Example HTML 2 ©Inbal Geffen 2012
  8. 8. Attribute Selectors● [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"] ©Inbal Geffen 2012
  9. 9. Attribute Selectors● E~F ○ Perform css style on all F typed elements that exist after E typed elements in the same DOM levelh2 ~ p{ font-style:italic;}h2 + p{ font-style:bold;}Example HTML 3 ©Inbal Geffen 2012
  10. 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. 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. 12. UI-Element State Selectors● Dynamically select content based on its UI statee: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 pageExample HTML 5 ©Inbal Geffen 2012
  13. 13. CSS3 - Design Features ©Inbal Geffen 2012
  14. 14. 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
  15. 15. CSS3 ShadowsBox-shadowE { 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. 16. CSS3 ShadowsText-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> ©Inbal Geffen 2012
  17. 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. 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. 19. CSS3 Opacity & Color#img1{ filter: alpha(opacity=50);}p{ color: rgba(0,0,0,0.5);} Example HTML Opacity ©Inbal Geffen 2012
  20. 20. CSS3 2D Transforms ● 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 ● Skewdiv { -webkit-transform: rotate(-40deg) scale(0.75) translate(-20%, -220%); } ©Inbal Geffen 2012
  21. 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. 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. 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. 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. 25. CSS3 Transitionsdiv: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. 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. 27. CSS3 AnimationsMulti - 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×