Corsi on-line

Doppia colorazione dei caratteri con CSS

In questo articolo vedremo come sia possibile utilizzare due colorazioni per il medesimo carattere tramite alcune semplici regole di stile CSS; nello specifico prenderemo come riferimento una stringa di testo scelta arbitrariamente, ogni carattere che compone quest’ultima verrà colorato per metà di grigio e per il restante 50% di verde; sostanzialmente il nostro obiettivo sarà quello di ottenere un output come quello raffigurato nell’immagine seguente.

blahUtilizzando il solo CSS dovremo stilizzare ogni singolo carattere che compone la nostra stringa; stabilito e considerato questo limite potremo definire inizialmente un colore da associare a tutti i componenti definendo una classe appositamente dedicata a questo scopo:

.☯ {
position:relative;
display:inline-block;
width:1;
font-size:60px;
color: green;
overflow:hidden;
white-space: pre;
}

Fatto questo potremo ricolorare la parte sinistra di ciascun carattere definendo una regola basata sul selettore :before che ha lo scopo di inserire del contenuto prima degli elementi stilizzati da una classe:

.☯:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content);
overflow:hidden;
color: grey;
}

Ora potremo applicare le regole di stile precedentemente definite attraverso il markup della nostra pagina HTML:

<span class="☯" data-content="B">B</span>
<span class="☯" data-content="L">L</span>
<span class="☯" data-content="A">A</span>
<span class="☯" data-content="H">H</span>
<span class="☯" data-content="!">!</span>

Da notare l’utilizzo della proprietà CSS denominata content, quest’ultima potrà essere utilizzata unicamente con gli pseudo elementi :after e :before e permetterà di applicare le regole ad essi associati ai soli elementi passati come valore all’attributo HTML5 data-.

Post correlati
I più letti del mese
Tematiche