MS TechDays 2011 - Microsoft Exchange Server and Office 365 Hybrid Deployment
Microsoft TechDays - CSS3 Presentation
-
Upload
rachel-andrew -
Category
Technology
-
view
117 -
download
1
description
Transcript of Microsoft TechDays - CSS3 Presentation
![Page 1: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/1.jpg)
INTRODUCTION
TO - CSS 3 - FOR
WEB DEVELOPERS
Monday, 23 May 2011
![Page 2: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/2.jpg)
RACHEL ANDREW
Monday, 23 May 2011
![Page 3: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/3.jpg)
RACHEL ANDREW
@rachelandrew
rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com
Monday, 23 May 2011
![Page 4: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/4.jpg)
CSS 3
Monday, 23 May 2011
![Page 5: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/5.jpg)
CSS3 IS
THE NEXT VERSION OF CSS
Monday, 23 May 2011
![Page 6: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/6.jpg)
CSS3 IS
MODULAR
Monday, 23 May 2011
![Page 7: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/7.jpg)
SOME CSS3 MODULES ARE MORE COMPLETE
THAN OTHERS
Monday, 23 May 2011
![Page 8: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/8.jpg)
W3C MATURITY LEVELS
•Working Draft•Candidate Recommendation•Proposed Recommendation•W3C Recommendation
http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
Monday, 23 May 2011
![Page 9: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/9.jpg)
CSS3 IS SUPPORTED BY BROWSERS
Some browsers and some (parts of) modules.
Monday, 23 May 2011
![Page 10: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/10.jpg)
VENDOR-SPECIFIC EXTENSIONS
Implementing early stage CSS3
Monday, 23 May 2011
![Page 11: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/11.jpg)
border-radius
Monday, 23 May 2011
![Page 12: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/12.jpg)
.box {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}
border-radius
Monday, 23 May 2011
![Page 13: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/13.jpg)
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
Monday, 23 May 2011
![Page 14: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/14.jpg)
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
•W3C Approved way to add extensions
Monday, 23 May 2011
![Page 15: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/15.jpg)
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
•W3C Approved way to add extensions•If a module changes browser doesn’t need to change and break older code
Monday, 23 May 2011
![Page 16: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/16.jpg)
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
•W3C Approved way to add extensions•If a module changes browser doesn’t need to change and break older code•Use with care - and always include the real property
Monday, 23 May 2011
![Page 17: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/17.jpg)
USING CSS3
Monday, 23 May 2011
![Page 18: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/18.jpg)
USING CSS3Selectors
Monday, 23 May 2011
![Page 19: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/19.jpg)
SELECTORS MODULE
W3C Proposed Recommendationhttp://www.w3.org/TR/css3-selectors/
Monday, 23 May 2011
![Page 20: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/20.jpg)
THE PROBLEM WITH CSS2 SELECTORS
Not preciseLed to “classitis”
If we can’t access mark-up it is hard to target things
Monday, 23 May 2011
![Page 21: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/21.jpg)
CSS3 SELECTORS
“Common sense” new selectorstarget elements more precisely without adding classes
Monday, 23 May 2011
![Page 22: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/22.jpg)
first-child
target an element when it is the first child of a parent element
Monday, 23 May 2011
![Page 23: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/23.jpg)
first-child
Monday, 23 May 2011
![Page 24: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/24.jpg)
div#wrapper p:first-child {! ! font-size: 1.5em;}
first-child
Monday, 23 May 2011
![Page 25: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/25.jpg)
first-child
Monday, 23 May 2011
![Page 26: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/26.jpg)
last-child
target an element when it is the last child of a parent element
Monday, 23 May 2011
![Page 27: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/27.jpg)
last-child
Monday, 23 May 2011
![Page 28: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/28.jpg)
ul#navigation li:last-child {! ! border-bottom: none;}
last-child
Monday, 23 May 2011
![Page 29: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/29.jpg)
last-child
Monday, 23 May 2011
![Page 30: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/30.jpg)
nth-child
select multiple elements according to their position in the document tree
Monday, 23 May 2011
![Page 31: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/31.jpg)
nth-child
Monday, 23 May 2011
![Page 32: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/32.jpg)
tr:nth-child(odd) td {! ! background-color: #f0e9c5;}
nth-child
Monday, 23 May 2011
![Page 33: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/33.jpg)
NTH-CHILD
Monday, 23 May 2011
![Page 34: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/34.jpg)
tr:nth-child(2n+1) td {! ! background-color: #f0e9c5;}
nth-child
http://reference.sitepoint.com/css/understandingnthchildexpressions
Monday, 23 May 2011
![Page 35: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/35.jpg)
div#wrapper h1 + p {! font-size: 1.5em;}
Adjacent Sibling
Monday, 23 May 2011
![Page 36: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/36.jpg)
Adjacent Sibling
Monday, 23 May 2011
![Page 37: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/37.jpg)
form input[type="text"] {
}!form input[type="submit"] { }
Attribute Selectors
Monday, 23 May 2011
![Page 38: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/38.jpg)
ATTRIBUTE SELECTORS
Monday, 23 May 2011
![Page 39: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/39.jpg)
label[for="fContact"] { ! float: none; ! width: auto;}
a[href ^="mailto:"] {! ! padding-right: 20px;! ! background-image:url(email.png);! ! background-repeat: no-repeat;! ! background-position: right center;}
Attribute Selectors
Monday, 23 May 2011
![Page 40: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/40.jpg)
BROWSER
SUPPORT
Monday, 23 May 2011
![Page 41: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/41.jpg)
BROWSER SUPPORT
Monday, 23 May 2011
![Page 42: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/42.jpg)
DOES IT MATTER?
Monday, 23 May 2011
![Page 43: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/43.jpg)
THAT DEPENDS...
Monday, 23 May 2011
![Page 44: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/44.jpg)
YES, IT MATTERS.
Monday, 23 May 2011
![Page 45: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/45.jpg)
JAVASCRIPT
Plug the holes in browser support using JavaScript.
Monday, 23 May 2011
![Page 46: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/46.jpg)
ROLL YOUR OWN
Monday, 23 May 2011
![Page 47: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/47.jpg)
div#wrapper p:first-child,div#wrapper p.first {! ! font-size: 1.5em;}
jQuery: first-child
<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("div#wrapper p:first-child").addClass("first"); });</script>
Monday, 23 May 2011
![Page 48: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/48.jpg)
ul#navigation li:last-child, ul#navigation li.last {! ! border-bottom: none;}
jQuery: last-child
<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("ul#navigation li:last-child").addClass("last"); });</script>
Monday, 23 May 2011
![Page 49: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/49.jpg)
tr:nth-child(odd) td, td.odd {! background-color: #f0e9c5;}
jQuery: nth-child
<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("tr:nth-child(odd) td").addClass("odd"); });</script>
Monday, 23 May 2011
![Page 50: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/50.jpg)
USE A “POLYFILL”
“A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide
natively. Flattening the API landscape if you will.”
Remy Sharp - http://remysharp.com/2010/10/08/what-is-a-polyfill/
Monday, 23 May 2011
![Page 51: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/51.jpg)
CSS3 POLYFILLS
http://ecsstender.orghttp://selectivizr.com/
Monday, 23 May 2011
![Page 52: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/52.jpg)
CAUTION REQUIRED
Remember some users may have an old browser AND no JavaScript
Monday, 23 May 2011
![Page 53: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/53.jpg)
USING CSS3
Monday, 23 May 2011
![Page 54: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/54.jpg)
USING CSS3Color
Monday, 23 May 2011
![Page 55: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/55.jpg)
COLOR MODULE
Working Drafthttp://www.w3.org/TR/css3-color/
Monday, 23 May 2011
![Page 56: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/56.jpg)
OPACITY
specify the opacity of an element
Monday, 23 May 2011
![Page 57: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/57.jpg)
opacity
Monday, 23 May 2011
![Page 58: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/58.jpg)
ul#gallery li {! ! opacity: 0.4;}
ul#gallery li:hover {! ! opacity: 1;}
opacity
Monday, 23 May 2011
![Page 59: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/59.jpg)
RGBA
specify the opacity of a colour with ‘alpha’
Monday, 23 May 2011
![Page 60: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/60.jpg)
RGBA
Monday, 23 May 2011
![Page 61: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/61.jpg)
div#feature .caption { background-color: rgba(255,255,255,0.5);}
RGBA
Monday, 23 May 2011
![Page 62: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/62.jpg)
24WAYS.ORG
Monday, 23 May 2011
![Page 63: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/63.jpg)
BROWSER
SUPPORT?
Monday, 23 May 2011
![Page 64: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/64.jpg)
USING CSS3
Monday, 23 May 2011
![Page 65: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/65.jpg)
USING CSS3Fonts
Monday, 23 May 2011
![Page 66: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/66.jpg)
FONTS MODULE
Working Drafthttp://www.w3.org/TR/css3-fonts/
Monday, 23 May 2011
![Page 67: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/67.jpg)
@FONT-FACE
using a font other than one installed on your user’s computer
Monday, 23 May 2011
![Page 68: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/68.jpg)
@font-face { !font-family: KaffeesatzBold; !src: url(YanoneKaffeesatz-Bold.ttf);}
h1 { ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal;}
@font-face
Monday, 23 May 2011
![Page 69: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/69.jpg)
BROWSER COMPATIBILITY
We need to use different types of fonts for different browsers and operating systems
Monday, 23 May 2011
![Page 70: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/70.jpg)
LICENSING ISSUES
Most commercial fonts have a license which prohibits them being uploaded to a webserver.
Monday, 23 May 2011
![Page 71: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/71.jpg)
FONTS WITH FONT SQUIRREL
http://www.fontsquirrel.com
Monday, 23 May 2011
![Page 72: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/72.jpg)
FONT SQUIRREL
Monday, 23 May 2011
![Page 73: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/73.jpg)
@font-face {! font-family: 'YanoneKaffeesatzBold';! ! src: url('yanonekaffeesatz-bold-webfont.eot');! ! src: local('☺'), url('yanonekaffeesatz-bold-webfont.woff') format('woff'), url('yanonekaffeesatz-bold-webfont.ttf') format('truetype'), url('yanonekaffeesatz-bold-webfont.svg#webfontUcEp3Pt5') format('svg');! font-weight: normal;! font-style: normal;}
FONT SQUIRREL
Monday, 23 May 2011
![Page 74: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/74.jpg)
HOSTED FONT SERVICES
http://www.typekit.comhttp://fontdeck.com/
http://webfonts.fonts.com/
Monday, 23 May 2011
![Page 75: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/75.jpg)
EDGEOFMYSEAT.COM
Monday, 23 May 2011
![Page 76: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/76.jpg)
USING CSS3
Monday, 23 May 2011
![Page 77: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/77.jpg)
USING CSS3Backgrounds &
Borders
Monday, 23 May 2011
![Page 78: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/78.jpg)
BACKGROUNDS & BORDERS MODULE
W3C Candidate Recommendationhttp://www.w3.org/TR/css3-background/
Monday, 23 May 2011
![Page 79: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/79.jpg)
MULTIPLE BACKGROUNDS
Apply more than one background image to an element
Monday, 23 May 2011
![Page 80: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/80.jpg)
blockquote {! ! background: url(quote-left.gif) top left no-repeat,! ! url(quote-right.gif) bottom right no-repeat;! }
backgrounds
Monday, 23 May 2011
![Page 81: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/81.jpg)
backgrounds
Monday, 23 May 2011
![Page 82: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/82.jpg)
BORDER-RADIUS
Yes! CSS rounded corners
Monday, 23 May 2011
![Page 83: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/83.jpg)
.box1 {! ! background-color: #a18c83;! ! border: 3px solid #6d4d6b;! ! -moz-border-radius: 15px;! ! -webkit-border-radius: 15px;
border-radius: 15px;! ! color: #fff;! ! padding: 10px;! ! margin: 0 0 20px 0;! }!! .box2 {! ! border: 5px solid #6d4d6b;! ! -moz-border-radius-topleft: 50px;! ! -webkit-border-top-left-radius: 50px;
border-top-left-radius: 50px;! ! padding: 10px 5px 5px 20px;! }
border-radius
Monday, 23 May 2011
![Page 84: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/84.jpg)
border-radius
Monday, 23 May 2011
![Page 85: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/85.jpg)
BOX-SHADOW
drop shadows without images
Monday, 23 May 2011
![Page 86: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/86.jpg)
.box1 {! ! background-color: #333;! ! -moz-border-radius: 15px;! ! -webkit-border-radius: 15px;
border-radius: 15px;-moz-box-shadow: 10px 10px 5px #666;-webkit-box-shadow: 10px 10px 5px #666;box-shadow: 10px 10px 5px #666;
! ! color: #fff;! ! padding: 10px;! ! margin: 0 0 20px 0;! }
box-shadow
Monday, 23 May 2011
![Page 87: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/87.jpg)
box-shadow
Monday, 23 May 2011
![Page 88: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/88.jpg)
BROWSER
SUPPORT
Monday, 23 May 2011
![Page 90: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/90.jpg)
USING CSS3
Monday, 23 May 2011
![Page 91: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/91.jpg)
USING CSS3CSS Media Queries
Monday, 23 May 2011
![Page 92: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/92.jpg)
MEDIA QUERIES
W3C Candidate Recommendationhttp://www.w3.org/TR/css3-mediaqueries/
Monday, 23 May 2011
![Page 93: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/93.jpg)
MEDIA QUERIES
target browser characteristics, for example screen resolution, width and height
Monday, 23 May 2011
![Page 94: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/94.jpg)
div#wrapper {! width: 780px;! margin-left: auto;! margin-right: auto;}!div#header {! background-image: url(media-queries-browser.jpg);! height: 349px;! position: relative;}!#content {! float: left;! width: 540px;}!#navigation {! float:right;! width: 200px;}
Media Queries
Monday, 23 May 2011
![Page 95: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/95.jpg)
Media Queries
Monday, 23 May 2011
![Page 96: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/96.jpg)
@media screen and (max-device-width: 480px) {! ! div#wrapper {! ! ! width: 400px;! ! }!! ! div#header {! ! ! background-image: url(media-queries-phone.jpg);! ! ! height: 93px;! ! ! position: relative;! ! }! !! ! div#header h1 {! ! ! font-size: 140%;! ! }! !! ! #content {! ! ! float: none;! ! ! width: 100%;! ! }!! ! #navigation {! ! ! float:none;! ! ! width: auto;! ! }! }
Media Queries
Monday, 23 May 2011
![Page 97: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/97.jpg)
Media Queries
Monday, 23 May 2011
![Page 98: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/98.jpg)
<link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" />
Media Queries
Monday, 23 May 2011
![Page 99: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/99.jpg)
MEDIAQUERI.ES
Monday, 23 May 2011
![Page 100: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/100.jpg)
RESPONSIVE DESIGN
http://www.alistapart.com/articles/responsive-web-design/
Monday, 23 May 2011
![Page 101: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/101.jpg)
MOBILE
BROWSER
SUPPORT
Monday, 23 May 2011
![Page 102: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/102.jpg)
YES!
Monday, 23 May 2011
![Page 103: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/103.jpg)
YES!Unless you are targeting Windows Phone 7
Monday, 23 May 2011
![Page 104: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/104.jpg)
PROVIDING CSS TO WINDOWS
PHONE 7
http://adactio.com/journal/4494/
Monday, 23 May 2011
![Page 105: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/105.jpg)
DESKTOP
BROWSER
SUPPORT
Monday, 23 May 2011
![Page 106: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/106.jpg)
MEDIA QUERY SUPPORT
Monday, 23 May 2011
![Page 107: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/107.jpg)
MEDIA QUERIES POLYFILLS
http://code.google.com/p/css3-mediaqueries-js/https://github.com/scottjehl/Respond
Monday, 23 May 2011
![Page 108: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/108.jpg)
THANK YOU!
Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/
Monday, 23 May 2011
![Page 109: Microsoft TechDays - CSS3 Presentation](https://reader038.fdocuments.in/reader038/viewer/2022103111/54c7f8984a795954348b45c8/html5/thumbnails/109.jpg)
THANK YOU!
@rachelandrew
http://wp.me/PorPc-cf
Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/
Monday, 23 May 2011