#4 - css selectors, css3 and web typography
DESCRIPTION
- CSS selectors - CSS3 - Web typographyTRANSCRIPT
Tecniche di animazionedigitale 1
Michele BertoliFounder / Lead Software Engineer at Igloo
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