Case: Avanceret CSS

CSS

Når enkelte elementer skal laves i WordPress, er der for det meste standardindstillinger, der allerede har en CSS kode tilhørende, så nogle gange skal der ses langt efter muligheden for at bruge egen kode.
Hvis Html er skelettet af en hjemmeside, så er CSS’en huden, der er udseendet på det hele sammen. CSS er simpelthen helt essentielt for at en hjemmeside kan se godt og indbydende ud. Med CSS er der ikke ret mange begrænsninger, og man kan få enkelte elementer til at gøre stort set alt. Det vigtigste at vide når det kommer til CSS er, at det ikke fungere uden tilsvarende html, Der skal nemlig være forskellige Classes og id’er, som det skal være muligt at kalde på i CSS’en.

Menumidpage:

  • Margin: Den første man ser her, er den hvide streg rundt om de sorte boxe.
  • Display inline-block: Giver mulighed for at sætte en specifik højde og bredde på et element, der kan samtidig stadigvæk være et element ved siden af.
  • Vertical align middle: Placere elementet vertikalt i midten for dens bestemte plads.
  • Web kit transform: Dette giver mulighed for at transformere elementet, på forskellige måder.
  • Perspective: Fortæller specifikt hvilket perspektiv man ser 3d elementet.
  • Translate: Fortæller hvilken akse elementet skal bevæge sig på. år det er sat til z betyder det at man snakker om en 3d transformation.
  • Box-shadow: giver en skygge på elementet, der er også indstillet opacitet på farven af skyggen.

Menumidpage:before

Dette element beskriver den cylinder, der kører hen over de sorte bokse på siden.

  • :before: Sætter noget ind inden objektet.
  • Alt under indtil transform, fortæller om størrelse og farve.
  • Transform SkewX: Dette giver mulighed for at ændre vinklen på et element på den angivet akse.
  • Transition: Giver mulighed for at kunne laver en blød overgang, når et element skal transformeres.

Menuidpage:hover:before

Dette beskriver hvordan :before elementet integrer når der hovers over det.

  • Cylinderen bevæger sig her 500px over elementet.

Menuidpage:hover, menuidpage:focus, Menupage:active:

Igen en hover effect, der får elementet til at give en minimerings effekt. Denne sammensat med CSS’en sat på elementet, giver et udtryk af at elementet bliver trykket ned.

  • Transfor scale: 0.97 fortæller at elementet bliver 97% af den normale størrelse.