- CSS selectors - CSS3 - Web typography

1. Tecniche di animazione
digitale 1

2. Tecniche di animazione
digitale 1
Michele Bertoli
Founder / Lead Software Engineer at Igloo
igloolab.com
michele.bertoli@accademiasantagiulia.it

3. Basic 4
December 12, 2012

4. Agenda
CSS selectors 5
10
CSS3
40
Web 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. Introduction
Cascading Style Sheets is a style sheet language used for
describing the presentation semantics (the look and
formatting) of a document written in a markup language.
13 Basic / CSS3

14. CSS3 modules
CSS3 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 properties
everywhere. It works behind the scenes, adding the current
browser’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. Introduction
Web typography refers to the use of fonts on the World Wide
Web.
25 Basic / Web typography

26. Properties
● font-family
● font-style
● font-variant
● font-weight
● font-size
26 Basic / Web typography

27. Line height
On inline elements, the line-height CSS property specifies the
height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal
height of line boxes within the element.
line-height:20px;
http://jsfiddle.net/MicheleBertoli/b3bRb
27 Basic / Web typography

28. Web-safe fonts
Web-safe fonts are fonts likely to be present on a wide range
of computer systems, and used by Web content authors to
increase the likelihood that content will be displayed in their
chosen font.
28 Basic / Web typography

29. @font-face
@font-face is a css rule which allows you to download a
particular font from your server to render a webpage if the
user hasn't 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 support
Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome 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 fonts
Google web fonts makes it quick and easy for everyone to use
web 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