HTML & CSS

 OPGAVE TIL HTML & CSS – MIDDEL – FLIP KORT

Opgave 4

Opgave 4 – Del 1

Først skal vi lave en tabel

Start med at skrive:
 <table class=”table”>
    < tr > 
       < td class=”td”>
         < div > < / div >
       < / td >
    </ tr > 
</ table> 

Giv div boksen en class der hedder “flip-box” og gå derefter ned i CSS’en og lav  tilsvarende CSS styles der hedder .table og .td og .flip-box

Opgave 4 – Del 2

Nu skal der laves CSS styles

.table {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    margin-left: 40px;
    float: left;
}

.td {
    float: left;
    padding-bottom: 10px;
}

.flip-box {
    background-color: transparent;
    width: 100px;
    height: 100px;
    margin: 10px;
    border-radius: 50%;
    perspective: 1000px;
    border: transparent;
}

Tabellen er sat op til at være flexibel ved at tilføje % del i stedet for px. Der er også tilføjet en overflow så der ikke er scroll på.

td er sat til at være venstre stillet med en luft til bunden, dette for at kunne vise skyggen, der kodes senere.

flip-box er sat til at være gennemsigtig, rund og rammen gennemsigtig så der ikke er nogen streger der indikerer rummet i tabellen. Den har sat perspective til 1000px, dette er for at der ikke skaleres obskurt når vi senere koder at den vender.

Opgave 4 – Del 3

Nu skal vi tilbage i html’en og tilføje en child/barn.
< div class=”flip-box”>
   < div class=”flip-box-inner”>< /div>
< /div> 
En child/barn betyder at man sætte en div inde i 
en anden div. Som et barn i en mors mave. Derfor har
man også kaldt den store div der holder child/barnet
for parent/forælder. Her er det "flip-box", der er 
moren og "flip-box-inner", der er barnet

Opgave 4 – Del 4

Nu skal vi kode CSS’en med .flip-box-inner.
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
} 
Her er positionen relativ og ikke nødvendig at sætte
absolute.
Vi skal dog benytte transition, da vi har behov for at
transformere senere og det skal ske på under 1 sekund.
Transformationen(stilen) skal stadig beholde 3D effekt.

Opgave 4 – Del 5

Nu skal så tilføje endnu en child, denne gang til vores nyoprettede child. Altså en div inde i det div barn vi lige har lavet.
< div class=”flip-box”>
   < div class=”flip-box-inner”>
     < div class=”flip-box-front”>< /div>
   < /div>
< /div>
OBS: Der er en fordel at skrive hele div boksen først
derefter sætte musen i mellem start og slut div og så
trykke enter. Dette vil lade dig beholde orden i din
kode, så den er mere overskuelig og lettere at læse.

Opgave 4 – Del 6

Nu skal vi så lave CSS’en der reagere at når man holder musen over boxen, så er der flip-box-inner der drejer lavt rundt.
Den skal se således her ud:

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

Hvad er en transform:

Transform er en måde at vende, dreje, scalere og meget
andet med objekter i html, via CSS'en. Med andre ord
så kan man transformere/ændre på objektet med dette.  

rotateY, går ind og drejer ved Y aksen på selve elementet
sådan at hvis man tegner en lodret streg ned igennem i
midten så vil det være Y aksen.

Det samme kan gøres ved at skrive rotateX, så drejer den så bare på den anden led. I stedet fra venstre til højre så vil det være fra bund til top.

Opgave 4 – Del 7

Nu skal vi kode CSS’en for fronten også.
Den skal se således her ud:

.flip-box-front {
  background-color: purple;
}

Opgave 4 – Del 8

Nu skal vi så sætte den sidste del ind i html’en.
Den skal se således her ud:

<div class=”flip-box”>
  <div class=”flip-box-inner”>
    <div class=”flip-box-front”>
      <div class=”billede”>Billede</div>
    </div>
    <div class=”flip-box-back”>
      <h2 class=”h2″>No. 1</h2>
    </div>
  </div>
</div>

Hvad vi er ved at indskrive:

Nu har vi tilføjet det der skal stå på forsiden (lav
gerne et tag med et rigtigt billede i stedet) og det
som skal være vores bagside "flip-box-back" og hvad
der skal være/vises på bagsiden. Nu skal det så kodes
i CSS'en hvordan det ser ud og sættet op.

Opgave 4 – Del 9

Nu skal vi kode CSS’en for .billede , som gør at vi kan sætte noget ind efterfølgende .
Den skal se således her ud:

.billede{
  color: white;
  text-align: center;
  margin-top: 30px;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border-radius: 50%;
}

OBS: Hvis man ønsker at skrive mere og derved skal have
en større boks, husk da at ændre width og height på alle
CSS styles.

Opgave 4 – Del 10

Nu skal vi kode CSS’en for bagsiden.
Den skal se således her ud:

.flip-box-back {
    background-color: #555;
    color: white;
    transform: rotateY(180deg);
}

Vi giver baggrunden en farve og teksten farve. Herefter
giver vi også baggrunden en mulighed for at dreje 180
grader(halvejs rundt) ved at benytte rotateY.

Opgave 4 – Del 11

Sidst men ikke mindst skal vi have kodet fælles for front og back.
Den skal se således her ud:

.flip-box-front, .flip-box-back {
   position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 2px 15px 10px rgba(0, 0, 0, 0.5);
}

Her er positionen dog absolute, da siderne skal kunne
være oven på hinanden. De er begge runde og deres 
bagsider er gemte/hidden. -webkit- tilføjelsen er for
at dette er sådan i flere browsere.
Her kommer skyggen til siderne også på, ved at bruge
rgba så kan a=density/synlighed justeres til ikke at
være helt sort.

Opgave 4 – Del 12

Ekstra opgaver:
1. Prøv at tiløje et billede til forsiden/front.
2. Prøv at justere alle width og height til en større strørelse.
3. Lav afrundede hjørner i stedet for en cirkel.
4. Lav 6 objekter – kopier koden 5 gange og juster.
5. Lav en .h2 class i CSS’en
   
     

Her under vises/eksekveres koden

   
 

Prøv at holde musen hen over felterne

Billede

No. 1
Billede

No. 2
Billede

No. 3
Billede

No. 4
Billede

No. 5
Billede

No. 6