jina bolton

Download Jina Bolton

Post on 19-Jun-2015

16.869 views

Category:

Business

2 download

Embed Size (px)

DESCRIPTION

CSS3 And What Could Be

TRANSCRIPT

  • 1. 3JINA BOLTONhttp://creatingsexystylesheets.com/

2. The Art & Science of css by Cameron Adams Jina Bolton David Johnson Steve Smith Jonathan Snook Published by SitePoint 3. 3 css 4. css 3A Giant Servingof FAIL! a lex rus se l lhttp://alex.dojotoolkit.org/?p=625 5. css 3quot;Third Time Lucky#! andy cla rke 6. 1996 css 1 7. 1997 css 2 8. css 2.1 candidate recommendation 9. css 3 modul! 10. Sele$orsBackgrounds& Borders Multi%column Layout MediaAdvancedLayout Queries Grid Positioning 11. Backgrounds & Borders Style any box&s borders and background including attach multiple background% images to a single element. 12. Backgrounds & Borders % border-radius% border-break% border-image% box-shadow 13.

14. .vcard { background:#000url(a-grad.gif)repeat-x; } .addr-bl { background:url(a-bl.gif)100% 0no-repeat; } .addr-tr { background:url(a-tr.gif)100% 0no-repeat; } 15.

16. .vcard { background-color: #000;background-image:url(a-grad.gif),url(a-bl.gif),url(a-tr.gif);background-repeat:repeat-x,no-repeat,no-repeat;background-position:0 0,100% 0,0 100%; } 17. Multi%column Layout Making it simpler to create column layouts without additional markup by using column widths, counts, gaps and rules. 18.

19. .entry-content .col { float: left; width: 467px; margin-left: 30px; } .entry-content .first { margin-left: 0; }/* .entry-content clear-fix rules */ 20.

.entry-content { column-count: 2; column-gap: 30px; } 21.

.entry-content { column-width: 270px; column-gap: 30px; } 22.

.vcard { border-image:url(quot;border.pngquot;)30 30 30 30stretch;border:double green 1em; } 23. Advanced LayoutAims to fully separate visual layout orderfrom a document&s content by de'ning(slots! in a grid in which content can )owor be placed, or that remain empty * allwithout additional markup. 24. a b c d e h f g i j k l 25. a a c d e g e g i j k l 26. @ @ . . e h @ @ . j j l 27. Grid Positioning Gives the ability to add invisible grid rules to create grid layouts quot;like in books and newspapers#, and uses sizing and new )oat properties for placing content. 28.

.entry-content { column-count: 4; column-gap: 30px; } 29. .entry-content { grid-columns:(30px * *)[4];column-count: 4; column-gap: 30px; } 30. .entry-content { grid-columns:(30px * *)[4];grid-rows:9em 33.3% *;column-count: 4; column-gap: 30px; } 31.

32. .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr; } 33.

What is Sushi?

34. .entry-content h2 {float: page top left;width: 6gr;height: 1gr;margin-left: -30px; ic } .entry-content img.photo {float: page bottom left;float-offset: 4gr 1gr;} 35. Sele$ors Re'ned sele$ors to target an element based on an attribute or position in the document )ow plus new pseudo%classes and pseudo%elements. 36. Sele$ors % E:only-of-typean element which is the only sibling of its type% E:not(s)an element that d+s not match simple sele$ors%E ~ Fan F element preceded by an E element 37. Sele$orsE:nth-child(n)an element which is then%th child of its parent 38. tr.alt td { background: #ecffd9; } 39. tr:nth-child(odd) td { background: #ecffd9; } 40. tr.high-rank td { background: #ecffd9; } 41. tr:nth-child(-n+3) td { background: #ecffd9; } 42. Sele$orsE:nth-last-child(n)an element which is then%th child of its parent,counting from the la,one 43. tr.low-rank td { opacity: .75; } 44. tr:nth-last-child(-n+2) td { opacity: .75; } 45. Sele$orsE:nth-of-type(n)an element which is then%th sibling of its type 46.

p.intro { background: #fafcf5; font-size: 1.3em; color: #060; } 47.

p:first-of-type { background: #fafcf5; font-size: 1.3em; color: #030; } 48. Media Queries Extending the usefulness of media types in combination with window widths, heights and aspe$ ratio. 49. Resources 50. CSS ELEVEN IS AN INTERNATIONAL GROUP OF VISUAL WEBDESIGNERS AND DEVELOPERS WHO ARE COMMITTED TO HELPING THE W3C'S CSS WORKING GROUP TO BETTER DELIVER THE TOOLS THAT ARE NEEDED TO DESIGN TOMORROW'S WEB. 51. Resources % w3c Introdu$ion to css 3w3.org/TR/css3-roadmap% css Working Group Blogw3.org/blog/CSS%456 Berea Street456bereastreet.com% css3.info 52. Resources % A Li, Apart alistapart.com% Transcending css Support transcendingcss.com/support/ 53. creatingsexy,ylesheets.com 54. Q&A

View more >