Ti è piaciuto? Condividi su social!

Utilizzo della proprieta content dei CSS

Proprieta content dei CSS permette di generare il contenuto e la sua visualizzazione sul web browser del utente

Il suo utilizzo a prima vista è abbastanza complicato, ma dopo aver conosciuto da vicino scoprirai che non è affatto cosi, basta capire dove e come posiamo usarla e come potrà cambiare la nostra pagina. Vediamo di imparare basandosi su esempi e dopo di che il vostro arsenale di stili CSS sicuramente diventerà molto piu ricca e avanzata.

Linguaggio CSS può tanto.

Con i CSS, è possibile aggiungere il contenuto che non appartiene al codice HTML nei seguenti modi:
Usando la proprietà content in copia con pseudo-elementi :before e:after;
Taramite numerazione automatica con utilizzo delle proprieta counter-increment e counter-reset.

Come aggiungere il contenuto generato sulla pagina web

1. Proprieta content

Questa proprietà specifica il contenuto che appare prima o dopo l'elemento. Si utilizza con pseudo elementi :before e :after

Diciamo che è una definizione semplificata del concetto di :before e :after anche se in realtà non c'è prima e dopo ma c'e sovrapposizione uno sopra altro e gia con altri parametri posiamo piazzare il contenuto generato o sopra o sulla destra o sulla sinistra .

h1:before, h1:after {
content: "";
}

Contenuto generato eredita valore dal elemento a cui è collegato. Vengono ereditati solo proprietà che si ereditano

content
Valore :
`normal`	Valore di default. Contenuto senza contenuto.
`none`	Non aggiungere contenuto. Si utilizza quando è necessario rimuovere contenuto generato per uno dei elementi da un gruppo di elementi (ad esempio, elementi della lista), perche inizialmente è stata asegiata al grupo in generale.
`counter`	Permette di creare i contatori, indicando per loro il punto di partenza del conto e il valore del incremento con aiuto di proprietà counter-reset. Per incremento diretto del conto si utilizza la proprietà counter-increment.
`attr()`	Aggiunge prima o dopo l'elemento il valore dell'attributo, racchiuso tra parentesi. Per inserire uno spazio tra il contenuto esistetene e quello generato, è necessario aggiungere uno spazio prima o dopo la parentesi, per esempio,content: attr( href);
`" "`	Testo o simbolo che sara aggiunto come contenuto generato, deve essere racchiuso tra virgolette doppie o singole. Virgolette vuote possono essere usate per aggiunta del contenuto block.
`open-quote`	Aggiunge contenuto le virgolette di apertura.
`close-quote`	Aggiunge contenuto le virgolette di chiusura.
`no-open-quote`	Elimina virgolette di apertura, anche se il livello della loro nidificazione rimane considerato.
`no-close-quote`	Elimina la virgoletta di chiusura.
`url()`	Aggiunge: contenuti multimediali, come immagini, suoni, video. Come valore di attributo tra le parentesi si indica l'indirizzo della risorsa esterna, che viene inserito nella posizione selezionata del documento..
`initial`	Ritorna il valore della proprietà al valore di default
`inherit`	Eredita valore della proprietà dal elemento genitore.

1.1. Aggiungere caratteri speciali attraverso content.

Happy New Year!

È possibile vivacizzare il testo con l'aggiunta di caratteri speciali. Come valore vediamo di usare caratteri di Unicode o Font Awesome. Ne abbiamo parlato qui.

