• Like
#4 - CSS Selectors, CSS3 and Web typography
Upcoming SlideShare
Loading in...5
×

#4 - CSS Selectors, CSS3 and Web typography

  • 586 views
Uploaded on

- CSS selectors …

- CSS selectors
- CSS3
- Web typography

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
586
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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