OPGAVER TIL HTML & CSS – ADVANCED – EFTERÅR 1
Opgave 1
Opgave 1 – Del 1
- Lav en ny pen i Codepen.io
- Lav en div’boks og giv den class “floor”
- Lav nu endnu et søster til 1. div boks og giv den class “wall”
Således her
< div class=”floor”>< /div>
< div class=”wall”>< /div>
Opgave 1 – Del 2
Nu skal vi så lave klasserne i CSS’en til body, floor og wall.
body {
overflow: hidden;
}
.floor {
position: absolute;
margin-top: 450px;
margin-left: -10px;
height: 200px;
width: 105%;
background-image: radial-gradient(darkblue, black);
}
.wall {
width: 100%;
height: 600px;
margin-top: -10px;
margin-left: -10px;
padding: 10px;
background-image: radial-gradient(darkblue, black);
}
Body styrer sådan at der ikke er scroll på ved at tilføje overflow: hidden.
Opgave 1 – Del 3
HOLD SÅ FAST! For nu skal vi så have sat skyggerne og lysene ind i html’en. Det skal værre mellem div’en med floor og div’en med wall.
< div class=”shadowL”></div >
< div class=”shadowLightL”></div >
< div class=”lysL”>
< div class=”lysBottom”></div >
< div class=”lysMidt”></div >
< div class=”lysTop” >
< div class=”lightString” >
< div class=”lightShadow” >
< div class=”string”></div >
< div class=”flame”></div >
</div >
</div >
</div >
</div >
< div class=”shadowR”></div >
< div class=”shadowLightR”></div >
< div class=”lysR” >
< div class=”lysBottom”></div >
< div class=”lysMidt”></div >
< div class=”lysTop”>
< div class=”lightString”>
< div class=”lightShadow” >
< div class=”string”></div >
< div class=”flame”></div >
</div >
</div >
</div >
</div >
Læg mærke til at det er præcis samme klasser på vær den øverste div som hedder lysL eller lysR.
For at det er lettest så skriv et lys op først – KOPIER IKKE fra denne side, da du skal være opmærksom på at tegnene ” ikke er de samme i Codepen. Når du har skrevet 1 lys op så kopier din egen kode og ret hvor der står L til R i det du lige har kopieret.
Opgave 1 – Del 4
Det næste er nu at definere hvordan skyggerne ser ud inde i CSS’en.
Så lad os bygge det op en klasse af gangen.
Det ser således ud:
.shadowL {
position: absolute;
margin-left: 20%;
margin-top: 250px;
height: 350px;
width: 50px;
filter: blur(40px);
background-color: black;
}
.shadowLightL {
position: absolute;
margin-left: 8%;
margin-top: 50px;
height: 200px;
width: 200px;
border-radius: 50%;
filter: blur(60px);
opacity: 0.7;
background-color: #5949E6;
animation: flameLightL 0.6s linear infinite;
}
@keyframes flameLightL {
0%{height: 150px;width: 150px; margin-left: 8%;}
50%{height: 200px;width: 200px;}
80%{height: 150px;width: 150px; margin-left: 8%;}
}
Opgave 1 – Del 5
I denne del skal vi defineret hvor lyset lysL og lysR placeres i CSS’en.
.lysL {
position: absolute;
margin-left: 5%;
margin-top: 250px;
}
.lysR {
position: absolute;
margin-left: 80%;
margin-top: 250px;
}
Bemærk der benyttes % også her, for at lyset kan vises samme sted uanset
hvilken device man kigger på Opgave 1 – Del 6
I denne del skal vi defineret lyset klasserne der viser lyset i CSS’en.
.lysBottom {
position: absolute;
margin-left: ;
margin-top: 275px;
height: 50px;
width: 150px;
border-radius: 50%;
background-color: #E6DB81;
}
.lysMidt {
position: absolute;
margin-left: ;
margin-top: ;
height: 300px;
width: 150px;
background-color: #E6DB81;
}
.lysTop {
position: absolute;
margin-left: ;
margin-top: -25px;
height: 50px;
width: 150px;
border-radius: 50%;
background-image: radial-gradient(#E6DB81,#C4BA6E);
}
Bemærk radial-gradient også her, men med farve kode ikke numre Opgave 1 – Del 7
I denne del skal vi defineret lysets væge og og skyggen i CSS’en.
.lightString {
position: absolute;
height: 50px;
width: 150px;
background-color: transparent;
transform: rotate(-180deg);
border-radius: 50%;
box-shadow: 25px 10px 0px 0px #fff inset;
}
.lightShadow {
position: absolute;
height: 50px;
width: 150px;
background-color: transparent;
transform: rotate(-180deg);
border-radius: 50%;
box-shadow: 25px 10px 0px 0px #fff inset;
}
.string {
position: absolute;
margin-left: 75px;
height: 30px;
width: 5px;
background-color: black;
}
Bemærk der benyttes % også her, for at lyset kan vises samme sted uanset
hvilken device man kigger på Opgave 1 – Del 8
I denne del skal vi lave flammen. Derfor skal der også laves en @keyframe til.
.flame {
position: absolute;
margin-top: -50px;
margin-left: 63px;
height: 60px;
width: 30px;
border-radius: 50%;
background-color: yellow;
box-shadow: 0 0 5px orange,
0 0 25px orange,
0 0 50px orange,
0 0 200px orange;
animation-name: flame;
animation: flame 0.6s linear infinite;
}
@keyframes flame {
0%{margin-top: -50px; height: 60px;}
10%{margin-top: -60px; height: 70px;}
20%{margin-top: -50px; height: 60px;}
30%{margin-top: -60px; height: 70px;}
40%{margin-top: -50px; height: 60px;}
50%{margin-top: -70px; height: 80px;}
60%{margin-top: -50px; height: 60px;}
70%{margin-top: -60px; height: 70px;}
80%{margin-top: -40px; height: 50px;}
90%{margin-top: -50px; height: 60px;}
100%{margin-top: -50px; height: 60px;}
}
Dette gør at mor boksen vokser med halv størrelse(100%+50%) og mindskes igen(ned til 100% igen).