h1 { 
font-family: 'Niconne', cursive; 
font-size: 50px; 
color: #e12527; 
}
h1:before, h1:after { 
content: "\2746"; 
display: inline-block; 
font-size: 60px; 
color: #38afaa; 
-webkit-animation: my 4s infinite alternate; 
animation: my 4s infinite alternate; 
}
h1:before { 
margin-right: 0.5em; 
}
h1:after { 
margin-left: 0.5em; 
}
@-webkit-keyframes my {
    0%   {color: #2e2f92;}
    25%  {color: #38afaa;}
    50%  {color: #5b59a7;}
    75%  {color: #f7b21c;}
    100% {color: #e12527;}
 }
@keyframes my {
    0%   {color: #2e2f92;}
    25%  {color: #38afaa;}
    50%  {color: #5b59a7;}
    75%  {color: #f7b21c;}
    100% {color: #e12527;}
 }

1.2 Aggiungere testo con la proprieta content

Happy New Year!

h1:before, h1:after {
content: "Yay!";
font-family: 'Dancing Script', cursive;
color: #f7b21c;
text-shadow: 1px 1px 2px grey; 
}
h1:before {
margin-right: 30px;
}
h1:after {
margin-left: 30px;
}

1.3 Aggiungere un'immagine come contenuto generato

Happy New Year!

div:before { /*stiamo dicendo di mostrare, nel nostro caso l'immagine, prima del testo*/
content:url(http://ioeweb.it/images/css/Luiggi2.jpg); /*percorso della nostra immagine */
display: inline-block;
margin-right: 10px;/*posizioniamo il contenuto generato */
line-height: 50px;

1.4 Aggiungere contenuto Block.

*{box-sizing:border-box;}
div {
  position: relative;
  width: 680px;
  height: 100px;
  border: 1px solid #C2C9D5;
  margin-top: 40px;
  background: linear-gradient(to top,#D7DFED, #F5FCFD, #D7DFED)
}
/*Cerchio*/
div:nth-child(1):before {
  content: "";
  display: inline-block;
  position: absolute;
  left: calc(50% - 11px);
  left: -webkit-calc(50% - 11px);
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #AC170E;
  background: orangered;
  box-shadow: 0 2px 4px  #292825;
}
/*Triangolo*/
div:nth-child(2):before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent hotpink transparent;
  position: absolute;
  left: calc(50% - 15px);
  left: -webkit-calc(50% - 15px);
  top: -21px;
}
/*Zebra*/
div:nth-child(3):before{
  content: "";
  display: inline-block;
  position: absolute;
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(45deg, turquoise, turquoise 10px, #D7DFED 10px, #D7DFED 20px);
}
/*Triangolo con bordo*/
div:nth-child(4) {
  border: 3px solid #3E3A40;
}
div:nth-child(4):before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #3E3A40;
  transform: rotate(135deg);
  position: absolute;
  left: calc(50% - 11px);
  left: -webkit-calc(50% - 11px);
  top: -15px;
  background:linear-gradient(to top right,#CDD3CD, #EEF0EE, #CDD3CD);
  z-index: -1;
}

Vediamo subito come funziona pseudo classe:nth-child(). Perché dal codice se sei ai primi passi coi css si capisce pocconient, ma è abbastanza facile il suo funzionamento.

Vediamo il markup del esempio.

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Come potresti notare abbiamo creato un box grande con il tag <div></div> e in questo box abbiamo inserito altri 4 box <div></div>!!! proprio quelli che vediamo nelesempio. E qui che entrano in gioco seletori di dicsendenti di CSS e conteggio matematico. La prima scatola è il genitore e con il nostro codice abbiamo detto di scegliere il primo figlio :nth-child(1) e attribuire ad esso rispettive regole di CSS, puoi selezionare il secondo figlio andando in giù e ad esso attribuire stili prescritti tramite pseudo-classe :nth-child(2), puoi scegliere il terzo e attribuirci regole indicati nel pseudo'classe :nth-child(3) e cosi via. Quindi per utilizzare :nth-child() dobbiamo prima prendere in considerazione la struttura di discendenza e puoi con i semplici calcoli capire il numero di ordine fra elementi simili (per esempio fra i div nel nostro caso o potrebbe essere un elemento della lista o una cella nella tabella HTML ) che ha l'elemento che ci interessa e utilizzare questo numero per selezionarlo

1.5. Aggiungere un valore al attributo

Funzione attr () permette di aggiungere qualsiasi valore al attributo, ad esempio, l'indirizzo URL-, che verrà visualizzato durante la stampa di testo.

a:after {
  content: attr(href);
}

1.6. Aggiungere virgolette tramite proprieta content

Con valori di open-quote e close-quote, è possibile generare virgolette di apertura e chiusura . L'aspetto delle virgolette si specifica nelle proprietà quotes . Se non viene specificato, verrà utilizzato il valore predefinito del browser in uso .

/*Markup HTML */
<blockquote>Ciao  mondo!</blockquote>
/*Stili  CSS */
blockquote {
  quotes: "\2039" "\203A";/* caratteri speciali d'unicode */
  font-size: 40px;
  font-family: 'Sigmar One', cursive;
}
blockquote:before {
  content: open-quote;
  color: mediumvioletred;
  margin-right: 10px;
}
  blockquote:after  {
  content: close-quote;
  color: mediumvioletred;
  margin-left: 10px;
}

Ciao mondo!

1.7. Aggiungere contatore d'elemento

Il valore counter consente di numerare qualsiasi elemento blocco su una pagina web. I contatori vengono creati utilizzando css-proprietà counter-reset e counter-increment.

1.7.1. Nome contatore

La proprietà counter-reset assegna un nome ad uno o piu contatori, permettendo di impostare o resettare il valore del contatore a qualsiasi valore. La proprietà è utilizzato soltanto in combinazione con la seconda proprietà - counter-increment. Puo essere assegnato a qualsiasi elemento HTML.

counter-reset
Valore :
`none`	Valore di default. Contatore non è impostato.
nome del contatore numero	Con il nome del contatore vengono selezionate uno o più elementi di cui si desidera modificare il valore del contatore. Il numero indica il conteggio iniziale. Non utilizzare parole chiave come il nome del contatore. Se si desidera impostare la numerazione da uno, è necessario impostare`counter-reset: 0;`. Se si desidera impostare la numerazione da 0, è necessario impostare `counter-reset: -1;`.
`initial`	Ritorna il valore della proprietà al valore di default
`inherit`	Eredita valore di proprietà dal elemento genitore.

1.7.2. Incremento del contatore

La proprietà counter-increment assume uno o più valori che determinano i nomi dei contatori che verano incrementati.

counter-increment
Valore:
`none`	Valore di default. Incremento del contatore assente.
Nome del contatore numero	Il nome del contatore determina quale contatore vera incrementato. Valore di default `1`. Se il numero è negativo, la numerazione degli elementi sarà negativo. Il numero imposta il valore iniziale e incremento, cioè, se si imposta `counter-increment: id 2;`, allora il primo elemento avra valore `2`, secondo `4` e cosi via . Se l'identificatore si riferisce ad un contatore che non è stato inizializzato con `counter-reset`, allora il valore iniziale sara uguale a `0`.
`initial`	Ritorna il valore della proprietà al valore di default
`inherit`	Valore della proprietà viene ereditato dal elemento genitore..

Il valore del content: counter (nome contatore) mostra il valore del contatore come il contenuto di pseudo-elemento.

/*Markup HTML*/
<h2>Title</h2>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
<h2>Title</h2>
    <p>Some text</p>
    <p>Some text</p>
/* Stili CSS*/
body {
  counter-reset: h2;/*creare un contatore per ogni titolo h2*/
  } 
h2 {
  counter-reset: p; /*creare contatore per i paragrafi p  in modo che in ogni gruppo di paragrafi numerazione parte dal numero del paragrafo */
  color: #0ba7e2;
  }
h2:before {
  content: "Part " counter(h2) ". "; /*aggiungere all'inizio del ogni paragrafo testo con uno spazio, puoi il valore corrente del contatore e dopo di nuovo il  testo (in questo caso, un punto e uno spazio)*/
  counter-increment: h2; /*impostiamo aumento nella numerazione, ad ogni apparizione d'elemento h2 contatore viene incrementato di uno*/}
p {
color: #3b4849;
  }
p:before {
  margin-left: 30px;
  content: counter(h2) "." counter(p) '. ';/*aggiungiamo all'inizio di ciascun paragrafo  valore del contatore  h2, il testo (in questo caso un punto), il contatore di paragrafi e di nuovo testo (punto e spazio*/
  counter-increment: p; /*impostiamo aumento della  numerazione per un punto*/
  }

Vediamo il risultato