Alla HTML element kan man säga består av lådor "Box". I css använder man termen Box modell vilket man använder då man prata om designen och layout. Css boxmodellen är helt enkelt en låda som är ihopkopplad på varje HTML elemnt. Den består av Margin, Borders, Padding och Innehållet
CSS-marginalegenskaperna används för att skapa utrymme runt element, utanför några avgränsade gränser. Med CSS har du full kontroll över marginalerna. Det finns egenskaper för att ställa in marginalen för varje sida av ett element (topp, höger, botten och vänster).
Exempel:Såhär kan margin se ut på en text i <p>-elementet:
p {
margin-top: 6px;
margin-bottom: 7px;
margin-right: 11px;
margin-left: 7px;
}
CSS-border kan man anpassa kantlinjer genom att ange stil, bredd och färg på ett elements kantlinje.
Exempel:
#borderF {
border-style: groove;
border-width: 25px;
border-color: fuchsia;
}
#borderM {
border: 15px Outset maroon;
}
Padding används för att generera utrymme runtinnehållet hos ett elements innehåll och dess definerade kantlinjer. Med CSS har du full kontroll över padding. Det finns egenskaper för att ställa in padding på alla sidor av ett element (topp, höger, botten och vänster).
Exempel:
#padding{
padding: 20px 20px 20px 20px;
background-color: OldLace;
}
Outline är en linje som dras runt elementet, utanför kantlinjerna, för att få elementet att "sticka ut".
Exempel:
#outline{
border: 3px solid black;
padding: 10px 10px 10px 10px;
outline: MediumAquaMarine double;
outline-width: 15px;
}
Anger om ett element är synligt eller inte.
Synligt
#visible{
visibility: visible;
}
#unvisible{
visibility: hideen;
}
OM en bild är större än ett element då kan man använda clip egenskaper där man specificerar en rektangel som absolut gentemot elementet. Genom att ange fyra kordinationer kan elementet klippas ut.
#clipp{
position: absolute;
clip: rect(0px,100px,60px,0px);
}
Displayegenskapen anger det visningsbeteendet som ett element ska ha.
Cat ipsum dolor sit amet, scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner, is on scratch strangers and poo on owners food so scratch the box chirp at birds or you call this cat food. Be superior dead stare with ears cocked.
Cat ipsum dolor sit amet, scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner, is on scratch strangers and poo on owners food so scratch the box chirp at birds or you call this cat food. Be superior dead stare with ears cocked.
Cat ipsum dolor sit amet, scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner, is on scratch strangers and poo on owners food so scratch the box chirp at birds or you call this cat food. Be superior dead stare with ears cocked.
Med overflow anger man vad som ska hända med innhållet då det överflödar ett element.
Cat ipsum dolor sit amet, scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner, is on scratch strangers and poo on owners food so scratch the box chirp at birds or you call this cat food. Be superior dead stare with ears cocked. Cat ipsum dolor sit amet, scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner, is on scratch strangers and poo on owners food so scratch the box chirp at birds or you call this cat food. Be superior dead stare with ears cocked.
CSS-opacitetsegenskapen ställer opaciteten för hela elementet (både bakgrundsfärg och text blir ogenomskinliga / transparenta).
Egenskapens värde för opacitet måste vara ett tal mellan 0,0 (helt transparent) och 1,0 (helt ogenomskinligt).
OriginalBox med originalfärg i RGBA
Opacitet satt på 20%
#box1{
background-color: rgb(144, 238, 144);
text-align: center;
width: 300px;
height:100px;
}
#box1T{
background-color: rgb(144, 238, 144);
opacity:0.2;
text-align: center;
width: 300px;
height:100px;
}
Med border-radius följt av ett värde så kan vi göra rundade hörn. Ju högre värde vi har desto mer kan vi runda av hörnet.
Exempel:
#box2R1{
width: 250px;
height:100px;
background-color: LightGoldenRodYellow ;
text-align: center;
vertical-align: middle;
line-height: 100px;
border-radius: 15px 50px 30px 5px;
}
border-radius: 15px 50px 30px 5px:
border-radius: 15px 50px 30px:
border-radius: 15px 50px:
border-radius: 15px
med css kan man ha multipla bakgrundsbilder genom background-image. De olika bakgrunderna skiljer man åt genom ett komma tecken. Bilderna är därmed palcerade ovanpå varandra där den första bilden är den som är synligast först för tittaren.
#box3{
/*MultiBilder*/
height: 300px;
background-image: url(nqfzkzcwdr.png), url(havet.jpg);
background-size: 100px, 400px;
background-position: top left, left top;
background-repeat: no-repeat, no-repeat;
padding: 15px;
}
Man kan använda sig av box-shadow för att sätta en skugga på ett element.
Skuggad låda
Flera skuggor med olika färger
#box4{
/*Skugga*/
width: 150px;
height:150px;
text-align: center;
vertical-align: middle;
background-color: MediumVioletRed ;
line-height: 100px;
box-shadow: 20px 20px 10px MidnightBlue ;
}
#box4S{
/*Skugga flera*/
border: 1px solid;
padding: 10px;
width: 100px;
height:100px;
box-shadow: 5px 5px red, 10px 10px yellow, 15px 15px cyan, 20px 20px blue, 25px 25px magenta;
}
Man kan genom CSS visa en mjuk övergång mellan två eller flera spcifika färger. Det finns två typer av gradient.
linear-gradient, röd till grön
#box5linear{
width: 200px;
height:200px;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
background: linear-gradient(to bottom, gold, yellowgreen);
radial-gradient, röd till grön
#box5radial{
width: 200px;
height:100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
background: radial-gradient(lightcoral, maroon );
}