0
Tecniche di animazionedigitale 1
Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accade...
Basic 4December 12, 2012
AgendaCSS selectors    5                 10CSS3                 40Web typography
CSS selectors
CSS selectors● #id● .class● element                6   Basic / CSS selectors
CSS selectors● element element● element > element: select elements with a specific parent.  http://jsfiddle.net/MicheleBer...
CSS selectors● attribute● [attribute=value]● [attribute~=value]: select elements with an attribute  value containing a spe...
CSS selectors●   :link               ●   :first-letter●   :visited            ●   :first-line●   :active             ●   :...
Priority level of selector● style attribute = a● number of ID attributes in the selector = b● number of other attributes a...
Efficiency●   ID, e.g. #header●   Class, e.g. .promo●   Type, e.g. div●   Adjacent sibling, e.g. h2 + p●   Child, e.g. li ...
CSS3
IntroductionCascading Style Sheets is a style sheet language used fordescribing the presentation semantics (the look andfo...
CSS3 modulesCSS3 is split up into "modules".Some of the most important CSS3 modules are:●   Selectors●   Box Model●   Back...
CSS3 selectors● element1 ~ element2: matches occurrences of element2   that are preceded by element1.● [attribute^=value]:...
CSS3 selectors● :first-of-type● :last-of-type● :only-of-type   http://jsfiddle.net/MicheleBertoli/uBxsU/2                 ...
CSS3 selectors●   :only-child●   :nth-child(n)●   :nth-last-child(n)●   :nth-of-type(n)●   :nth-last-of-type(n)●   :last-c...
CSS3 selectors●   :root●   :empty●   :target●   :enabled●   :disabled●   :checked●   :not(selector)●   ::selection        ...
Border radius  div  {        border:5px solid #ccc;        border-radius:10px;  } http://jsfiddle.net/MicheleBertoli/Akt8x...
Box shadow  div  {        box-shadow:10px 10px 5px #ccc;  } http://jsfiddle.net/MicheleBertoli/2BLt5                      ...
Text shadow  h1  {       text-shadow:5px 5px #ccc;  } http://jsfiddle.net/MicheleBertoli/nv8LL                            ...
PrefixFree-prefix-free lets you use only unprefixed CSS propertieseverywhere. It works behind the scenes, adding the curre...
Coffee Break
Web typography
IntroductionWeb typography refers to the use of fonts on the World WideWeb.                          25   Basic / Web typo...
Properties●   font-family●   font-style●   font-variant●   font-weight●   font-size                   26   Basic / Web typ...
Line heightOn inline elements, the line-height CSS property specifies theheight that is used in the calculation of the lin...
Web-safe fontsWeb-safe fonts are fonts likely to be present on a wide rangeof computer systems, and used by Web content au...
@font-face@font-face is a css rule which allows you to download aparticular font from your server to render a webpage if t...
Formats●   WOFF (Web Open Font Format) .woff●   TrueType .ttf●   OpenType .ttf, .otf●   Embedded OpenType .eot●   SVG Font...
Browser supportInternet Explorer only supports EOTMozilla browsers support OTF and TTFSafari and Opera support OTF, TTF an...
Usage @font-face {       font-family: myFirstFont;       src:url("Sansation_Light.ttf"),           url("Sansation_Light.eo...
Google web fontsGoogle web fonts makes it quick and easy for everyone to useweb fonts, including professional designers an...
Samples http://www.alistapart.com http://theharrietseries.com http://blakeallendesign.com http://aworkinglibrary.com http:...
Thank you
Upcoming SlideShare
Loading in...5
×

#4 - CSS Selectors, CSS3 and Web typography

742

Published on

- 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
742
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "#4 - CSS Selectors, CSS3 and Web typography"

  1. 1. Tecniche di animazionedigitale 1
  2. 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  3. 3. Basic 4December 12, 2012
  4. 4. AgendaCSS selectors 5 10CSS3 40Web typography
  5. 5. CSS selectors
  6. 6. CSS selectors● #id● .class● element 6 Basic / CSS selectors
  7. 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. 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. 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. 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. 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. 12. CSS3
  13. 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. 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. 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. 16. CSS3 selectors● :first-of-type● :last-of-type● :only-of-type http://jsfiddle.net/MicheleBertoli/uBxsU/2 16 Basic / CSS3
  17. 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. 18. CSS3 selectors● :root● :empty● :target● :enabled● :disabled● :checked● :not(selector)● ::selection 18 Basic / CSS3
  19. 19. Border radius div { border:5px solid #ccc; border-radius:10px; } http://jsfiddle.net/MicheleBertoli/Akt8x 19 Basic / CSS3
  20. 20. Box shadow div { box-shadow:10px 10px 5px #ccc; } http://jsfiddle.net/MicheleBertoli/2BLt5 20 Basic / CSS3
  21. 21. Text shadow h1 { text-shadow:5px 5px #ccc; } http://jsfiddle.net/MicheleBertoli/nv8LL 21 Basic / CSS3
  22. 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. 23. Coffee Break
  24. 24. Web typography
  25. 25. IntroductionWeb typography refers to the use of fonts on the World WideWeb. 25 Basic / Web typography
  26. 26. Properties● font-family● font-style● font-variant● font-weight● font-size 26 Basic / Web typography
  27. 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. 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. 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. 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. 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. 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. 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. 34. Samples http://www.alistapart.com http://theharrietseries.com http://blakeallendesign.com http://aworkinglibrary.com http://informationarchitects.net 34 Basic / Web typography
  35. 35. Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×