Your SlideShare is downloading. ×
#4 - CSS Selectors, CSS3 and Web typography
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

#4 - CSS Selectors, CSS3 and Web typography

678
views

Published on

- CSS selectors …

- CSS selectors
- CSS3
- Web typography


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

  • Be the first to like this

No Downloads
Views
Total Views
678
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
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. Tecniche di animazionedigitale 1
  • 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  • 3. Basic 4December 12, 2012
  • 4. AgendaCSS selectors 5 10CSS3 40Web typography
  • 5. CSS selectors
  • 6. CSS selectors● #id● .class● element 6 Basic / CSS selectors
  • 7. CSS selectors● element element● element > element: select elements with a specific parent. http://jsfiddle.net/MicheleBertoli/pvUnR● element + element: select elements that is placed immediately after (not inside) the first specified element. http://jsfiddle.net/MicheleBertoli/xRQwD 7 Basic / CSS selectors
  • 8. CSS selectors● attribute● [attribute=value]● [attribute~=value]: select elements with an attribute value containing a specified word.● [attribute|=value]: select elements with the specified attribute starting with the specified value. http://jsfiddle.net/MicheleBertoli/uBxsU 8 Basic / CSS selectors
  • 9. CSS selectors● :link ● :first-letter● :visited ● :first-line● :active ● :first-child● :hover ● :before● :focus ● :after http://jsfiddle.net/MicheleBertoli/xu95F 9 Basic / CSS selectors
  • 10. Priority level of selector● style attribute = a● number of ID attributes in the selector = b● number of other attributes and pseudo-classes in the selector = c● number of element names and pseudo-elements in the selector = d 10 Basic / CSS selectors
  • 11. Efficiency● ID, e.g. #header● Class, e.g. .promo● Type, e.g. div● Adjacent sibling, e.g. h2 + p● Child, e.g. li > ul● Descendant, e.g. ul a● Universal, i.e. *● Attribute, e.g. [type="text"]● Pseudo-classes/-elements, e.g. a:hover 11 Basic / CSS selectors
  • 12. CSS3
  • 13. IntroductionCascading Style Sheets is a style sheet language used fordescribing the presentation semantics (the look andformatting) of a document written in a markup language. 13 Basic / CSS3
  • 14. CSS3 modulesCSS3 is split up into "modules".Some of the most important CSS3 modules are:● Selectors● Box Model● Backgrounds and Borders● Text Effects● 2D/3D Transformations● Animations● Multiple Column Layout● User Interface 14 Basic / CSS3
  • 15. CSS3 selectors● element1 ~ element2: matches occurrences of element2 that are preceded by element1.● [attribute^=value]: matches every element whose attribute value begins with a specified value.● [attribute$=value]: matches every element whose attribute value ends with a specified value.● [attribute*=value]: matches every element whose attribute value containing a specified value. http://jsfiddle.net/MicheleBertoli/uBxsU/1 15 Basic / CSS3
  • 16. CSS3 selectors● :first-of-type● :last-of-type● :only-of-type http://jsfiddle.net/MicheleBertoli/uBxsU/2 16 Basic / CSS3
  • 17. CSS3 selectors● :only-child● :nth-child(n)● :nth-last-child(n)● :nth-of-type(n)● :nth-last-of-type(n)● :last-child http://jsfiddle.net/MicheleBertoli/uBxsU/3 17 Basic / CSS3
  • 18. CSS3 selectors● :root● :empty● :target● :enabled● :disabled● :checked● :not(selector)● ::selection 18 Basic / CSS3
  • 19. Border radius div { border:5px solid #ccc; border-radius:10px; } http://jsfiddle.net/MicheleBertoli/Akt8x 19 Basic / CSS3
  • 20. Box shadow div { box-shadow:10px 10px 5px #ccc; } http://jsfiddle.net/MicheleBertoli/2BLt5 20 Basic / CSS3
  • 21. Text shadow h1 { text-shadow:5px 5px #ccc; } http://jsfiddle.net/MicheleBertoli/nv8LL 21 Basic / CSS3
  • 22. PrefixFree-prefix-free lets you use only unprefixed CSS propertieseverywhere. It works behind the scenes, adding the currentbrowser’s prefix to any CSS code, only when it’s needed. http://leaverou.github.com/prefixfree 22 Basic / CSS3
  • 23. Coffee Break
  • 24. Web typography
  • 25. IntroductionWeb typography refers to the use of fonts on the World WideWeb. 25 Basic / Web typography
  • 26. Properties● font-family● font-style● font-variant● font-weight● font-size 26 Basic / Web typography
  • 27. Line heightOn inline elements, the line-height CSS property specifies theheight that is used in the calculation of the line box height.On block level elements, line-height specifies the minimalheight of line boxes within the element. line-height:20px; http://jsfiddle.net/MicheleBertoli/b3bRb 27 Basic / Web typography
  • 28. Web-safe fontsWeb-safe fonts are fonts likely to be present on a wide rangeof computer systems, and used by Web content authors toincrease the likelihood that content will be displayed in theirchosen font. 28 Basic / Web typography
  • 29. @font-face@font-face is a css rule which allows you to download aparticular font from your server to render a webpage if theuser hasnt got that font installed. 29 Basic / Web typography
  • 30. Formats● WOFF (Web Open Font Format) .woff● TrueType .ttf● OpenType .ttf, .otf● Embedded OpenType .eot● SVG Font .svg, .svgz 30 Basic / Web typography
  • 31. Browser supportInternet Explorer only supports EOTMozilla browsers support OTF and TTFSafari and Opera support OTF, TTF and SVGChrome supports TTF and SVG. 31 Basic / Web typography
  • 32. Usage @font-face { font-family: myFirstFont; src:url("Sansation_Light.ttf"), url("Sansation_Light.eot"); } div { font-family: myFirstFont; } 32 Basic / Web typography
  • 33. Google web fontsGoogle web fonts makes it quick and easy for everyone to useweb fonts, including professional designers and developers. <link rel="stylesheet" type="text/css" href="http://fonts. googleapis.com/css?family=Tangerine"> <style> body { font-family:"Tangerine", serif; } </style> 33 Basic / Web typography
  • 34. Samples http://www.alistapart.com http://theharrietseries.com http://blakeallendesign.com http://aworkinglibrary.com http://informationarchitects.net 34 Basic / Web typography
  • 35. Thank you

×