IN DEZE HANDLEIDING:
Wat is de Gulden Snede?
De Gulden Snede is een natuurlijke verhouding in de kunst en wiskunde. Als je de verhouding uittekent in een rechthoek (zoals hierboven in het plaatje) dan is de verhouding tussen AB en BC hetzelfde als de verhouding tussen BC en AC. In getallen is dit gelijk aan (1+√5)/2 en is dus ongeveer 1.61803. De snede is dus 1:1.61803.
Het leuke is dat de verhoudingen tussen het onderstaande hetzelfde zijn:
- 1 : 1.61803
- 1 : 0.61803
Gulden snede in de kunst
In de Renaissance zochten kunstenaars naar harmonieuze composities, die organisatie en evenwicht uitstraalden. Veel Renaissance kunstenaars waren bovendien wetenschappers, omdat ze er naar streefden om een ‘homo universalis’ te zijn. Dus iemand dus die talenten op vele vakgebieden heeft. Kunstenaars vonden voor hun werk inspiratie in de wiskunde, anatomie en architectuur.
Als homo universalis probeer ik op de meeste WordPress websites en ontwerpen de Gulden Snede toe te passen. 🙂
Gulden snede en pixels voor website
toegepast op het web
Door A. Wentzel (februari 2013)
1
2
3
5
8
13
20
32
52
85
135
220 (4x 220 + 20 pixels margin = 940 exact
360
580
940
1520
2460
x
x
2.91
4.71
7.63
12.35
19.99
32.36
52.36
84.73
137.11
221.86
359.00
580.92
940
1520.92
2460.84
Typografie, wegontwerp, design en de Gulden Snede
Een fijne tool om mooie en goed te typograferen met behulp van de Gulden Snede is de Golden Ratio Calculator. Wel voor gevorderde webdesigners.
Gulden snede en typografie met grtcalculator.com
Gulden Snede toepassen in webdesign
Voor gevorderden: Gulden snede met CSS op CodePen
Kader maken in verhouding gulden snede in webdesign
Je kan een kader maken in verhouding gulden snede.
Gulden snede in CSS en in html
Plaats dit in je CSS. Het is wel handig om iets meer te weten over de Root en variabelen. Lees eventueel de onderstaande handleidingen over properties, variabelen en root:
CSS Custom Properties variabelen root
Responsive Breakpoints pixels mobiel Tablet desktop
Breekpunten bepalen en aanpassen WordPress thema In deze handleiding behandel ik de responsive breekpunten of…
Pro Responsive typografie lettergrootte CSS vw vh vmin
Grootte lettertypes fonts website mobiel tablet desktop
:root {
--ratio: 1 / 1.618;
--width: 98vmin;
--height: calc(var(--width) * var(--ratio));
}
* {
box-sizing: border-box;
}
/* Kader Layout */
.kader-guldensnede {
background: #f2f2f2;
border: 1px solid;
font-size: 3.5vmin;
margin: 1vmin auto;
padding: 3vmin;
width: var(--width);
height: var(--height);
text-align: center;
}
Plaats dit op de WordPress pagina of bericht in een blok:
<section class="kader-guldensnede">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skull-and-crossbones.svg" alt="" />
<p class="bigred"> ✖ ✖ ✖ </p>
</section>
<section class="kader-guldensnede">
<h3>Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque.</p>
<p class="bigred"> ✖ ✖ ✖ </p>
</section>
<section class="kader-guldensnede">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque.</p>
</section>
Afbeeldingen in verhouding maken met Gulden Snede
Voor catalogi en portfoliowebsites ben ik vaak tegen het probleem aangelopen dat staande afbeeldingen veel te groot worden als je ze even breed maakt als liggende (oblong) afbeeldingen. Je ziet op een liggend desktop scherm nooit de hele afbeelding in 1 keer. De onderkant verdwijnt onder de vouw van je beeldscherm.
Daarom heb ik deze truc uitgevonden. Maak de staande afbeeldingen 0.618 keer zo breed als de liggende afbeeldingen.
- Afbeelding 1200px breed
- Afbeelding 742px staand (1200px X 0,618)
Dit werkt in de praktijk heel goed. In het voorbeeld hieronder dat ik heb gemaakt zie je dat de staande en liggende afbeeldingen optisch mooi in balans zijn: