Arieccoci: io sopravvissuta all'influenza e tu reduce da un 30 (complimenti assai
:)
La struttura nella quale organizzeremo i contenuti della index sarà (stringatamente) la seguente:
Codice: Seleziona tutto
<section>
<h2>Titolo</h2>
<p>descrizione</p>
</section>
<figure>
<img>
</figure>
<section>
<h2>Titolo</h2>
<p>descrizione</p>
</section>
<figure>
<img>
</figure>
<section>
<h2>Titolo</h2>
<p>descrizione</p>
</section>
Se hai letto attentamente gli articoli/guide precedenti risulterannoti evidenti i motivi per i quali non utilizzeremo, al momento, il tag article (o l'annidamento section/article o section/section).
Prima ancora di addentrarci tra i quadrelloni interni (e conseguenti fix IE) tratteremo, nello specifico, gli stili dell'intestazione provvista degli elementi decorativi laterali (le linee mediane che l'affiancano, per intenderci) traverso l'utilizzo degli
pseudo elementi ::before ed ::after:
La classe .width-mini (applicata al paragrafo) consente di arginare l'ingombro testuale alla specifica larghezza esposta nella tua bozza (ché utilizzare gli a capo risulterebbe rovinoso nelle risoluzioni Phone).
Come vedi ho provveduto ad integrare l'icona di background all'interno della classe .ico (connaturante specifica numerazione per distinguersi dalle restanti intestazioni - ché ciascuna ne cinghierà di proprie) concatenandola a quella del suo "contenitore" .line (a sua volta correlato agli ::after/::before.
Visioniamoli nel dettaglio:
I margin (speculari negli pseudo elementi) sono fondamentali: se non li applicassimo le linee si posizionerebbero (da bravi absolute) al 50% (left/right) dell'elemento .line/h2: ovvero il loro lato "interno" si piazzerebbe esattamente nel mezzo dell'intestazione, apparentemente "fondendole":
(i valori dovranno essere rivisti non appena risolverai adottare una font differente dalla coeva)
CSS di base (da inserire
prima delle media queries):
Codice: Seleziona tutto
.back, .line {
padding: 125px 0 20px;
}
.line {
position: relative;
display: block;
}
.line::before, .line::after {
position: absolute;
top: 138px;
width: 230px;
border-top: 1px solid #59BCBC;
content: '';
}
.line::before {
right: 50%;
margin-right: 150px;
}
.line::after {
left: 50%;
margin-left: 150px;
}
.width-mini {
width: 540px;
padding: 0 0 40px;
margin: 0 auto;
}
.ico-01 {
background: url(../img/fondi/simbolo-01.svg) no-repeat center 35px;
}
.ico-02 {
background: url(../img/fondi/simbolo-02.svg) no-repeat center 35px;
}
.ico-03 {
background: url(../img/fondi/simbolo-02.svg) no-repeat center 35px;
}
Varianti da integrare nella query 300/479:
Codice: Seleziona tutto
h2 {
font-size: 18px;
}
.line::before, .line::after {
display: none; /* nasconde gli elementi */
}
all'interno della 480/767:
Codice: Seleziona tutto
h2 {
font-size: 19px;
}
.line::before, .line::after {
top: 130px;
width: 100px;
}
.line::before {
margin-right: 110px;
}
.line::after {
margin-left: 110px;
}
nella 768/1023:
Codice: Seleziona tutto
.line::before, .line::after {
top: 138px;
width: 180px;
}
.line::before {
margin-right: 140px;
}
.line::after {
margin-left: 140px;
}
e, in ultimo, nella 300/767:
Codice: Seleziona tutto
body {
font-size: 14px;
line-height: 17px;
}
.width-mini {
width: auto;
padding: 0 25px 30px;
margin: 0;
}
.back, .line {
padding: 115px 0 10px;
}
.ico-01, .ico-02, .ico-03 {
background-position: center 25px;
}
Il codice HTML è il seguente (da inserire dopo la chiusura dell'header):
E, al solito, la
bozza online da usare come riferimento.
N. d. F.: Gli pseudo elementi sono in grado di
generare meraviglie: tutti i webdesigner li amano (o dovrebbero farlo).