Titoli web con pseudo-elementi :before e :after

In questo tutorial, vediamo come con pseudo-elementi :before e :after  posiamo cambiare aspetto del tuo sito web. E piu precisamente come creare bellissimi titoli, ognuno con il proprio carattere.

Sostituendo immagini utilizzati per la decorazione dei titoli con dei bellisimi elementi costruiti completamente in CSS con  pseudo-elementi :before e :after (perche generano dei elementi in piu rispetto elemento base come testo del titolo ) è possibile ottenere una maggiore flessibilità nella ottimizzazione del sito e migliorare la l'indicizzazione del contenuto testuale dai motori di ricerca. Perche come sapiamo i robo di Google sono in grado di rilevare e memorizare un testo normale e non testo in una immagine. Quindi questa lezione non solo sara utile per imparare come decorare meglio titoli in un sito web, ma aiutera anche  migliorare la visbilita del nostro sito nella richerca.

Per il nostro lavoro avremo bisogno di  Google Font.

Esempio 1

ART-DECO


Strutura HTML
<div class="one"><h2>ART-DECO</h2></div>
Stili CSS
.one {background:#FFF4ED}
.one h1 {
  font-family: 'Comfortaa', cursive;
  position: relative;
  color: #3CA1D9; 
  display: inline-block;
  border-top: 2px solid;
  border-bottom: 2px solid;
  font-size: 3em;
  padding: 11px 60px;
}
.one h1:before, .one h1:after {
  content: ""; 
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  border-left: 2px solid;
  border-right: 2px solid;
  background: repeating-linear-gradient(180deg, transparent, transparent 2px, #3CA1D9 2px, #3CA1D9 4px);
}
.one h1:before {
  left: 0;
}
.one h1:after {
  right: 0;
}

12

Esempio 2

ioeweb.it

Strutura HTML
<div class="two"><h1>ioeweb.it</h1></div>
stili CSS
.two {background: #E4E5D2;} 
.two h1 {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  color: #5C2610;
  font-size: 3em;
  padding: 10px 0;
  width: 400px;
  text-align: center;
}
.two h1:before {
  content: ""; 
  position: absolute;
  top: -20px;
  left: 74px;
  width: 240px;
  height: 100px;
  border-radius: 50%/30%;
  border: 6px solid #5C2610;
 border-left-color: transparent;
  border-right-color: transparent;
}

13

Esempio 3

Lezioni CSS

strutura HTML
<div class="four"><h1>Lezioni CSS</h1></div>
Gli stili CSS
.four {background: #F4F7EE;
} 
.four h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #C44737;
  font-size: 50px;
  padding: 8px 60px 0 20px;
  border-top: 4px solid;
  border-left: 4px solid;
}
.four h1:before {
  content: ""; 
  position: absolute;
  width: 20px;
  height: 20px;
  top: -28px;
  left: -28px;
  border: 4px solid #C44737;
}

14

Esempio 4

CREARE SITO WEB

Markup HTML
<div class="five"><h1>CREARE SITO WEB </h1></div>
Stili CSS
.five {background: #F7F4ED;
margin:140px;} 
.five h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  position: relative;
  color: #587493;
  font-size: 2.5em;
  padding: 8px 25px 8px 2px;
  border-top: 4px solid;
border-bottom:4px solid;
}
.five h1:before {
  content: "Come";
  position: absolute;
  top: -22px;
  left: -160px;
  font-size: 1.5em;
  transform: rotate(-17deg);
  font-family: 'Marck Script', cursive;
}
.five h1:after {
  content: ""; 
  position: absolute;
  width: 120%;
  height: 4px;
  right: 0;
  bottom: -4px;
  background: #587493;
}

15

Esempio 5

Vediamo come posiamo utilizzare due volte pseudo classi :before e :after

Doppio colpo da ioeweb.it

Markup HTML
<div class="six"><h1><span>Doppio colpo da ioeweb.it</span></h1></div>/*abbimo introdotto un altra scatola<span></span> per poter utilizzare ancora una volta pseudoclassi :before e :after*/
Stili CSS
.six {background: #F7E2C7;
margin:10%;
}
.six h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #F7844E;
  font-size: 3em;
  padding: 16px 40px 24px;
}
.six h1:before {
  content: ""; 
  position: absolute;
  width: 60%;
  height: 4px;
  left: 0;
  top: 4px;
  background: #294200;
}
.six h1:after {
  content: ""; 
  position: absolute;
  width: 60%;
  height: 4px;
  right: 0;
  bottom: 4px;
  background: #294200;
}
.six h1 span:before {
  content: ""; 
  position: absolute;
  width: 20px;
  height: 20px;
  border: 4px solid #294200;
  border-radius: 50%;
  top: -20px;
  left: -12px;
}
.six h1 span:after {
  content: ""; 
  position: absolute;
  width: 20px;
  height: 20px;
  border: 4px solid #294200;
  border-radius: 50%;
  bottom: -20px;
  right: -12px;
}

16

 

E come P.S. ti propongo un video riguardo il tag  <span> e <div> che abbiamo usato in questa lezione

animatedDude

video prevui

 
Letto 638 volte