13 css3 ombreggiatura testo, word-wrap, font infiniti

Pubblicato il di

Sebbene non ancora interamente supportato da tutti i browser, l’ombreggiatura del testo trova un notevole riscontro a livello di compatibilità. Creiamo una pagina html e inseriamo un paragrafo

<p>Effetti di testo!!</p>

ora regoliamo ne foglio di stile una grandezza generosa di 80 pixel e l’ombreggiatura:

p {
    font-size: 80px;
    text-shadow: 4px 4px 4px #00ff00;
}

I primi 2 valori del text-shadow sono obbligatori, il terzo e il quarto sono opzionali. Il primo è lo spostamento orizzontale il secondo verticale, rispettivamente verso il basso e verso destra, mettendo valori negativi spostiamo l’ombra rispettivamente verso l’alto e verso sinistra. il terzo è la sfocatura, mentre il quarto è il colore, che se non specificato è nero.

word-wrap

inserisco il precedente paragrafo all’interno di un div di 400 pixel

<div>
<p>Effetti di testo!! Con un parolone lunghissimissimo</p>
</div>

ecco il css

p {
    font-size: 80px;
    text-shadow: 4px 4px 4px ;
    width: 400px;
    border: 1px solid;
}

La parola lunga fuoriesce dall’area del div, grazie alla nuova proprietà word-wrap possiamo troncare un contenuto troppo lungo

word-wrap: break-word;

con break-word il contenuto fuoriuscente  viene mandato a capo, non eccedendo dal div.

Col vecchio overflow: hidden la parte fuoriuscente invece veniva nascosta

overflow: hidden;

grazie alla nuova proprietà è possibile inserire tre puntini di abbreviazione

overflow: hidden;
text-overflow: ellipsis;

text-overflow: ellipsis il testo viene abbreviato dai puntini e seppur non visibile è esistente. Tramite un semplice script Java Script si potrebbe renderlo visibile, oppure, visto che ci troviamo in ambito css, possiamo sfruttare la pseudoclasse hover

p:hover {overflow: visible}

al passaggio del mouse sul paragrafo, la scritta nascosta diventa visibile o meglio la proprietà overflow hidden diventa visible.

Supporto fonts

Con la nuova regola @font-face è possibile inserire un tipo di font personalizzato, da utilizzare

@font-face {
    font-family: a-mano;
    src: url('Blackadder ITC.ttf');
}

Ovviamente devo uplodare il file del font in una cartella del nostro server. Attribuisco un nome a piacere al font con font-family, nel nostro caso a-mano. In source specifico il percorso e il nome del font. Infine vado a richiamare il nostro font col nome datogli

font-family: 'manuale';

ed ecco applicato il nostro font. Qualora l’utente non abbia installato sul suo computer questo font, esso verrà scaricato ed installato automaticamente all’apertura del sito.