Hoe zet je een schuine balk met rechte tekst op je website

Hoe zet je een schuine balk met rechte tekst op je websiteOnlangs werd ik door een collega-designer benaderd met de vraag of ik wist hoe je een schuinlopende balk op het scherm kon plaatsen met CSS. Hij had een cliënt bij wie de branding dit voorschreef.

De nieuwe site van deze cliënt had een paginabrede balk met grijze achtergrond en daarin drie kolommen met acht regels tekst en een header.  Deze grijze balk liep horizontaal, en daar zat het probleem. De cliënt wilde hier een schuine balk, in een bepaalde hoek, en daar de tekst in.

Ik wist dat dit mogelijk was, en dat ik zoiets eerder ergens in een artikel had gezien. Met de belofte dat ik bij hem terug zou komen, ben ik in het probleem gedoken.

Dat artikel heb ik nooit meer teruggevonden, maar de oplossing heb ik wel kunnen vinden.

Ik neem je stap voor stap mee door het proces om deze balk te maken, en laat je de CSS en HTML elementen zien die je nodig hebt om tot het volgende eindresultaat te komen.

 

Stap 1: Plaats een horizontale grijze balk op de pagina

Als eerste maak ik de grijze balk met behulp van een div element, met:

  • een grijze achtergrond: background-color: #ddd;
  • een hoogte van 50 px, zodat je het roteereffect beter ziet: height: 50px;
  • een marge van 30px aan de bovenkant en de onderkant, zodat de balk niet te dicht op de omringende tekst komt te staan: margin: 30px 0;

Ik zet de CSS code voor de balk direct – inline – in de HTML code om de properties en values uit te proberen. Dit werkt eenvoudiger dan dat ik voor elke wijziging mijn stylesheet moet aanpassen.

Daarnaast is het in CSS stylesheets voor veel designers een goede gewoonte om properties en values in alfabetische volgorde te zetten. Deze regel volg ik hier inline ook.

Werkt alles goed, dan zet ik de CSS code over naar mijn stylesheet (zie stap 3).

met dit resultaat:

 

Stap 2: Zet de horizontale balk schuin

De horizontale grijze balk moet schuin komen te staan. Hiervoor gebruik ik de transform property van CSS.

De transform property uitgelegd

De transform property laat je een element op je webpagina in 2D of 3D omvormen. Met verschillende waarden die je kunt meegeven aan de transform property kun je een element onder meer draaien, verplaatsen, schalen, en scheeftrekken.

Er zijn veel verschillende waarden (values) die je aan de transform property kunt meegeven. Voor het maken van de schuine balk uit het eindresultaat heb je er maar vier nodig:

  • rotate()
    De rotate waarde roteert het element het gewenste aantal graden in 2D. De rotatie gaat naar rechts toe, en je kunt van 1 tot 359 graden roteren:

    10°
    50°
    130°
    210°
    280°
    350°
     
  • scale(x,y)
    De scale waarde vergroot of verkleint het element in 2D, geschaald op basis van de oorspronkelijke grootte.  Je kunt een aparte waarde ingeven voor de hoogte (x) en breedte (y), of voor allebei tegelijk:

    100×50
    (1.1,1.1)
    (1,0.7)
    (0.7)
     
  • skew(x-hoek,y-hoek)
    De skew waarde trekt het element scheef over de x-as en y-as in 2D. Je kunt een aparte waarde ingeven voor de x-as en de y-as, of voor allebei tegelijk:

    (10deg)
    (10deg,20deg)
    (20deg,30deg)
    (30deg,40deg)
     
  • translate(x,y)
    De translate waarde duwt en trekt het element naar rechts (x) of naar rechts en naar beneden (y). Negatieve waarden verplaatsen het element in de andere richting:

    basis
    (10px)
    (10px,20px)
    (-10px,20px)
     

Zo gebruik ik de transform property om de balk schuin te zetten:

  • ik gebruik de waarde rotate. Met het uitproberen van allerlei waarden ben ik uitgekomen op een hoek van 2 graden, omhoog lopend van links naar rechts.

    Doordat de rotatie van het element links begint en rechts eindigt, kan ik  twee waarden gebruiken voor de rotate waarde: 358deg (wat de balk bijna helemaal ronddraait) of -2deg (wat de balk twee graden naar links draait).

    Of ik de balk in dit geval 358 graden of -2 graden draai, het effect blijft hetzelfde. Pas wanneer je wilt werken met animaties in CSS kan de rotatierichting belangrijk zijn:

  • zomaar wat tekst
  • Verder wil ik dat de schaal van de balk hetzelfde blijft bij het roteren, de balk moet niet vervormd raken. Hiervoor geef ik scale() de waarde 1.
  • Als laatste wil ik dat de balk niet verschuift bij het roteren, dus geef ik translate() de waarde 0px.

Zet alles bij elkaar, en je krijgt: 

De balk ziet er nu zo uit:

 

De twee uiteinden links en rechts van de balk zijn – uiteraard – meegedraaid, en staan nu 2 graden schuin. Bij een smalle balk zoals hierboven valt dit niet zo op. Wordt de balk breder, zoals bij het eindresultaat, zie je duidelijker dat beide kanten schuin lopen.

Kijk maar eens wanneer ik het aantal graden op 5 graden zet. Nu zie je dat de uiteinden inderdaad schuin lopen:

 

Om de hoeken recht te zetten moet ik de balk met de skew waarde een klein beetje scheeftrekken tot de hoeken loodrecht staan. De hoeken trek ik hier 2deg terug, hetzelfde aantal graden dat ik de balk heb geroteerd:

