CSS3 Nytt
Bakgrund
CSS3 specifikationerna är fortfarande under utveckling av W3C.
CSS3 är fullständigt kompatibelt med tidigare CSS-versioner.
Nytt som de vanligaste webbläsarna hanterar
Vi kommer här ta upp de nya delar som fungerar i de vanligaste webbläsarna.
- Rundade hörn på rutor
- Skugga på rutor
- Text med "justify" och "overflow"
- Text med "word-wrap"
- "Opacity" eller "rgba"-färg
- Rotera eller skruva(skeva)
Rundade hörn på rutor
border-top-right-radius: 20px;
border-top-right-radius: 10px 30px;
/*horisontellt 4st värden, vertikalt 4st värden, start från övre vänstra hörnet och medsols*/
En ruta med
special-
inställningar
blir en cirkel.
height:100px;
border-radius:50px;
xxx
Skuggor på rutor
Första värdet är för horisontell skugga med positivt värde för visning till höger och negativt för visning till vänster.
Andra värdet visar samma sak fast vertikalt.
Om det finns ett tredje värde så definierar det skuggans toningslängd (enbart positiva värden).
om det finns ett fjärde värde så definierar det spridningslängden på skuggan. Positivt värde ökar skuggan i alla riktningar medan negativt värde minskar skuggan.
Direkt efter de 2-4 längd värdena så kan man ange färgen på skuggan.
Med inset som första egenskap så hamnar skuggan inuti objektet.
Vi kan ange flera skuggor skilda med kommatecken.
Som färg kan vi ange ett rgba-värde så får vi även med en viss transparens.
box-shadow: 5px 5px 5px black;
Med rundade hörn följer den glatt konturerna.
border-radius: 20px;
box-shadow:
inset 5px 5px 5px rgba(255,255,255, 0.7),
inset -5px -5px 5px rgba(0,0,0, 0.4),
5px 5px 5px rgba(0,0,0, 0.5);
3D effekt.
Text med "justify" och "overflow"
text-justify:inter-word;
overflow:auto;
En ruta med text som fyller upp. Med justify så breder texten ut sig mot både vänster och högersidan. Inter-word ser till att luften mellan ord utökas för att nå raka kanter. Med overflow lååååååååååååååååååååååååååååååter (låter) den långa ord döljas utanför rutan men lägger till en rullist (med auto).
Text med "word-wrap"
En ruta med text som fyller upp. Med word-wrap så lååååååååååååååååååååååååååååååter (låter) den långa ord brytas fast det inte finns något bindestreck. Det som inte får plats kommer på raden nedanför.
"Opacity" eller "rgba"-färg
opacity: 0.2;
opacity: 0.6;
Opacitet anges i intervallet 0-1, med 0 som helt osynligt(genomskinligt) och 1 som helt synligt(ogenomskinligt).
Observera att allt i div-rutan blir påverkat.
Alfa-värdet anges på samma sätt som opacitetsvärdet ovanför.
Observera att det heter rgba och inte rgb när du vill ha med transparensvärdet alfa.
Vanlig ruta.
Rotera eller skruva(skeva)
Ett praktiskt exempel
<style>
.ruta {
margin:auto;
width:200px;
border:1px black solid;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color:#cccccc;
}
h2 {
color:white;
margin:0px 20px;
text-align:center;
}
.rubrikDel {
border-top-left-radius: 19px;
border-top-right-radius: 19px;
background-color:black;
height: 30px;
}
</style>
...
...
<div class="ruta">
<div class="rubrikDel">
<h2>Kalle Anka</h2>
</div>
Har 3 brorssöner Fnatte, Knatte och Tjatte.
</div>
Kalle Anka
En morbror (faktiskt inte farbror, egentligen) som heter Joakim och några av hans vänner är Kajsa och Oppfinnar-Jocke.
Allt tillsammans
Nu när vi kan rundade hörn, skuggor och toningar så kan vi plocka samman allt och kombinerar dem så vi får olika skinande knappar som exempel. De skiner bäst i Chrome. Ingen händelse är kopplad till knapparna.
Kolumnhantering
Fungerar idag i alla webbläsare utan respektive prefix.
Fungerar den standardiserade css-koden i alla webbläsare?
Kompatibelt
Ja, idag är column-count fungerande i alla webbläsare men den, 8 jan 2014 var denna inställning ännu inte inbyggd i alla webbläsare. För att få det att fungera var vi då tvugna att skriva speciell css-kod riktad till varje webbläsare.
Prefix
Om den stardiserade egenskapen är,
column-count: 3; ,
så måste vi lägga till 3 rader extra med olika prefix. Vi använder då
"-webkit-",
(Safari, Chrome, Opera),
"-moz-",
(Mozilla Firefox),
"-ms-",
(Internet Explorer),
framför egenskapen.
OBS prefix före
Om vi använder prefix så måste de skrivas före det aktuella standardvärdet.
-webkit-column-count:3;
-ms-column-count:3;
-moz-column-count:3;
column-count:3;
<style>
.my2kolumner {
margin: 20px;
padding: 15px;
background-color:#fff;
border: 5px solid #000;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.4);
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-webkit-column-rule: 1px solid #000;
-ms-column-count: 3;
-ms-column-gap: 30px;
-ms-column-rule: 1px solid #000;
-moz-column-count: 2;
-moz-column-gap: 30px;
-moz-column-rule: 1px solid #000;
column-count: 2;
column-gap: 30px;
column-rule: 1px solid #000;
}
.my2kolumner h2 {
font-family: Verdana, sans-serif;
font-size: 22px;
color: #000000;
margin: 10px 0px;
padding: 0px 10px;
border-radius: 10px;
-webkit-column-span: all;
-ms-column-span: all;
-moz-column-span: all;
column-span: all;
}
.my2kolumner h3 {
font-family: Verdana, sans-serif;
font-size: 16px;
color: #333333;
margin: 10px;
padding: 0px 10px;
border-radius: 5px;
}
</style>
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
caniuse.com - för att kolla vad som fungerar i olika webbläsare
Filmer
HTML5 Tutorial - 6 - Introduction to pseudo-classes (thenewboston 6 min)
HTML5 Tutorial - 20 - Rounded Corners and Shadows! (thenewboston 7 min)
Kommentar: Du behöver inte använda "-webkit-". Det var innan alla webbläsare förstod detta. Nu förstår webbläsarna.
HTML5 Tutorial - 21 - Text Shadows, Gradients, and Alpha (thenewboston 8 min)
HTML5 Tutorial - 22 - Crazy Transformations (thenewboston 7 min)
HTML5 Tutorial - 23 - Animating with Transitions (thenewboston 5 min)
HTML5 Tutorial - 24 - Making Awesome Rollover Buttons (thenewboston 7 min)
Bra men lite av överkurs
HTML5 Tutorial - 5 - Attribute Selectors (thenewboston 9 min)
HTML5 Tutorial - 7 - negation pseudo-class (thenewboston 3 min)
HTML5 Tutorial - 8 - Sweet New CSS3 Selectors (thenewboston 5 min)