Continuiamo a fare trucchi in puro css. Oggi ti dirò come realizzarne uno bellissimo usando i css linea di demarcazione a forma di onda sul posto. Può essere utilizzato, ad esempio, per separare visivamente i post del blog o per separare i blocchi nella barra laterale.
Una volta ne ho già parlato. Ma ha usato il tag dinosauro hr con un paio di regole di stile complicate per giocare con l'ombra.
Oggi la situazione è completamente diversa. Per visualizzare una linea sotto forma di onda, dovrai aggiungere molti più trucchi alle regole e applicare non solo css, ma css3. Benvenuto!
Per cominciare, il solito codice html. Disegneremo le linee come div vuoti con speciali set di regole. I blocchi vuoti sono, ovviamente, il male. Ma a volte devi sopportarlo.
Qui abbiamo mostrato 4 tipi di linee. Ed ecco come apparirà un insieme di stili in css per loro:
Onda (
trabocco: nascosto;
posizione: relativa;
larghezza: 630px;
altezza: 50px;
}
.linea (
posizione: assoluta;
larghezza: 630px;
altezza: 26px;
}
.Linea 1 (
}
.linea 2 (
}
.linea (
dimensione dello sfondo: 50px 50px;
}
.smallLine (
posizione: assoluta;
larghezza: 630px;
altezza: 5px;
}
.smallLine1 (
sfondo: gradiente lineare (45 gradi, trasparente, trasparente 49%, nero 49%, trasparente 51%);
}
.smallLine2 (
sfondo: gradiente lineare (-45 gradi, trasparente, trasparente 49%, nero 49%, trasparente 51%);
}
.smallLine (
dimensione dello sfondo: 10px 10px;
}
.cerchio (
posizione: assoluta;
larghezza: 630px;
altezza: 20px;
sfondo: gradiente radiale (16px, trasparente, trasparente 4px, nero 4px, nero 10px, trasparente 11px);
dimensione dello sfondo: 30px 40px;
}
.circle2 (
in alto: 20px;
sinistra: 15px;
}
.ellisse (
posizione: assoluta;
sfondo: gradiente radiale (ellisse, trasparente, trasparente 7px, nero 7px, nero 10px, trasparente 11px);
dimensione dello sfondo: 36px 40px;
larghezza: 630px;
altezza: 20px;
}
.ellisse2 (
in alto: 20px;
sinistra: 18px;
posizione di sfondo: 0px -20px;
}
Qui abbiamo usato trucchi come il gradiente lineare e il gradiente radiale dall'arsenale css3.
C'è un'altra opzione per usare una linea di demarcazione sotto forma di un'onda (quella più bassa nell'illustrazione all'inizio del post). Può essere utilizzato all'estremità di un blocco, come decorazione del fondo. Il codice è abbastanza semplice. Prima l'html:
Applichiamo gli pseudo-elementi: prima e: dopo nelle regole css. Puoi leggere su di loro. Ecco come sarà il codice:
Onda (
larghezza: 630px;
sfondo: # 333;
altezza: 30px;
posizione: relativa;
}
.wave :: prima (
contenuto: "";
posizione: assoluta;
sinistra: 0;
in basso: 0;
destra: 0;
background-repeat: ripeti;
altezza: 10px;
dimensione dello sfondo: 20px 20px;
immagine di sfondo:
gradiente radiale (cerchio a 10px -5px, trasparente 12px, # 19d1ff 13px);
}
.wave :: dopo (
contenuto: "";
posizione: assoluta;
sinistra: 0;
in basso: 0;
destra: 0;
background-repeat: ripeti;
altezza: 15px;
dimensione dello sfondo: 40px 20px;
immagine di sfondo:
gradiente radiale (cerchio a 10px 15px, # 19d1ff 12px, trasparente 13px);
}
È tutto! Fallo!
Dall'autore: lo stile dei caratteri di sottolineatura dei collegamenti è una faccenda complicata e continuo a dimenticare quale metodo funziona meglio in una determinata situazione. Fortunatamente, John Jameson ci aiuterà a capirlo rapidamente nel suo articolo.
Esistono molti modi per definire lo stile delle sottolineature. Potresti ricordare l'articolo Creare sottolineature per collegamenti medi. Medium non ha cercato di fare qualcosa fuori dagli schemi, voleva solo creare sottolineature accattivanti nel testo.
Le sottili sottolineature nere con spazi intorno alle lettere con i leader inferiori sono opera di Marcin Whitchery in Creazione di sottolineature di collegamento medie.
Sottolineatura di buon livello che è anche ben dimensionata e ha omesso eventuali discensori. Molto meglio della maggior parte dei browser predefiniti. A quanto pare, Medium ha affrontato molte sfide lungo la strada. E anche due anni dopo, lo stile ancora buono delle sottolineature causa molti problemi.
Obiettivi
Perché non usare solo la decorazione del testo: sottolineato? Se stiamo parlando di uno scenario ideale, i trattini bassi dovrebbero:
essere al di sotto della linea di base;
salta l'estensione inferiore delle lettere;
cambiare colore, spessore e stili;
vai a una nuova riga;
lavorare con qualsiasi sfondo.
Credo che possiamo benissimo richiedere tutto questo dalle sottolineature, tuttavia, per quanto ne so, non esiste un modo intuitivo per risolvere tutti questi compiti nei CSS.
approcci
Quindi quali modi abbiamo per sottolineare il testo? Ho ricordato quanto segue:
decorazione del testo;
immagine di sfondo;
filtri SVG;
Sottolineato.js (tela);
decorazione-testo- *
Esaminiamo l'intero elenco e consideriamo tutti i pro e i contro di ciascun approccio.
La proprietà di decorazione del testo
La proprietà text-decoration è il modo più semplice per sottolineare il testo. È necessario applicare una sola proprietà. Su un testo piccolo, una tale linea sembrerà a posto, ma se aumenti la dimensione del carattere, sembra già imbarazzante.
Il problema più grande con la proprietà di decorazione del testo è la mancanza di personalizzazione. La linea utilizza il colore e la dimensione del carattere del testo a cui è applicata e non esiste un modo cross-browser per modificare gli stili. Parleremo di questa proprietà in modo più dettagliato in seguito.
professionisti
facile da usare;
è al di sotto della linea di base;
salta gli ascendenti per impostazione predefinita in Safari e iOS.
passa a una nuova riga;
funziona con qualsiasi sfondo.
contro
non salta l'estensione delle parti inferiori delle lettere in altri browser;
colore, spessore e stili non possono essere modificati.
La proprietà del bordo inferiore
La proprietà border-bottom è un buon equilibrio tra velocità e personalizzazione. Questo approccio utilizza bordi CSS comprovati, il che significa che puoi facilmente cambiare colore, peso e stili. Questo è l'aspetto della proprietà border-bottom sugli elementi in linea:
Il più grande aspetto negativo è la distanza della sottolineatura dal testo. La sottolineatura si trova sotto i discendenti delle lettere. Questo problema può essere risolto rendendo l'elemento inline-block e diminuendo l'altezza della linea, ma poi si perde la capacità di saltare a nuove linee. Va bene per le singole linee, ma non di più.
Inoltre, puoi utilizzare text-shadow per nascondere parti della linea attorno ai leader inferiori. In questo caso, dovrai simulare il colore di sfondo, il che significa che il metodo funziona solo su sfondi uniformi. Gradienti e immagini non funzioneranno.
Attualmente sono disponibili 4 proprietà per lo stile della sottolineatura. Molto meglio della semplice decorazione del testo.
professionisti
puoi usare la proprietà di transizione e animare il colore e lo spessore;
passa alle nuove righe per impostazione predefinita se l'elemento non è inline-block;
contro
la linea è molto lontana e difficile da spostare;
è necessario utilizzare troppe proprietà non necessarie affinché la sottolineatura abbia un bell'aspetto;
scarsa selezione di testo quando si utilizza text-shadow.
Proprietà box-ombra
La proprietà box-shadow disegna una sottolineatura utilizzando due ombre interne: una crea un rettangolo e l'altra lo nasconde. Ciò significa che è necessario uno sfondo uniforme affinché il metodo funzioni correttamente.
Lo stesso trucco dell'ombra del testo può essere utilizzato per simulare lo spazio bianco attorno alle prime lettere in basso. Se il colore della linea è diverso dal testo o è abbastanza sottile, non dovrebbero esserci problemi, come nel caso della decorazione del testo.
professionisti
può essere posizionato sotto la linea di base;
puoi saltare i callout usando text-shadow;
puoi cambiare il colore e lo spessore;
salta a nuove linee.
contro
gli stili non possono essere modificati;
non funziona con tutti gli sfondi.
Proprietà immagine di sfondo
La proprietà background-image è la migliore per i nostri scopi e ha pochissimi svantaggi. L'idea è di creare un'immagine con gradiente lineare e posizione dello sfondo che si ripete sull'asse orizzontale lungo le linee di testo. L'elemento deve essere visualizzato: inline ;.
La demo di seguito non utilizza il gradiente lineare. Puoi usare la tua immagine per creare un fantastico effetto.
professionisti
può essere posizionato sotto la linea di base;
puoi saltare i leader in basso con text-shadow;
puoi cambiare colore, spessore (anche di mezzo pixel) e stili;
funziona con immagini personalizzate;
salta a nuove linee;
funziona con qualsiasi sfondo purché non venga utilizzato text-shadow.
contro
la dimensione dell'immagine può variare in modi diversi per diverse risoluzioni, browser e livelli di zoom.
Filtri SVG
Ho giocato con questo metodo. Puoi creare un elemento filtro SVG in linea che disegna la linea ed espandere il testo per mascherare le parti della linea che devono essere trasparenti. Un filtro può essere identificato e referenziato in CSS usando filter: url ('# svg-underline').
Qual è il vantaggio: il filtro aggiunge trasparenza senza fare affidamento sull'ombra del testo. Cioè, puoi saltare i capi delle lettere in basso su qualsiasi sfondo, inclusi gradienti e immagini! L'esempio seguente funziona solo con una riga di testo, quindi fai attenzione.
Ed ecco come appare in Chrome e Firefox:
Si stanno verificando problemi con IE, Edge e Safari. È difficile testare il supporto per i filtri SVG in CSS. Puoi usare la regola @supports sul filtro, ma questo controllerà solo se il collegamento stesso funziona, non se il filtro è stato applicato o meno. Il mio metodo è piuttosto rozzo con i browser, quindi fai doppiamente attenzione.
professionisti
situato al di sotto della linea di base;
salta i leader di fondo;
puoi cambiare colore, spessore e stili;
funziona su qualsiasi sfondo.
contro
non salta a nuove righe;
non funziona in IE, Edge e Safari, ma puoi specificare la decorazione del testo come fallback. Le sottolineature di Safari hanno un bell'aspetto da sole.
Sottolineato.js (tela)
Underline.js è una libreria straordinaria. Sono impressionato da ciò che Wenting Zhang è stato in grado di fare con JS e dall'attenzione ai dettagli. Se non hai ancora visto la demo tecnica di Underline.js, fermati un minuto e dai un'occhiata. C'è un meraviglioso discorso di nove minuti in rete sull'argomento dei principi di lavoro, te lo racconterò rapidamente ora. Le sottolineature vengono disegnate utilizzando la tela. Un approccio completamente nuovo che funziona sorprendentemente bene.
Nonostante il nome attraente, questa è solo una demo tecnica. Cioè, non puoi inserire immediatamente la libreria nel progetto senza un sacco di modifiche.
Vale la pena menzionare questa libreria solo come prova di concetto. Canvas ha il potenziale per creare bellissime sottolineature interattive, ma dovrai scrivere codice JS aggiuntivo per funzionare correttamente.
Decorazione del testo- * proprietà
Ricordi quando ho detto che analizzeremo qualcosa in modo più dettagliato in seguito? Ora lo faremo. La proprietà di decorazione del testo funziona bene da sola, ma possiamo aggiungere un paio di proprietà sperimentali per un aspetto ancora migliore:
colore-decorazione-testo
testo-decorazione-skip
stile di decorazione del testo
Non essere felicissimo, conosci il supporto del browser.
La proprietà text-decoration-color
La proprietà text-decoration-color ti permette di cambiare il colore della sottolineatura separatamente dal colore del testo. La proprietà ha anche un buon supporto per il browser. Funziona in Firefox e ha il prefisso in Safari. Al rovescio della medaglia, se non cancelli la linea attorno ai leader, in Safari si sovrapporrà al testo. Firefox:
La proprietà text-decoration-skip
La proprietà text-decoration-skip è responsabile dell'omissione delle iniziali in basso nel testo sottolineato.
Questa proprietà non è standard e attualmente funziona solo in Safari. Per funzionare in altri browser, è necessario utilizzare il prefisso -webkit-. Safari ha questa proprietà attivata per impostazione predefinita, motivo per cui i caratteri di sottolineatura saltano i callout inferiori anche sui siti in cui questa proprietà non è specificata.
Se stai utilizzando Normalize, devi essere consapevole che le versioni recenti disabilitano la proprietà per funzionare correttamente in tutti i browser. Se vuoi riportare quei trattini bassi quasi magici, devi abilitare questa proprietà.
La proprietà in stile decorazione del testo
La proprietà stile decorazione del testo offre lo stesso insieme di sottolineature della proprietà stile bordo, ma aggiunge anche un nuovo aspetto: ondulato. Valori possibili:
In questo momento la proprietà in stile decorazione del testo funziona solo in Firefox, di seguito è riportato lo screenshot:
Una serie di sottolineature solide Sembra simile?
Cosa c'è che non va?
Le proprietà text-decoration- * sono più intuitive di altre proprietà per lo stile delle sottolineature. Tuttavia, se si osservano in modo diverso i requisiti presentati in precedenza, si noterà che utilizzando queste proprietà non è possibile modificare lo spessore e la posizione. Dopo una piccola ricerca, ho trovato queste due proprietà:
larghezza-sottolineatura-testo
posizione-sottolineatura-testo
Sembra che queste proprietà siano state eliminate da una prima versione di CSS a causa della mancanza di interesse per esse. Non sono mai stati applicati. Ehi, non è colpa mia.
conclusioni
Allora qual è il modo migliore per sottolineare il testo? Tutto dipende da vari fattori.
Per il testo piccolo, consiglio di usare la decorazione del testo e la proprietà sperimentale text-decoration-skip, sperando che funzioni. Sembra così così nella maggior parte dei browser, ma è sempre stato così e la gente non ci ha prestato attenzione. Se sei abbastanza paziente, è probabile che presto tutte le tue sottolineature avranno un bell'aspetto e non dovrai cambiare nulla.
Usa l'immagine di sfondo per il corpo del testo. Il metodo funziona, sembra carino e ci sono mixin Sass per questo. Se la sottolineatura è sottile o il colore è diverso dal testo, molto probabilmente puoi saltare il metodo text-shadow. Per il testo su una riga, usa il bordo inferiore e qualsiasi altra proprietà.
E per saltare i capi delle lettere su sfondi o immagini sfumati, prova a utilizzare il filtro SVG. O semplicemente non mescolare tali sfondi con le sottolineature. In futuro, quando il supporto del browser migliorerà, sarà possibile utilizzare le proprietà text-decoration-*.
Ci sono molti modi diversi per chiedere Sottolineatura del testo CSS... Se parliamo di uno scenario ideale, la sottolineatura deve soddisfare le seguenti condizioni:
- Posizionato sotto la linea di base della linea;
- Non toccare direttamente le parti delle lettere che si trovano al di sotto della linea di base;
- Dovrebbe essere possibile modificare il colore, lo spessore e lo stile della linea di sottolineatura;
- La sottolineatura dovrebbe continuare dopo che il testo è stato avvolto;
- La sottolineatura dovrebbe funzionare su qualsiasi sfondo.
Tutto questo è abbastanza ovvio. Ma per quanto ne so, non c'è modo di ottenere tutto questo con i CSS.
approcci
Modi con cui puoi sottolineare il testo su Internet:
- decorazione del testo;
- bordo inferiore;
- scatola-ombra;
- immagine di sfondo;
- filtri SVG;
- Sottolineato.js (tela);
- decorazione-testo- *.
Diamo un'occhiata uno per uno e parliamo dei loro pro e contro.
decorazione-testo
la decorazione del testo è il metodo di sottolineatura CSS più semplice. Si applica solo una proprietà e basta. Per caratteri di piccole dimensioni questo può sembrare abbastanza decente, ma aumenta la dimensione e la stessa linea inizia a sembrare imbarazzante.
Visualizza esempio
Il problema più grande con l'utilizzo della decorazione del testo è la sua mancanza di personalizzazione. La proprietà corrisponde a qualsiasi dimensione del carattere o colore del testo a cui è applicata e non esiste un modo tra browser per modificare lo stile specificato.
PROFESSIONISTI
- È facile da applicare;
- Situato al di sotto della linea di base;
- Per impostazione predefinita, aggiunge riempimento alle parti delle lettere che sporgono sotto la linea di base ( in Safari e iOS);
- Avvolge riga per riga;
- Adatto a qualsiasi sfondo;
MENO
- Non aggiunge rientri da parti di lettere che sporgono al di sotto della linea di base in altri browser;
- Non è possibile modificare il colore, lo spessore o lo stile della linea di sottolineatura.
bordo-fondo
border-bottom è facile da usare e personalizzabile. Questa proprietà rende abbastanza facile cambiare il colore, il peso e lo stile di sottolineatura del testo CSS.
Il risultato dell'applicazione di border-bottom agli elementi in linea:
Visualizza esempio
Notare che la sottolineatura è posta sotto le parti delle lettere che si estendono sotto la linea di base. Questo può essere modificato impostando la proprietà inline-block sull'elemento e diminuendo il valore dell'altezza della linea. Ma in questo caso, perdi la capacità di avvolgere il testo. Adatto per testo a riga singola.
Visualizza esempio
Puoi usare la proprietà text-shadow per nascondere la parte della sottolineatura che si estende sotto la linea di base. In questo caso è necessario utilizzare il colore di sfondo. Questo approccio funziona solo con colori di sfondo a tinta unita, non con riempimenti sfumati o immagini.
Visualizza esempio
Per impostare una singola sottolineatura, è necessario applicare quattro proprietà di stile. Questo è più di una semplice decorazione del testo.
PROFESSIONISTI
- Con l'aiuto di text-shadow, puoi impostare i rientri dalle parti delle lettere che sporgono sotto la linea di base;
- È possibile modificare il colore, lo spessore e lo stile della linea CSS della sottolineatura;
- Puoi impostare transizioni e animazioni per il colore e lo spessore della sottolineatura;
- Riportato per impostazione predefinita se non inline-block;
MENO
- Posto lontano dal testo, questa posizione è difficile da cambiare;
- Ci sono molte proprietà aggiuntive da usare;
- Evidenziazione del testo strana quando si utilizza la proprietà text-shadow.
scatola-ombra
Questa proprietà forma una sottolineatura utilizzando due ombre esterne: una crea un rettangolo, l'altra ne nasconde la maggior parte tranne la parte inferiore. Questo metodo è applicabile solo per uno sfondo a tinta unita.
Visualizza esempio
Puoi usare lo stesso trucco di text-shadow per simulare il rientro da parti delle lettere che sporgono sotto la linea di base. Se la sottolineatura dovrebbe essere di un colore diverso dal testo, non avrai gli stessi problemi della decorazione del testo.
PROFESSIONISTI
- La sottolineatura CSS può essere posizionata sotto la linea di base;
- Puoi cambiare il colore e lo spessore della sottolineatura;
- La sottolineatura va a capo riga per riga.
MENO
- Lo stile non può essere modificato;
- Non funziona per nessuno sfondo.
immagine di sfondo
background-image produce un risultato che soddisfa tutti i criteri di cui sopra. Questo utilizza il gradiente lineare e la posizione dello sfondo per creare un'immagine che si ripete orizzontalmente lungo le righe di testo. In questo caso, il testo deve essere impostato per visualizzare: inline ;.
Visualizza esempio
Invece del gradiente lineare, puoi aggiungere la tua immagine con alcuni effetti.
Visualizza esempio
PROFESSIONISTI
- La sottolineatura del collegamento CSS può essere posizionata sotto la linea di base;
- Con l'aiuto di text-shadow, puoi impostare i rientri sotto la linea di base;
- Puoi cambiare il colore, lo spessore e lo stile della sottolineatura;
- Funziona con immagini personalizzate;
- La sottolineatura va a capo riga per riga;
- Funziona su qualsiasi sfondo a meno che non venga utilizzato text-shadow.
MENO
- La dimensione dell'immagine può cambiare in modi diversi a seconda della risoluzione, del browser e della scala di visualizzazione.
Filtri SVG
Puoi creare un elemento filtro SVG che disegna una linea e quindi espande il testo per nascondere le parti trasparenti della linea. Successivamente, è necessario impostare un identificatore per il filtro e fare riferimento ad esso in CSS:
filtro: url ('# svg-sottolineatura').
Il vantaggio di questo approccio è che il filtro aggiunge trasparenza senza utilizzare text-shadow. Puoi impostare la spaziatura della sottolineatura CSS in modo che sporga sotto la linea di base su qualsiasi sfondo. Ma questo metodo non è applicabile per il testo di una riga, questo è il suo principale svantaggio.
Visualizza esempio
Ecco come appare in Chrome e Firefox:
Il supporto del browser per IE, Edge e Safari è problematico. La verifica del supporto del filtro SVG in CSS è difficile.
PROFESSIONISTI
- Può essere posizionato sotto la linea di base;
- È possibile impostare rientri sotto la linea di base;
- Puoi modificare il colore, lo spessore e lo stile della linea di sottolineatura;
- Funziona su qualsiasi sfondo.
MENO
- Il carattere di sottolineatura non va a capo su più righe;
- Non funziona in IE, Edge o Safari, ma è possibile eseguire il fallback con la decorazione del testo. In Safari starà comunque bene.
Sottolineato.js (tela)
Underline.js disegna la sottolineatura CSS usando gli elementi
Questa è solo una versione tecnica demo, quindi, per utilizzare la libreria, dovrai apportare modifiche globali al progetto in fase di sviluppo.
Forniamo questo metodo per dimostrare le possibilità
Decorazione del testo- * proprietà
Questa proprietà funziona bene da sola, ma puoi aggiungere alcune proprietà sperimentali per modificare l'aspetto:
- testo-decorazione-colore;
- testo-decorazione-salta;
- stile di decorazione del testo.
Basta non rallegrarsi prima del tempo. Tieni presente il problema del supporto del browser.
TESTO-DECORAZIONE-COLORE
Consente di modificare il colore CSS della sottolineatura punteggiata separatamente dal colore del testo. Questa proprietà è ben supportata dai browser. Funziona in Firefox e ha il prefisso in Safari. Ma se non gestisci le interruzioni sotto la linea di base del testo, Safari posizionerà la sottolineatura sopra il testo.
Firefox:
Safari:
TESTO-DECORAZIONE-SKIP
Questa proprietà aggiunge interruzioni al di sotto della linea di base:
Non è standard e attualmente funziona solo in Safari, quindi devi usare il prefisso -webkit per usarlo. Safari supporta questa proprietà per impostazione predefinita, quindi le interruzioni vengono aggiunte anche sui siti in cui la proprietà non è specificata affatto.
TESTO-DECO-STYLE
Questa proprietà offre gli stessi tipi di sottolineatura del testo CSS che possono essere impostati utilizzando lo stile del bordo. E oltre a ciò aggiunge il tipo di linea ondulata.
Di seguito sono riportati i diversi valori che è possibile utilizzare:
- tratteggiato;
- punteggiato;
- Doppio;
- solido;
- ondulato.
Per ora, lo stile di decorazione del testo funziona solo in Firefox, ecco uno screenshot.
Descrizione
Aggiunge la decorazione del testo sotto forma di sottolineatura, barratura, linea sopra il testo e lampeggio. È possibile applicare più stili contemporaneamente elencando i valori separati da spazi.
Sintassi
decorazione del testo: [blink || passante || sopra || sottolineato] | nessuno | ereditare
I valori
lampeggio Imposta il testo lampeggiante. Tale testo periodicamente, circa una volta al secondo, scompare, per poi riapparire nello stesso punto. Questo valore è attualmente deprecato dai browser ed è deprecato in CSS3; si consiglia invece l'animazione. line-through Crea testo barrato (esempio). overline La linea va sopra il testo (esempio). sottolineato Imposta il testo sottolineato (esempio). nessuno Annulla tutti gli effetti, inclusa la sottolineatura predefinita per i collegamenti. inherit Il valore viene ereditato dal genitore.HTML5 CSS2.1 IE Cr Op Sa Fx
Attacco strategico
Modello oggetto
document.getElementById ("elementID") .style.textDecoration
document.getElementById ("elementID") .style.textDecorationBlink
document.getElementById ("elementID") .style.textDecorationLineThrough
document.getElementById ("elementID") .style.textDecorationNone
document.getElementById ("elementID") .style.textDecorationOverLine
document.getElementById ("elementID") .style.textDecorationUnderline
Browser
Internet Explorer fino alla versione 7.0 inclusa non supporta il valore di ereditarietà. La linea ottenuta utilizzando il valore line-through è maggiore in IE7 rispetto ad altri browser; IE8 ha corretto questo bug.
Ci sono tantissimi modi diversi per modellare una sottolineatura. Potresti ricordare l'articolo di Marcin Vicchari "Creazione di sottolineature di collegamento" su Medium. Gli sviluppatori di Medium non stanno cercando di fare qualcosa di folle, vogliono solo creare una bella linea sotto il testo.
Questa è la sottolineatura più semplice, ma è della dimensione corretta e non si sovrappone ai discendenti delle lettere. Ed è decisamente migliore del carattere di sottolineatura predefinito nella maggior parte dei browser. Medium ha faticato a raggiungere il suo stile sul web. Due anni dopo, abbiamo ancora difficoltà a ottenere una bella sottolineatura.
Obiettivi
Cosa c'è di sbagliato nella familiare decorazione del testo: la sottolineatura? Per uno scenario ideale, la sottolineatura dovrebbe fare quanto segue:
- posizionato al di sotto della linea di base;
- saltare elementi remoti;
- modificare il colore, lo spessore e lo stile della linea;
- lavorare con testo multilinea;
- lavorare su qualsiasi sfondo.
Credo che questi siano tutti requisiti ragionevoli, ma per quanto ne so non esiste un modo intuitivo per ottenere ciò con i CSS.
approcci
Quindi quali sono questi diversi modi in cui possiamo implementare la sottolineatura sul web?
Ecco quelli che sto valutando:
- decorazione del testo;
- bordo inferiore;
- scatola-ombra;
- immagine di sfondo;
- filtri SVG;
- Sottolineato.js (tela);
- decorazione-testo- *.
Analizziamo questi metodi uno per uno e parliamo dei pro e dei contro di ciascuno di essi.
decorazione-testo
la decorazione del testo è il modo più ovvio per sottolineare il testo. Applichi una proprietà e basta. Potrebbe sembrare abbastanza decente con caratteri di piccole dimensioni, ma aumenta la dimensione del carattere e questa sottolineatura inizia a sembrare imbarazzante.
Il problema più grande con la decorazione del testo è la mancanza di personalizzazione. Sei limitato al colore e alla dimensione del carattere del testo e non hai un modo cross-browser per cambiarlo. Ne parleremo in modo più dettagliato.
- facile da usare;
- posizionato al di sotto della linea di base;
- salta i discensori per impostazione predefinita in Safari e iOS;
- sottolinea il testo multilinea;
- funziona su qualsiasi sfondo.
- non salta i discendenti in tutti gli altri browser;
- non consente di modificare il colore, il peso o lo stile della linea.
bordo-fondo
border-bottom offre un buon equilibrio tra semplicità e personalizzazione. Questo approccio utilizza la buona vecchia proprietà del bordo CSS, il che significa che puoi facilmente modificare il colore, il peso e lo stile.
Ecco come appare il bordo inferiore sugli elementi in linea.
Lo svantaggio principale è la distanza della linea di sottolineatura dal testo, è interamente al di sotto dei discendenti. Puoi risolvere questo problema impostando gli elementi su inline-block e diminuendo l'altezza della linea, ma perderai la possibilità di avvolgere il testo. Buono per punti singoli, ma non utile altrove.
Inoltre, puoi usare text-shadow per sovrapporre parte della linea accanto ai discendenti, imitando questo con lo stesso colore dello sfondo. Cioè, questa tecnica funziona solo su un semplice sfondo monocromatico, senza sfumature, motivi o immagini.
Al momento, stiamo già utilizzando fino a quattro proprietà per lo stile di una linea. Questo è molto più lavoro della semplice aggiunta di decorazioni di testo.
- può saltare i callout usando text-shadow;
- può cambiare colore, spessore e stile della linea;
- consente di utilizzare transizioni e animazioni di colore e peso;
- funziona con testo multilinea a meno che non venga applicato il blocco in linea;
- funziona su qualsiasi sfondo purché non utilizzi text-shadow.
- posizionato troppo in basso e mosso in modo difficile;
- molte proprietà aggiuntive vengono utilizzate per funzionare correttamente;
- quando si utilizza text-shadow, la selezione del testo sembra brutta.
scatola-ombra
box-shadow disegna un discendente con due ombre interne: una crea un rettangolo e l'altra ne nasconde una parte. Ciò significa che è necessario uno sfondo a tinta unita affinché funzioni.
Puoi usare lo stesso trucco dell'ombra del testo per riempire gli spazi tra la sottolineatura e i discendenti. Ma se il colore della sottolineatura è diverso dal colore del testo - o è abbastanza sottile, la linea non entrerà in collisione con i discendenti come fa con la decorazione del testo.
- consente di modificare il colore e lo spessore della linea;
- funziona con testo multilinea.
- non consente di modificare lo stile di sottolineatura;
- non funziona su nessuno sfondo.
immagine di sfondo
Il metodo dell'immagine di sfondo è il più vicino al nostro desiderio e presenta il minor numero di inconvenienti. L'idea è di utilizzare il gradiente lineare e la posizione dello sfondo per creare un'immagine che si ripete sotto le righe di testo.
Affinché questo approccio funzioni, il testo deve essere nella visualizzazione standard: modalità in linea; ...
L'opzione successiva fa a meno del gradiente lineare, per gli effetti puoi aggiungere la tua immagine di sfondo.
- può essere posizionato sotto la linea di base;
- può saltare i callout a causa di text-shadow;
- funziona con immagini personalizzate;
- avvolge più righe di testo;
- funziona su qualsiasi sfondo, purché non applichi text-shadow.
- la dimensione dell'immagine può variare a seconda della risoluzione dello schermo, del browser e dell'ingrandimento.
Filtri SVG
Ho giocato molto con questo metodo. Puoi creare un filtro in linea SVG che disegna una linea e quindi espande il testo per mascherare la parte della linea che vogliamo rendere trasparente. Quindi puoi dare al filtro un id e collegarlo ad esso in CSS come filter: url ("# svg-underline").
Il vantaggio di questo approccio è che la trasparenza si ottiene senza applicare l'ombra del testo, ovvero saltiamo i callout su qualsiasi sfondo, inclusi gradienti e immagini di sfondo! Funziona solo su una singola riga di testo, tienilo a mente.
Ecco come appare in Chrome e Firefox:
Il supporto di IE, Edge e Safari è problematico. È difficile testare il supporto del filtro SVG in CSS. Puoi usare la direttiva @supports con filter, ma questo controllerà solo se il riferimento al filtro funziona, ma non il filtro stesso. I miei tentativi si sono conclusi con una triste determinazione delle capacità del browser, questa è una notevole lacuna del metodo.
- può essere posizionato sotto la linea di base;
- può saltare elementi remoti;
- permette di modificare il colore, lo spessore e lo stile della linea;
- funziona su qualsiasi sfondo.
- non funziona con il testo multilinea;
- non funziona in IE, Edge e Safari, ma puoi usare la decorazione del testo come fallback, sembra decente in Safari.
Sottolineato.js (tela)
Underline.js è affascinante. Trovo impressionante ciò che Wentin Zhang ha fatto con le sue abilità JavaScript e la sua attenzione ai dettagli. Se non hai visto la demo tecnica di Underline.js, smetti di leggere e prenditi un minuto del tuo tempo. C'è anche il suo discorso di nove minuti su come funziona, ma lo descriverò brevemente: la sottolineatura è disegnata usando elementi
Nonostante il nome accattivante, Underline.js è solo una demo tecnica. Ciò significa che non puoi semplicemente prendere questo e collegarlo al tuo progetto senza modificare il codice.
Ho deciso di menzionarlo come prova del concetto che
Nuove proprietà di decorazione del testo
Ricorderai che ho promesso di parlare di più della decorazione del testo. È giunto il momento.
Questa proprietà funziona benissimo, ma puoi aggiungere alcune proprietà sperimentali per personalizzare l'aspetto della sottolineatura.
- colore-decorazione-testo
- testo-decorazione-skip
- stile di decorazione del testo
Ma non essere troppo felice... Supporto del browser, come sempre. Così è andata.
colore-decorazione-testo
La proprietà text-decoration-color ti permette di cambiare il colore della sottolineatura separatamente dal colore del testo. Il supporto per questa proprietà è migliore di quanto ci si potrebbe aspettare: funziona in Firefox e ha il prefisso in Safari. Ecco il trucco: se hai callout, Safari metterà una sottolineatura sul testo.
testo-decorazione-skip
La proprietà text-decoration-skip consente di saltare i discendenti nel testo sottolineato.
Questa proprietà non è standard e attualmente funziona solo in Safari, con il prefisso -webkit-. Safari attiva questa proprietà per impostazione predefinita, quindi i callout non sono sempre barrati.
Se stai utilizzando Normalize, tieni presente che le versioni recenti disabilitano questa proprietà per motivi di comportamento coerente del browser. E se vuoi che la sottolineatura non influisca sui discensori, devi attivarla manualmente.
stile di decorazione del testo
La proprietà stile decorazione del testo offre le stesse capacità di stile della proprietà stile bordo, con l'aggiunta dello stile ondulato.
Ecco un elenco dei valori disponibili:
- tratteggiato
- punteggiato
- Doppio
- solido
Attualmente la proprietà in stile decorazione del testo funziona solo in Firefox, ecco uno screenshot:
Che cosa manca
La serie di proprietà text-decoration- * è molto più intuitiva da usare rispetto al resto delle proprietà CSS per lo stile di sottolineatura. Ma se guardi più da vicino, non ci sono abbastanza modi per impostare lo spessore o la posizione della linea per soddisfare le nostre esigenze.
Dopo una piccola ricerca, ho trovato un altro paio di proprietà:
- larghezza-sottolineatura-testo
- posizione-sottolineatura-testo
Sembrano essere le prime bozze di CSS, ma non sono mai state implementate nei browser per mancanza di interesse.
conclusioni
Allora qual è il modo migliore per sottolineare?
Per il testo piccolo, consiglio di utilizzare la decorazione del testo con l'aggiunta ottimistica di saltare la decorazione del testo. Sembra un po' insipido nella maggior parte dei browser, ma i browser hanno sempre avuto sottolineature e le persone semplicemente non prestano attenzione. Inoltre c'è sempre la possibilità che con la pazienza, questa sottolineatura un giorno avrà un bell'aspetto senza che tu debba cambiare nulla, come faranno i browser.
Per il corpo del testo, ha senso usare l'immagine di sfondo. Questo approccio funziona, sembra fantastico e ci sono mixin Sass per questo. In linea di principio, puoi omettere l'ombra del testo se la sottolineatura è sottile o di colore diverso dal testo.
Per le singole righe di testo, utilizzare border-bottom insieme a qualsiasi proprietà aggiuntiva.
E se hai bisogno di saltare i discendenti contro un gradiente o un'immagine, prova a utilizzare i filtri SVG. Oppure evita di usare i caratteri di sottolineatura.
In futuro, con il miglioramento del supporto del browser, l'unica risposta sarà il set di proprietà text-decoration- *.
Consiglio anche di dare un'occhiata all'articolo di Benjamin Woodruff CSS Underlines Suck, che affronta gli stessi problemi.
