OPGAVE TIL HTML & CSS – MIDDEL – GRADIENT
Opgave 1
Opgave 1 – Del 1
- Lav et nyt dokument
- Lav 2 div bokse i din body
- Tildel dem klassen left og right
- Lav nu 4 div bokse inde i hver af de to div bokse
- Således her
<div class=”left”>
<div></div><br>
<div></div><br>
<div></div><br>
<div></div>
</div><div class=”right”>
<div></div><br>
<div></div><br>
<div></div><br>
<div></div>
</div>
Opgave 1 – Del 2
Gå op i din CSS og lav .left og .right klasserne:
.right{
float:right;
color:black;
text-align:left;
}
.left{
float:left;
color:black;
text-align:left;
}
float:left; og float:right; Skriver vi for at liste den ene div række ved siden af den anden div række.
Opgave 1 – Del 3
Nu skal vi kode gradient overgange til alle 8 kasser.
linear-gradient:
repeating-linear-gradient:
radial-gradient:
Gå op i din CSS og tilføj dette efter :
#grad1left {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: red;
background-image: linear-gradient
(0deg, black, purple);
}
border-radius: er sat til 50px. Der er hjørnerne på boksen der er gjort runde
background-image: er sat med linear-gradient: 0 grader(0deg), fra sort til lilla. Man kan bruge positive og negative grader ex: 90deg eller -90deg(modsat retning)
Opgave 1 – Del 4
Nu skal vi så lave de 3 andre bokse som skal stå til venstre. Bemærk at man kan skrive farver på flere måder. Her er nogle eksempler:
#FFF
#FFFFFF
#000000
white
rgba(255,0,0,1) r=rød, g=grøn, b=blue og a=opasitet/gennemsigtighed
Gennemsigtighed går fra 0-1. Hvor 0 er ingen ting og 1 er fuld farve. Skal du ramme 50% så er det 0.5 der skal stå(det er vigtigt det er med punktum)
Opgave 1 – Del 5
Nu skal vi så lave de 4 andre bokse som skal stå til højre.
Opgave 1 – Del 6
Nu skal der sættes klasser ind i div’erne 😉
Det kunne se således ud:
Opgave 1 – Del 7
Gå op i din CSS og juster på farver, grader/retninger og transparens/opacity
Tilføj også gerne:
border: 2px solid black;
til dine klasser, hvis du vil.
Her under vises/eksekveres koden
Linear Gradients - Ved Forskellige Vinkler(grader/degree)
0 grader
90 grader
180 grader
-90 grader
Regnbue
90 grader Transperens
Gentaget Linært v. 45 grader
Cirkel