Come personalizzare un titolo in una pagina web.

Un titolo su una pagina web dovrebbero attirare l'attenzione. Per impostazione predefinita di browser, la visualizzazione del titolo avviene tramite un aumento della dimensione del font e la sua scritura in grassetto.

 Esempi di oggi sono adatti per la decorazione di titoli di categoria, di varie blocchi e di menu laterali o per qualche altro utilizzo particolare.
Alcuni titoli richiedono ulteriore marcatura altri esempi  utilizzano solo combinazione con le pseudo classi : before e: after.

Vi consiglio non compiare semplicemente il codice del titolo che vi sia piaciuto ma provare di capier come è statto fatto, provare di modificare la decorazione del titolo per poter creare dei elementi nuovi proprie
Per i titoli che ho usato caratteri Arvo scaricato dal sito  Googol font

Prima di tutto vediamo classi CSS comuni per tutti i titoli di oggi

h3 {
  font-family: 'Arvo', serif;
  font-size: 20px;
  letter-spacing: 1px;
  max-width: 320px;
  width: 100%;
  position: relative;
  display: inline-block;
  color: #465457;
}

Non dimenticare che per essere sicuri che sul browser del utente il nostro titolo sara uguale a quello che abbiamo pensato posiamo importare stili di caratteri voluti tramite regola @font-face o tramite tag <link >che piu nel detaglio vediamo nelle prossime lezioni.

<link href="https://fonts.googleapis.com/css?family=Arvo:400,700,700i" rel="stylesheet">

Ok, ora passiamo ad esempi di nostri titoli decorati   

Titolo1

<style>
.d1 h3 {
  color: #F16246;
  text-align: center;
}
.d1 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: #E5EDEA;
  z-index: -1;
}
.d1 span {
  background: white;
  padding: 0 20px;
}
</style>
<div class="d1"><h3><span>Titolo1</span></h3></div>

Titolo 2

<style>
.d2 h3 {
  text-align: center;
}
.d2 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 0;
  right: 0;
  height: 6px;
  border-top: 2px solid #BBC9C9;
  border-bottom: 2px solid #BBC9C9;
  z-index: -1;
}
.d2 span {
  background: white;
  padding: 0 20px;
}
</style>
<div class="d2"><h3><span>Titolo 2</span></h3></div>

Titolo3

<style>
.d3 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  right: 0;
  height: 12px;
  background: #A6D8CB;
  z-index: -1;
}
.d3 span {
  background: white;
  padding: 0 15px;
  margin-left: 20px;
}</style>
<div class="d3"><h3><span>Titolo3</span></h3></div>

Titolo4


<style>
.d4 h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid #E5EDEA; 
}
.d4 h3:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 30%;
  height: 4px;
  background: #A6D8CB;
}
</style>
<div class="d4"><h3>Titolo4</h3></div>

Titolo 6

<style>
.d6 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d6 h3:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -15%;
  width: 30%;
  height: 2px;
  background: #FA5F4C;
}
</style>
<div class="d6"><h3>Titolo 6</h3></div>

Titolo7

.d7 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d7 h3:before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  height: 2px;
  background: #79F8D7;
}
.d7 h3:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -15%;
  width: 30%;
  height: 2px;
  background: #79F8D7;
}
</style>
<div class="d7"><h3>Titolo7</h3></div>

Titolo 8


<style>
.d8 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d8 h3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EE6247;
  z-index: 2;
}
.d8 h3:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  height: 2px;
  background: #ECF4F2;
}</style>
<div class="d8"><h3>Titolo8</h3></div>

Titolo 9

<style>
.d9 h3 {
  padding: 0 0 6px 10px;
  border-left: 10px solid #A6D8CB;
  border-bottom: 2px solid #A6D8CB;
}
</style>
<div class="d9"><h3>Titolo 9</h3></div>

Titolo10


<style>.d10 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
  border: 2px solid #cbdcea;
  color: #394671;
}
.d10 h3:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #cbdcea;
}</style>
<div class="d10"><h3>Titolo10</h3></div>

Titolo 11

<style>
.d11 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
  background: #A4C0D6;
  border: 2px dashed white;
  color: white;
  box-shadow: 0 0 0 4px #A4C0D6;
}
</style>
<div class="d11"><h3>Titolo 11</h3></div>

Titolo12


</style>
.d12 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
}
.d12 h3:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 3px;
  z-index: -1;
  width: 20px;
  height: 25px;
  border: 4px solid #ea7e9c;
  color: #394671;
}
</style>
<div class="d12"><h3>Titolo12</h3></div>

Titolo13

<div class="d13"><h3>Titolo13</h3></div>

Scopri come sono fatto 14

<div class="d14"><h3>Scopri come sono fatto 14</h3></div>

Titolo15

<div class="d15"><h3>Titolo15</h3></div>

Scopri anche il mio codice 16

<div class="d16"><h3>Scopri anche il mio codice  16</h3></div>

Letto 1412 volte