F11 – CSS3

Dagens agenda

• Vad är CSS3, är det redo att användas?

• Webbläsarprefix

• Selektorer

• Färger

• Bakgrunder och ramar

• Fonter och texter

• Flerkolumnslayouter

• Transformationer

• Transitioner

• Media Queries

Vad är CSS3?

http://www.w3.org/Style/CSS/current-work

• Selektorer

• Multi-column layout

• Media Queries

• Color

• Text

• Fonts

• Grid Layout

• …

Kan jag använda idag?

N J Knappt stöd i IE6 eller 7, men det finns JS-bibliotek som kan hjälpa till.

http://css3pie.com, http://modernizr.com

http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

Webbläsarspecifika prefix

#someid {

-webkit-transition: opacity 13s;

-moz-transition: opacity 13s;

-o-transition: opacity 13s;

-ms-transition: opacity 13s;

transition: opacity 13s;

}

http://caniuse.com/

Selektorer

Nya selektorer • Univeral selector (*)

• Type selector (h1, p, div)

• ID selector, Class selector

• Combinators (>, +, ~, ,)

• Link pseudo-classes (:link)

• User action pseudo-classes (:hover, :focus, :active)

• :before, :after pseudo-element

• Target pseudo-class

• Negation pseudo-class

• UI-element states pseudo-class

• Attribute selector

• Structural pseudo-classes

Selektorer

#section1:target { … }

<div id="section1">

Lorem ipsum

</div>

Pseudoklassen :target

.left:not(video) { … }

<div>

<p class="left">…</p>

<video class="left">…</video>

<img class="left" />

</div>

Pseudoklassen :not(x)

Selektorer

:checked { … }

:disabled { … }

:enabled { … }

UI-element states pseudo-class:

:checked:after {

content: "checked";

}

<form action="">

<input type="checkbox" name="g[]" value="2" /><br />

<input type="checkbox" name="g[]" value="2" />

</form>

Selektorer

a[href^="http://"] {

…

}

<div>

<a href="http://sunet.se">Sunet</a>

<a href="page2.html">Sidan 2</a>

</div>

Attributselektorer:

E[foo] element E med ett attribut foo

E[foo="bar"] element E med ett attribut foo och värdet exakt "bar"

E[foo~="bar"] element E med ett attribut foo som innehåller en listning av

värden separerade med blanksteg där ett är "bar"

E[foo^="bar"] element E med ett attribut foo vars värde börjar med "bar"

E[foo$="bar"] element E med ett attribut foo vars värde slutar med "bar"

E[foo*="bar"] element E med ett attribut foo som innehåller "bar"

Selektorer Structural pseudo-classes

E:nth-child(An+B) Elements E:s vart A:te barn med offset B

:nth-last-child(n), :nth-of-type(n), nth-last-of-type(n), :root, :last-child, :first-child, :first-

of-type, last-of-type, :only-child, :only-of-type, :empty

Se även:

Produkt Pris Artikelnummer

Sony PS032 1295 KS2343

Vajo LG96 599 LK3255

Dell HS232 20199 SL4322

LNU 431 3421 LN3242

PAN 431 54322 KL3211

tbody tr:nth-child(odd) {

background: #B7DAF0;

}

li:nth-child(3n+4) {…}

Välj var tredje li-element. Börja

på nummer 4.

Färger

Färger

rgb

rgba rgb + alpha

hsl Hue Saturation Lightness

hsla hsl + alpha

Alpha-värden background-color: rgba(255, 155, 111, 0.5);

Opacity opacity: 0.4;

Gradienter

Linjär gradient

It's a mess!

Radial gradient

Bakgrunder och ramar

Border-radius #box2 {

width: 100px;

height: 100px;

background: #7D1616;

border-radius: 50px;

}

#box1 {

width: 200px;

height: 100px;

background: #97B48F;

border-radius: 15px;

}

Border-radius

Border-images

Box shadow #box1 {

width: 200px;

height: 100px;

background: #97B48F;

-moz-box-shadow: #333 3px 3px 4px;

-webkit-box-shadow: #333 3px 3px 4px;

box-shadow: #333 3px 3px 4px;

}

http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-box-shadow

Backgrounds

background-size: width height;

background-repeat: round | space;

background-origin: padding-box | border-box | content-box;

%, contain, cover

Multiple backgrounds #box1 {

background-image: url(fish.png), url(picture.jpg);

background-repeat: no-repeat, repeat;

background-position: 440px 180px, 0 0;

}

Fonter och text

@font-face @font-face {

font-family: Delicious;

src: url('Delicious-Roman.otf');

}

…

p { font-family: Delicious, sans-serif}

Format

