Diseño de página de proporción dorada en CSS puro

Vista prévia

Descripción

Un CSS solo diseño de página de proporción dorada que hace uso de < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" target = "_ blank" rel = "noopener" > CSS Grid layout para dimensionar una serie de elementos en relación con su hermano anterior usando el < a href = "https://en.wikipedia.org/wiki/Golden_ratio" target = "_ blank" rel = "noopener" > Golden ratio .

See also:

• plugin de jQuery para el diseño de cuadrícula Web de ratio de oro – Staygolden

Funcionamiento

Cree una serie de elementos para el diseño de página.

<div class="container">

<div class="item a">A</div>

<div class="item b">B</div>

<div class="item c">C</div>

<div class="item d">D</div>

<div class="item e">E</div>

<div class="item f">F</div>

<div class="item g">G</div>
</div>

Las reglas CSS requeridas.

.container {

width: 70vw;

height: 43.2632880099vw;

border: 0.5px solid #4A4949;

display: grid;

grid-template-columns: 61.8% 9.02% 5.58% 23.6%;

grid-template-rows: 61.8% 9.02% 5.58% 23.6%;

grid-template-areas: "A B B B" "A E F C" "A E G C" "A D D C";
}

.item {

display: flex;

justify-content: center;

align-items: center;

height: 100%;

width: 100%;

color: #F2F2F2;

font-size: 1.5em;

font-weight: 700;

text-shadow: 1px 1px 1px #878787;

box-sizing: border-box;

border: 0.5px solid #4A4949;
}

.item.a {

grid-area: A;

background-color: #a0ddff;
}

.item.b {

grid-area: B;

background-color: #c1cefe;
}

.item.c {

grid-area: C;

background-color: #758ecd;
}

.item.d {

grid-area: D;

background-color: #7189ff;
}

.item.e {

grid-area: E;

font-size: 1.2em;

background-color: #624cab;
}

.item.f {

grid-area: F;

font-size: 1em;

background-color: #5d2e8c;
}

.item.g {

grid-area: G;

font-size: 0.7em;

background-color: #7a7a7a;
}