f11 css3 - orion.lnu.seorion.lnu.se/pub/education/course/1ik415/ht12... · f11 – css3 dagens...
TRANSCRIPT
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