EOT – Embedded Open Type

TTF – TrueType Fonts

OTF – OpenType Fonts

WOFF – Web Open Font Family (IE9+)

Internet Explorer Gecko Webkit Presto

4.0 1.9.1 525 2.2

Google web fonts api

Text-effekter

Text-shadow h1 { text-shadow: #6374AB 20px -12px 2px;}

Glowing

Flerkolumnslayout

Multiple Columns Lorem ipsum dolor sit amet,

consectetur adipiscing elit.

Sed faucibus, diam ac

venenatis egestas, lacus

tortor posuere dolor,

placerat interdum quam ante

ac neque. Donec faucibus

ligula in erat laoreet tristique

blandit est dictum. Nulla

rhoncus fringilla arcu, in

sollicitudin nunc congue

non. Maecenas sed erat eget

sapien pellentesque

fermentum. In porta, neque

sed feugiat pharetra, sem

dolor faucibus neque, ac

porttitor nibh quam nec

velit. Pellentesque

fermentum sagittis libero,

quis sodales lacus convallis

sit amet. Duis ultrices leo ut

mi ullamcorper id scelerisque

purus gravida. Cras arcu

urna, bibendum sit amet

rhoncus nec, accumsan eget

leo. Vivamus interdum,

lectus vitae imperdiet aliquet,

sem sapien elementum sem,

sit amet eleifend augue urna

quis nisl. Fusce quam sapien,

ornare non vehicula sit amet,

vehicula in turpis. Nunc non

porttitor eros. Donec

consectetur enim id lectus

fermentum iaculis. Vivamus

pulvinar malesuada turpis,

sed cursus ante convallis

eget. Aenean pretium nisi

sed ante congue lobortis.

Duis sagittis, tellus at

euismod molestie, elit purus

placerat urna, ac mattis tellus

nunc nec arcu. Quisque

magna sapien, aliquam ac

gravida quis, placerat et nisi.

Maecenas mollis pulvinar

ipsum, egestas pellentesque

nisi blandit a. Praesent

elementum semper dolor.

Aliquam rhoncus viverra

facilisis. Integer at sem sed

nisi aliquet molestie a non

nulla. Cras ultricies magna at

nisl tristique eget lobortis

sapien fringilla. Nunc nisl

felis, interdum ac volutpat

vitae, semper ac enim.

Donec ante massa, fringilla

sit amet

#content {

-moz-column-count: 3;

-webkit-column-count: 3;

column-count: 3;

-moz-column-gap: 20px;

-webkit-column-gap: 20px;

column-gap: 20px;

text-align: justify;

}

Layout i CSS3

Grid Layout

Flexible Box Layout

Transformationer/Transitioner

Transformations

translate rotate scale skew

box1 { transform: translate(100px, 100px);}

box2 { transform: rotate(45deg);}

box3 { transform: scale(.75);}

box4 { transform: skew(15deg);}

box5 { transform: rotate(10deg), scale(1.5);}

matrix

Transformations

box1 { transform-origin: 50% 50%;}

box2 { transform-origin: left top;}

box3 { transform-origin: center center;}

box4 { transform-origin: center bottom;}

Transitions En transition animerar de egenskaper på ett element som

ändrar sig.

box1, box2, box3 {

transition-property: all;

transition-duration: 2s;

transition-timing-function: ease; // linear, ease-in, ease-out, ease-in-out

transition-delay: 0.3s;

}

box1, box2, box3 {

transition: transform 2s ease-in 0.3s;

}

Media queries

Media Queries

@media print and (color) {

/* CSS specifikt för färgutskrift här */

}

<link rel="stylesheet" media="print and (color)" href="http://…" />

Grupper med "," (eller):

@media screen and (min-width:481px), screen and (orientation:landscape) {

/* > 481px eller liggande */

}

Media Queries Media feature max/min Värde

width Ja längd Bredd på aktuell visningsyta

height Ja längd Höjd på aktuell visningsyta

device-width Ja längd Enhetens totala visningsyta

device-height Ja längd Enhetens totala visningsyta

orientation Nej portrait|landscape Stående eller liggande

aspect-ratio Ja ratio Ex: 16/9

device-aspect-ratio Ja ratio Ex: 16/9

color Ja heltal

color-index Ja heltal

monochrome Ja heltal

resolution Ja upplösning Ex: 300dpi

scan Nej progressive|interlaced

grid Nej heltal

http://www.w3.org/TR/css3-mediaqueries/

Demos

http://www.paulrhayes.com/experiments/cube-3d/

http://beta.theexpressiveweb.com

"if all you have is a hammer, everything looks like a nail" - Abraham Maslow, The Psychology of Science, 1966