Your SlideShare is downloading. ×
CSS 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS 3

352
views

Published on


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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  CSS3 Properties andValues  Text Shadow,Text Stroke andText Overflow  Box Shadow and Sizing  Border Image, Radius and Gradient  Opacity and RGBA Color  Columns  @FontFace  Transitions  :Before and :After¹ ▪ ¹Improved over CSS Revisions
  • 2.  How we make an image button  Use Photoshop to make button bgd and text  Optimize forWeb  Upload Image  Add to Markup ▪ TotalTime = > 6 Minutes
  • 3.  Markup:  <a href=“”><img src=img_button.jpg /></a>
  • 4.  How to make a button with  Border-radius  Text-shadow ▪ HTML ▪ CSS3 ▪ Multiple States ▪ TotalTime = > 3 Minutes
  • 5.  Markup:  CSS: div.rnd_btn a { padding:10px 14px; color:#FFFFFF; font-family:Arial Narrow; font-size:24px; font-weight:bold; background:#ff5700 url(images/btn_bgd.png) repeat-x 0 50%; text-shadow: 0.05em 0.05em 0.05em #333; text-decoration:none; border:5px solid #ff5700; border-radius:14px; -webkit-border-radius:14px; -moz-border-radius:14px; box-shadow:0px 0px 10px #333; -webkit-box-shadow:0px 0px 10px #333; -moz-box-shadow:0px 0px 10px #333; } <div class="rnd_btn"> <a href="">GET CONTRACTED!</a> </div>
  • 6.  That’s great, but can you make it green?  Total time to change image (> 6 minutes) ▪ Now we have two images ▪ And a new image (must replace an old one)  Total time to change CSS (< 1 minute) ▪ As few as 3-character change ▪ Cascades throughout site ▪ Semantics
  • 7.  Markup:  CSS: div.rnd_btn a { padding:10px 14px; color:#FFFFFF; font-family:Arial Narrow; font-size:24px; font-weight:bold; background:#090 url(images/btn_bgd.png) repeat-x 0 50%; text-shadow: 0.05em 0.05em 0.05em #333; text-decoration:none; border:5px solid #090; border-radius:14px; -webkit-box-shadow:0px 0px 10px #333; -moz-box-shadow:0px 0px 10px #333; -webkit-border-radius:14px; -moz-border-radius:14px; } div.rnd_btn a:hover { background-color:#0C0; } <div class="rnd_btn"> <a href="">GET CONTRACTED!</a> </div>
  • 8. Property Firefox 3 (12%) Safari 3 (2%) Opera 9 (2%) IE 8 (37%) IE 7 & 6 (47%) Text-Shadow SUPPORTED SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED Box-Shadow SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED Multiple BGD SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED Border-Image SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED Text-Stroke SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED Border-Radius SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED Opacity SUPPORTED SUPPORTED SUPPORTED SUPPORTED SUPPORTED on 7 Text-Overflow SUPPORTED SUPPORTED SUPPORTED SUPPORTED NOT SUPPORTED :before SUPPORTED SUPPORTED NOT SUPPORTED SUPPORTED NOT SUPPORTED :after SUPPORTED SUPPORTED NOT SUPPORTED SUPPORTED SUPPORTED on 7 RGBA SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED Columns SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED @fontface SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED Transitions SUPPORTED SUPPORTED NOT SUPPORTED NOT SUPPORTED NOT SUPPORTED
  • 9.  Progressive Enrichment  “…visual details as rewards for the browsers that support the advanced code that creates them…”¹  “…visually rewarding users of browsers that are forward thinking…”¹ ▪ -webkit-border-radius:14px; ▪ -moz-border-radius:14px;  ¹ Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83
  • 10.  Graceful Degradation  “…allowing [CSS3 non-supporting] browsers to degrade in a perfectly acceptable fashion.”¹  ¹ Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83
  • 11.  The “New Box Model”  Markup: <div>BOX</div>
  • 12.  “I’ve always thought of myself as an 80 percenter . . . to go beyond that requires an obsession and degree of specialization that doesn’t appeal to me.”²  Yvon Chouinard, Let My People Go Surfing ▪ Founder and Owner, Patagonia ▪ ²Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83  What does the last 20% do to your budget  Think about nested tables and spacer gifs  What about “Decision Makers”
  • 13.  Do things need to look the same on all browsers mediums?  On theWeb: IE, Firefox, Sarari ▪ What about resolutions?What about CMS?  On the Mobile: iPhone, Blackberry  On theTV: PS3, Xbox  Audible: Screen andText Readers  TheWeb is not Print
  • 14.  OldWay: Image only  NewWay: RGBA and/or Opacity
  • 15.  OldWay: Image only  Markup: <img src=“image” alt=“abc” />  NewWay: RGBA and/or Opacity <div class="special"> <a href="retirement-income.cfm?page=guides" title="Recent Updates from SEQUENT"> <img src="http://seniormarketsales.s3.amazonaws.com/sequent/images/sequent_whitepaper_retirement_income_couple.jpg" width="425" height="298" border="0" /> <span> <strong>Recent Updates from SEQUENT:</strong> <em>Free guides for 2010 are now available in the &##8220;Free Guides&##8221; section of the website. Click here to learn more.</em> <br /> </span> </a> </div> div.special { position:relative; width:425px; font-size:80%; } div.special a span { display:block; position:absolute; width:425px; bottom:2px; *bottom:3px; left:0; line-height:1.3em; background:#000; background:rgba(0,0,0,.8); } div.special a strong { display:block; padding:10px 10px 0 10px; color:#fff; } div.special a em { display:block; padding:0 10px 10px 10px; font-style:normal; color:#fff; } div.special a:hover span { background:#333; background:rgba(0,54,96,.8); cursor:pointer; }
  • 16.  OldWay:Tables, Floats  NewWay: Column  Semantic  Easy Markup <div class=“article”> <p>Lorem ispum … </p> <p>Lorem ispum … </p> <p>Lorem ispum … </p> </div> .article { width:40em; text-align: justify; -moz-column-count: 2; -moz-column-width: 15em; -moz-column-gap: 2em; }
  • 17.  OldWay: Image Only  NewWay: @font-face  Legal and style Issues? @font-face { font-family: "Archer"; src: url("fonts/archer-medium.otf") } body { font-family: "Archer", Arial, sans-serif; }
  • 18.  OldWay: Clearfix  NewWay: .Group  Semantic (more than just a <br /> or clearfix)  Modular  *This is actually a CSS2 property, but until recently it hasn’t been widely supported on any browser. .group:after { Content: “.”; Display:block; Height:0px; Clear:both; Visibility:hidden } /* for IE 6 .group { Height:1%; } /* for IE 7 *:first-child+html .group { Min-height:1%; }
  • 19.  www.Simplebits.com  http://shouldwebsiteslookthesameinallbrowsers.com/  http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/  http://www.westciv.com/iphonetests/  http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html  ¹ Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83