met dit resultaat:

 

De schuine balk is klaar, nu eerst de styling op een duidelijke manier opruimen.

Stap 3: Zet de styling van de schuine balk in je stylesheet

Sinds de ontwikkeling van CSS zet je de styling van HTML elementen niet meer inline maar in een apart CSS bestand: het stylesheet. In WordPress heet dit bestand style.css.

De styling die ik aan de div heb meegegeven zet ik in de stylesheet, en daar verwijs ik naar vanuit de HTML code. De hoogte van het div dat ik heb gebruikt in het voorbeeld laat ik nu weg, dat wordt automatisch geregeld wanneer ik er tekst in zet.

Omdat de CSS styling en de HTML vanaf dit moment ingewikkelder worden, werk ik nu verder in mijn stylesheet.

CSS

In de stylesheet maak ik een id selector (#) aan met de naam balk-schuin. Dit id geef ik alle styling mee voor de schuine balk:

Omdat er verschillen zijn in hoe de diverse browsers de transform property vertalen, geef ik specifieke code voor die browsers mee (de regels die met – beginnen) om ervoor te zorgen dat de balk er in alle browsers hetzelfde uitziet.

HTML

In HTML geef ik de div van de balk het id balk-schuin, dat verwijst naar de styling in het stylesheet, waardoor de div alle styling krijgt van het id:

Stap 4: Plaats tekstkolommen in de schuine balk

Het eindresultaat bevat tekst in drie kolommen.

Tekst in kolommen

Voor kolommen gebruik je de kolomstyling van je thema. Ik maak in dit voorbeeld gebruik van de kolomstyling van het Genesis framework van StudioPress.

Bevat jouw thema geen speciale code om kolommen op pagina’s te zetten, kopieer dan onderstaande regels naar je stylesheet. Deze regels laten je drie kolommen naast elkaar op je pagina zetten.

Maak je gebruik van mijn kolomstyling, dan ziet de HTML code voor deze drie kolommen er zo uit:

De laatste div met class clear zorgt ervoor dat de kolommen netjes worden afgesloten zonder dat andere elementen na de kolommen zich vreemd gaan gedragen.

In de div van de balk zet ik drie kolommen. In de kolommen zet ik een paar regels onzintekst, zodat je kunt zien hoe de kolommen eruit zien met tekst erin.

Wil je ook onzin tekst – genaamd filler tekst – in je kolommen zetten, dan kun je dit op onder meer deze site eenvoudig aanmaken.

Het resultaat van deze HTML regels met de bijbehorende styling is:

 

Zoals je ziet staat de tekst inderdaad in drie kolommen in de schuine balk, maar zijn de kolommen en dus de tekst meegedraaid met de div van de schuine balk.

Ik wil deze tekst echter horizontaal in de balk hebben terwijl de balk schuin blijft staan.

Stap 5: Zet de tekstkolommen recht in de schuine balk

Dé manier om de tekstkolommen recht te zetten is ze los te maken van de balk, en ze apart te stylen. Ik begin met de HTML:

HTML

Ik zet de kolommen in hun eigen div met id balk-tekstblok. Deze div gebruik ik om de kolommen terug naar horizontaal te draaien.

Binnen de div met id balk-tekstblok zet ik de kolommen in een aparte div. Deze div geef ik een class mee met de naam container. Ik doe dit om de tekst in de kolommen direct te kunnen stylen.

De HTML ziet er nu zo uit:

De HTML code is klaar, en bevat alles wat nodig is om de balk goed te laten zien. Nu de CSS om de styling door te voeren.

CSS

In de stylesheet had ik de grijze balk schuin gezet en de zijkanten weer recht gezet. De kolommen met tekst waren echter ook meegedraaid. Nu draai ik de kolommen terug zodat ze weer recht staan.

  • Ik draai de div met de naam balk-tekstblok – waarin de kolommen staan – tegengesteld aan de balk. Eigenlijk zet ik de waarden weer terug naar het beginpunt.

    Ik heb – met uitproberen in de browser – gevonden dat een padding van 17px aan de boven en onderzijde van de div, ervoor zorgt dat de tekstkolommen precies in het rechte stuk van de balk passen.

     

  • De tekstkolommen vallen binnen de div met de class container binnenin de div met id balk-tekstblok. Deze kan ik nu apart stylen.

    De tekstkleur (color) binnen de kolommen zet ik op donkergrijs (#333).

    Om de kolommen zet ik een brede lege rand, zodat de tekst niet tegen de zijkanten van de balk komt. Hiervoor zet ik padding op 20px.

  • De kleur van de h3 heading (de koptekst boven de gewone tekst) zet ik op iets lichter grijs dan de tekst (#666). Doordat ik geen grootte van de tekst specificeer, zijn alle teksten in de balk de standaardgrootte die ik op de site heb ingesteld.

  • Alle CSS code in het stylesheet op een rijtje:

Conclusie

Het uiteindelijke resultaat van deze stappen en al deze code is:

 

Is jouw website goed gemaakt – met responsive design – dan zullen de kolommen bij een kleiner scherm onder elkaar worden weergegeven. De schuine balk groeit en de kolommen blijven binnen de balk vallen.

Heb jij nog tips? Deel je ervaring in de reacties hieronder.

Bronnen

Reageer op dit artikel

Laat als eerste een reactie achter.

Abonneren op
avatar
wpDiscuz