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

#4 - CSS Selectors, CSS3 and Web typography



- CSS selectors

- CSS selectors
- CSS3
- Web typography



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    #4 - CSS Selectors, CSS3 and Web typography #4 - CSS Selectors, CSS3 and Web typography Presentation Transcript

    • Tecniche di animazionedigitale 1
    • Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
    • 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/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
    • 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
    • CSS selectors● :link ● :first-letter● :visited ● :first-line● :active ● :first-child● :hover ● :before● :focus ● :after http://jsfiddle.net/MicheleBertoli/xu95F 9 Basic / CSS selectors
    • 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
    • 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
    • CSS3
    • 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
    • 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
    • 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
    • CSS3 selectors● :first-of-type● :last-of-type● :only-of-type http://jsfiddle.net/MicheleBertoli/uBxsU/2 16 Basic / CSS3
    • 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
    • CSS3 selectors● :root● :empty● :target● :enabled● :disabled● :checked● :not(selector)● ::selection 18 Basic / CSS3
    • Border radius div { border:5px solid #ccc; border-radius:10px; } http://jsfiddle.net/MicheleBertoli/Akt8x 19 Basic / CSS3
    • Box shadow div { box-shadow:10px 10px 5px #ccc; } http://jsfiddle.net/MicheleBertoli/2BLt5 20 Basic / CSS3
    • Text shadow h1 { text-shadow:5px 5px #ccc; } http://jsfiddle.net/MicheleBertoli/nv8LL 21 Basic / CSS3
    • 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
    • Coffee Break
    • Web typography
    • IntroductionWeb typography refers to the use of fonts on the World WideWeb. 25 Basic / Web typography
    • Properties● font-family● font-style● font-variant● font-weight● font-size 26 Basic / Web typography
    • 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
    • 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
    • @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
    • Formats● WOFF (Web Open Font Format) .woff● TrueType .ttf● OpenType .ttf, .otf● Embedded OpenType .eot● SVG Font .svg, .svgz 30 Basic / Web typography
    • 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
    • Usage @font-face { font-family: myFirstFont; src:url("Sansation_Light.ttf"), url("Sansation_Light.eot"); } div { font-family: myFirstFont; } 32 Basic / Web typography
    • 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
    • Samples http://www.alistapart.com http://theharrietseries.com http://blakeallendesign.com http://aworkinglibrary.com http://informationarchitects.net 34 Basic / Web typography
    • Thank you