Złota proporcja, znana również jako boska proporcja lub liczba Fibonacciego, ma swoje korzenie w starożytności. Już w starożytnym Egipcie i Grecji była stosowana w architekturze, m.in. przy budowie piramid i Partenonu. W renesansie Leonardo da Vinci wykorzystał ją w swoich dziełach, takich jak „Mona Lisa” i „Człowiek witruwiański”, podkreślając jej znaczenie w sztuce i nauce. Współczesne badania nad matematyką i estetyką wykazały, że proporcja ta odgrywa kluczową rolę w tworzeniu harmonijnych kompozycji w różnych dziedzinach, od sztuki po projektowanie graficzne.
Jak działa złota proporcja w projektowaniu graficznym?
Złota proporcja pomaga w:
- Kompozycji układów graficznych,
- Równoważeniu elementów,
- Wybieraniu odpowiednich proporcji typografii,
- Projektowaniu logo i ikon,
- Tworzeniu layoutów stron internetowych.
Jak zastosować złotą proporcję w CSS?
Złotą proporcję można wykorzystać w projektowaniu stron internetowych, np. przy definiowaniu szerokości kontenerów, odstępów czy typografii.
1. Ustalanie szerokości kontenera
.container {
width: 100vw;
max-width: 960px; /* Standardowa szerokość */
}
.sidebar {
width: calc(960px / 1.618); /* Złota proporcja dla szerokości bocznej */
}
.content {
width: calc(960px - (960px / 1.618)); /* Główna zawartość zgodna z proporcją */
}2. Typografia zgodna ze złotą proporcją
body {
font-size: 16px;
}
h1 {
font-size: calc(16px * 1.618);
}
h2 {
font-size: calc(16px * 1.618 * 0.618);
}
p {
font-size: 16px;
}3. Odstępy i marginesy
.section {
padding: calc(16px * 1.618);
margin-bottom: calc(16px * 1.618);
}