Effetto testo barrato con con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Per quanto poco utilizzato conosciamo bene l'importanza di poter sbarrare un testo per farlo sembrare cancellato, sistema utile ad esempio nei carrelli della spesa per i prodotti in promozione, segnalando sia il prezzo pieno sbarrato ed il prezzo corrente.

In HTML tradizionale utilizziamo i Tag s

<s>TESTO SBARRATO</s>
oppure strike
<strike>TESTO SBARRATO</strike>
che assolvono alla stessa funzione.

Entrambi, però, sono sconsigliati dalle specifiche dell' XHTML.

Allo scopo ci vengono in soccorso i CSS che, grazie al loro attributo text-decoration, permettono di ovviare al problema della compatibilità con i tanto bramati standard.

Vediamo un esempio in cui usiamo un livello che non comporta il ritorno a capo a cui assegnamo una classe:
<span class="strike">TESTO SBARRATO</span>
Vediamo come impostare il codice CSS:
<style type="text/css">
span.strike
{
    text-decoration: line-through;
}
</style>
A permettere lo sbarramento del testo è l'attributo speciale line-through.

I più cliccati della sezione Css

:: Referenze dei fogli di stile Css (41.760)

:: Menu ad effetto mouseover con i Css (39.091)

:: Effetti sui link con i Css (29.617)

:: Testo verticale coi Css (19.875)

:: Angoli smussati in un box coi Css (18.851)

:: Box con effetto ombra con i CSS3 (16.159)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.140)

:: Stilizzare i form Html con i Css (15.906)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.555)

:: Colorare le barre di scorrimento del browser con i Css (14.254)

IN EVIDENZA
DOWNLOAD