#4 - css selectors, css3 and web typography

Tecniche di animazionedigitale 1

Michele BertoliFounder / Lead Software Engineer at Igloo

igloolab.commichele.bertoli@accademiasantagiulia.it

Tecniche di animazionedigitale 1

Basic 4December 12, 2012

Agenda

CSS selectors

CSS3

Web typography

5

10

40

CSS selectors

CSS selectors

● #id● .class● element

6 Basic / CSS selectors

CSS selectors

● element element

● element > element: select elements with a specific parent.

● element + element: select elements that is placed immediately after (not inside) the first specified element.

7 Basic / CSS selectors

http://jsfiddle.net/MicheleBertoli/pvUnR

http://jsfiddle.net/MicheleBertoli/xRQwD

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.

8 Basic / CSS selectors

http://jsfiddle.net/MicheleBertoli/uBxsU

CSS selectors

● :link● :visited● :active● :hover● :focus

9 Basic / CSS selectors

● :first-letter● :first-line● :first-child● :before● :after

http://jsfiddle.net/MicheleBertoli/xu95F

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

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

CSS3 modules

CSS3 is split up into "modules".

Some of the most important CSS3 modules are:

14 Basic / CSS3

● Selectors● Box Model● Backgrounds and Borders● Text Effects● 2D/3D Transformations● Animations● Multiple Column Layout● User Interface

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.

15 Basic / CSS3

http://jsfiddle.net/MicheleBertoli/uBxsU/1

CSS3 selectors

● :first-of-type● :last-of-type● :only-of-type

16 Basic / CSS3

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-child

17 Basic / CSS3

http://jsfiddle.net/MicheleBertoli/uBxsU/3

CSS3 selectors

● :root● :empty● :target● :enabled● :disabled● :checked● :not(selector)● ::selection

18 Basic / CSS3

Border radius

19 Basic / CSS3

div

{

border:5px solid #ccc;

border-radius:10px;

}

http://jsfiddle.net/MicheleBertoli/Akt8x

Box shadow

20 Basic / CSS3

div

{

box-shadow:10px 10px 5px #ccc;

}

http://jsfiddle.net/MicheleBertoli/2BLt5

Text shadow

21 Basic / CSS3

h1

{

text-shadow:5px 5px #ccc;

}

http://jsfiddle.net/MicheleBertoli/nv8LL

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.

22 Basic / CSS3

http://leaverou.github.com/prefixfree

Coffee Break

Web typography

Introduction

Web typography refers to the use of fonts on the World Wide

Web.

25 Basic / Web typography

Properties

● font-family● font-style● font-variant● font-weight● font-size

26 Basic / Web typography

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.

27 Basic / Web typography

line-height:20px;

http://jsfiddle.net/MicheleBertoli/b3bRb

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

@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

Formats

● WOFF (Web Open Font Format) .woff● TrueType .ttf● OpenType .ttf, .otf● Embedded OpenType .eot● SVG Font .svg, .svgz

30 Basic / Web typography

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

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 fonts

Google web fonts makes it quick and easy for everyone to use

web fonts, including professional designers and developers.

33 Basic / Web typography

<link rel="stylesheet" type="text/css" href="http://fonts.

googleapis.com/css?family=Tangerine">

<style>

body

{

font-family:"Tangerine", serif;

}

</style>

Samples

34 Basic / Web typography

http://www.alistapart.com

http://theharrietseries.com

http://blakeallendesign.com

http://aworkinglibrary.com

http://informationarchitects.net

Thank you