CSS3 – 2D Transform – Translate

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

Dan moeten we nog het verplaatsen behandelen en dit wil ik eigenlijk doen met een 'child' uit de artikelen.

Omdat de artikelen allemaal een transform-opdracht hebben gekregen.

Worden automatisch de kinderen van deze artikelen, dus dat zijn de kopjes, de tekst en de afbeeldingen.

Ook mee getransformeerd. Maar deze kun je natuurlijk ook weer direct benaderen.

Zo staat er in je css-stijlblad voor de afbeeldingen een img-selector.

En deze ga ik vervolgens een transform-opdracht geven. En wel de transform 'translate'.

Tussen haakjes plaats je dan vervolgens de waarden. Dat zijn twee waarden. eerst de horizontale verschuiving.

Deze wil ik naar links verplaatsen.

Dus dat wordt een negatief getal van bijvoorbeeld -pixels, dan een komma. Die moet er tussen staan.

En dan de verticale verplaatsing. Ik wil geen verticale verplaatsing, dus die hou ik in eerste instantie op pixels.

Dan kan ik dus de uitzondering maken voor de children.

Dus deze kan ik natuurlijk ook weer roteren, schalen en schuin trekken.

Omdat ik de afbeelding pixels naar links heb verplaatst.

Is de afstand ten opzichte van de daarnaast lopende tekst wel erg groot geworden.

Maar die zou je natuurlijk ook weer met een margin-right, een waarde mee kunnen geven van bijvoorbeeld - pixels.

Om juist er weer voor te zorgen dat die teksten wat dichterbij komen te staan.

Ik laat direct even een voorbeeld zien van een voorbereide instelling voor transform.

Je kunt hiermee ook best wel behoorlijke leuke D-achtige effecten bereiken.

Zoals in dit voorbeeld waarin het wel lijkt alsof de afbeeldingen ook boven de pagina zweven.

En de artikelen het idee geven alsof ze in de ruimte staan.

Veel experimenteren met de transform-eigenschappen levert leuke eindresultaten op.

Zo bevindt zich in de local root folder ook een css-bestand, die heet 'opmaak-skew'.

En die levert bijvoorbeeld dit eindresultaat op. En dat lijkt net een soortement van harmonica kaart.