F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens...
Transcript of F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens...
![Page 1: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/1.jpg)
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
![Page 2: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/2.jpg)
Vad är CSS3?
http://www.w3.org/Style/CSS/current-work
• Selektorer
• Multi-column layout
• Media Queries
• Color
• Text
• Fonts
• Grid Layout
• …
![Page 3: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/3.jpg)
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
![Page 4: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/4.jpg)
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/
![Page 5: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/5.jpg)
Selektorer
![Page 6: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/6.jpg)
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
![Page 7: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/7.jpg)
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)
![Page 8: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/8.jpg)
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>
![Page 9: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/9.jpg)
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"
![Page 10: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/10.jpg)
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.
![Page 11: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/11.jpg)
Färger
![Page 12: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/12.jpg)
Färger
rgb
rgba rgb + alpha
hsl Hue Saturation Lightness
hsla hsl + alpha
![Page 13: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/13.jpg)
Alpha-värden background-color: rgba(255, 155, 111, 0.5);
![Page 14: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/14.jpg)
Opacity opacity: 0.4;
![Page 15: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/15.jpg)
Gradienter
Linjär gradient
It's a mess!
Radial gradient
![Page 16: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/16.jpg)
Bakgrunder och ramar
![Page 17: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/17.jpg)
Border-radius #box2 {
width: 100px;
height: 100px;
background: #7D1616;
border-radius: 50px;
}
#box1 {
width: 200px;
height: 100px;
background: #97B48F;
border-radius: 15px;
}
![Page 18: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/18.jpg)
Border-radius
![Page 19: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/19.jpg)
Border-images
![Page 20: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/20.jpg)
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
![Page 21: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/21.jpg)
Backgrounds
background-size: width height;
background-repeat: round | space;
background-origin: padding-box | border-box | content-box;
%, contain, cover
![Page 22: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/22.jpg)
Multiple backgrounds #box1 {
background-image: url(fish.png), url(picture.jpg);
background-repeat: no-repeat, repeat;
background-position: 440px 180px, 0 0;
}
![Page 23: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/23.jpg)
Fonter och text
![Page 24: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/24.jpg)
@font-face @font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
…
p { font-family: Delicious, sans-serif}
![Page 25: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/25.jpg)
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
![Page 26: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/26.jpg)
Google web fonts api
![Page 27: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/27.jpg)
Text-effekter
Text-shadow h1 { text-shadow: #6374AB 20px -12px 2px;}
Glowing
![Page 28: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/28.jpg)
Flerkolumnslayout
![Page 29: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/29.jpg)
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;
}
![Page 30: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/30.jpg)
Layout i CSS3
Grid Layout
Flexible Box Layout
![Page 31: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/31.jpg)
Transformationer/Transitioner
![Page 32: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/32.jpg)
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
![Page 33: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/33.jpg)
Transformations
box1 { transform-origin: 50% 50%;}
box2 { transform-origin: left top;}
box3 { transform-origin: center center;}
box4 { transform-origin: center bottom;}
![Page 34: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/34.jpg)
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;
}
![Page 35: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/35.jpg)
Media queries
![Page 36: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/36.jpg)
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 */
}
![Page 37: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/37.jpg)
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/
![Page 38: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/38.jpg)
Demos
http://www.paulrhayes.com/experiments/cube-3d/
http://beta.theexpressiveweb.com
![Page 39: F11 CSS3 - orion.lnu.seorion.lnu.se/pub/education/course/1IK415/ht12... · F11 – CSS3 Dagens agenda • Vad är CSS3, är det redo att användas? • Webbläsarprefix • Selektorer](https://reader034.fdocuments.net/reader034/viewer/2022050600/5fa7ea9751d789438f485a94/html5/thumbnails/39.jpg)
"if all you have is a hammer, everything looks like a nail" - Abraham Maslow, The Psychology of Science, 1966