Background-size giver dig mulighed for at bestemme størrelsen på baggrundsbilledet.
div {
background-image: url('baggrund.jpg');
background-size: 80% 100%;
}
Background-origin giver dig mulighed for at angive placering af et mindre baggrundsbillede i border-boxen, padding-boxen eller content-boxen sammen med no-repeat.
div {
background-image: url('baggrund.jpg');
background-origin: content-box;
background-repeat: no-repeat;
}
Background-clip giver dig mulighed for at tilklippe baggrundsbilledet efter border-boxen, padding-boxen eller content-boxen. Se box-sizing
div {
background-image: url('baggrund.jpg');
background-clip: content-box;
}
Border-radius giver dig mulighed for at lave runder hjørner på et element. Alle ens.
div {
border-radius: 25px;
}
eller alle forskellige
div {
border-radius: 5px 10px 15px 25px/25px 15px 10px 5px;
}
Border-image giver dig mulighed for at indsætte et billede som border.
div {
border-image:url("border.jpg") 30 30 round;
}
Box-flex giver dig mulighed for at lave et element flexibelt alf efter indhold. Box-sizing giver dig mulighed for at angive hvilken måde et elements størrelse skal beregnes. Som content-box (som du er vandt til) eller border-box (border og padding lægges ikke til størrelsen).
div {
box-sizing:border-box;
}
Box-pack giver dig mulighed for at placere indhold i elementer horisontalt.
div {
display:box;
box-pack:center;
}
Box-align giver dig mulighed for at placere indhold i elementer vertikalt.
div {
display:box;
box-align:center;
}
Box-shadow giver dig mulighed for at tilføje en eller flere skygger til et element. Til højre og for neden. Negative værdier giver skygge til venstre og for oven. Tredie værdi er udfasning og til sidst farven.
div {
box-shadow: 10px 10px 5px #888888;
}
Farveværdier kan du sætte på elementer og font.
Hexadecimal: #RRGGBB (rød, grøn, blå) - værdier mellem 0 og FF
h1 {
color: #CC2233;
}
rgb(r,b,g): (rød, grøn, blå) - værdier mellem 0 og 255 eller mellem 0% og 100%
h1 {
color: rgb(50,60,70);
}
rgba: en udvidelse af rgb() med a for alpha (gennemsigtighed/opacity) a-værdi mellem 0.0 (transparent) og 1.0 (fuld farve)
h1 {
color: rgba(50,60,70,0.7);
}
HSL(): hue, saturation, and lightness (nuance, mætning og lysstyrke) - hue værdi mellem 0 og 360, saturation værdi og lightness værdi mellem 0% og 100%.
h1 {
color: hsl(150,50%,75%);
}
HSLA(): en udvidelse af hsl() med a for alpha (gennemsigtighed/opacity) a-værdi mellem 0.0 (transparent) og 1.0 (fuld farve)
h1 {
color: hsla(150,50%,75%,0.7);
}
Navn: angivelse af navn med bogstaver.
h1 {
color: red;
}
Opacity giver dig mulighed for at gøre farver og indhold i elementer gennemsigtige fra 0 til 1.
div {
background-color:red;
opacity:0.5;
}
Columns giver dig mulighed for at opdele indholdet i et element i kolonner, med angivelse af antal og bredde.
div {
columns: 3;
}
eller
div {
columns: 100px;
}
Dimension bruger du til at sætte bredder og højder på elementer.
div {
min-height:100px;
width:100px;
}
Font-facekan du bruge til at indsætte en ny font-family, der ikke findes som standard.
@font-face {
font-family: MyWebLicensedFont;
src: url(/fonts/my_web_licensed_font.eot);
src: local('My Web Font'),
url(/fonts/my_web_licensed_font.ttf) format("truetype");
}
Text-shadow Text-shadow giver dig mulighed for at tilføje en eller flere skygger på tekster. Det fungerer på samme måde som box-shadow, hvor skyggen vises til højre og nedad, negative værdier virker modsat. Tredie værdi er udfasning og til sidst farven.
div {
text-shadow: 10px 10px 5px #888888;
}
Transformation giver dig mulighed for at tilføje rotation, skalering (op og ned i størrelse), drejning og flytning af alle elementer.
Rotateroterer et element antal grader med uret. Værdier fra 0deg til 360deg. Negative grader roterer mod uret.
div {
transform: rotate(25deg);
}
Scale skalerer et element op i bredde (x) og højde(y). Negative værdier vender indholdet!.
div {
transform: scale(2,4);
}
Skrew drejer et element over en angivet akse (x eller y) et antal grader med uret. Negative værdier mod uret.
div {
transform: skew(25deg, 25deg);
}
Translate flytter et element vandret (x) og lodret (y) en angiven længde nedad og til højre. negative værdier flytter opad og til venstre.
div {
transform: translate(25px, 25px);
}
Transition giver dig mulighed for at angive hvordan et element skal bevæge sig imellem udgangspunktet og et nyt stade. F.eks. når :hover tilføjes til et element. Angiv hvad du vil ændre og hvor længe det skal tage.
div {
width:200px;
height:100px;
background:red;
transition:width 2s;
}
div:hover{
width:400px;
}
progress bruges til at vise fremskridt i en proces. Bruges som regel sammen med JavaScript. Herunder en statisk Progress Bar
<progress value="22" max="100"></progress>
(statisk Progress Bar)
meter
Tel bruges til elementer, beregnet til indtastning af et telefonnummer.
Mobil: <input type="tel" name="mobiltelefon" />
Search bruges til elementer til søgning på siden eller på net, elementet opfører sig som et text element.
Søg: <input type="search" name="search" />
Url bruges til elementer, beregnet til indtastning af en url-adresse, adressen bliver automatisk valideret.
Hjemmeside: <input type="url" name="bruger_url" />
Email bruges til elementer, beregnet på indtastning af e-mail, adressen bliver automatisk valideret.
E-mail: <input type="email" name="bruger_mail" />
Datetime bruges til elementer, beregnet til angivelse af tid i: tid, dato, måned, år.
Dato og tid: <input type="datetime" name="din_tid" />
Date bruges til elementer, beregnet til angivelse af dato i: dato, måned, år.
Dato: <input type="date" name="min_dato" />
Month bruges til elementer, beregnet til angivelse af måned i: måned, år.
Måned: <input type="month" name="min_mrd" />
Week bruges til elementer, beregnet til angivelse af ugenummer.
Uge: <input type="week" name="min_uge" />
Time bruges til elementer, beregnet til angivelse af tiden.
Tid: <input type="time" name="min_tid" />
Datetime bruges til elementer, beregnet til angivelse af dato og tid med tidszone.
Dato og tid: <input type="datetime" name="min_datotid" />
Datetime-local bruges til elementer, beregnet til angivelse af dato og tid uden tidszone.
Dato og tid: <input type="datetime" name="min_datotid" />
Number bruges til elementer, der er beregnet til tal. Du kan angive et mindstetal med min og højeste med max, desuden hop med step.
Nummer: <input type="number" min="2" max="50" step="2" />
Range bruges til input af et tal ved hjælp af en "slider", evt. med angivelse af højeste og laveste tal, samt "hop" og default value.
Nummer: <input type="range" name="point" min="2" max="10" step="2" value="8" />
Color bruges til input af farver.
Farve: <input type="color" name="farve />