CSS 3
-
Upload
chad-carstensen -
Category
Documents
-
view
374 -
download
2
description
Transcript of CSS 3
CSS3: Progressive Enrichment and Graceful Degradation
What’s new in CSS?
CSS3 Properties and Values Text Shadow, Text Stroke and Text Overflow Box Shadow and Sizing Border Image, Radius and Gradient Opacity and RGBA Color Columns @FontFace Transitions :Before and :After¹▪ ¹Improved over CSS Revisions
A closer look . . .
How we make an image button Use Photoshop to make button bgd and
text Optimize for Web Upload Image Add to Markup▪ Total Time = > 6 Minutes
The Image Button
Markup: <a href=“”><img
src=img_button.jpg /></a>
A closer look . . .
How to make a button with Border-radius Text-shadow▪ HTML▪ CSS3▪ Multiple States▪ Total Time = > 3 Minutes
The CSS3 Button
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>
The Inevitable . . .
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
The CSS3 Button Markup:
CSS:div.rnd_btn a {padding:10px 14px;color:#FFFFFF;font-family:Arial Narrow;font-size:24px;font-weight:bold;background:#090url(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>
The Problem: CSS3 SupportProperty 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
What is . . .
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
What is . . .
Graceful Degradation “…allowing [CSS3 non-supporting]
browsers to degrade in a perfectly acceptable fashion.”¹
¹ Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83
For the “Visual People”
The “New Box Model” Markup: <div>BOX</div>
I give 80%
“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”
A Question . . .
Do things need to look the same on all browsers mediums? On the Web: IE, Firefox, Sarari▪ What about resolutions? What about CMS?
On the Mobile: iPhone, Blackberry On the TV: PS3, Xbox Audible: Screen and Text Readers
The Web is not Print
RGBA Color
Old Way: Image only New Way: RGBA and/or Opacity
RGBA Color
Old Way: Image only Markup: <img src=“image” alt=“abc” />
New Way: 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;}
Columns
Old Way: Tables, Floats New Way: 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; }
@font-face
Old Way: Image Only New Way: @font-face
Legal and style Issues?
@font-face {font-family: "Archer";src: url("fonts/archer-medium.otf")}
body {font-family: "Archer", Arial, sans-serif;}
.Group*
Old Way: Clearfix New Way: .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%;}
.Group*
References
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