10 (altro) trucchi CSS probabilmente trascurati

Ci sono un sacco di frammenti di codice CSS che gli sviluppatori web possono usare per ottenere determinati risultati, e poi ci sono trucchi CSS che puoi usare per cose come allineare il contenuto verticalmente. Dato che i CSS sono un'entità in continua evoluzione, più e più volte ci imbattiamo in fantastici trucchi CSS che sono divertenti da sapere.

Nel post di oggi, ti sto presentando Altri 10 attributi e trucchi CSS che potresti non sapere.

1. Scrivi in ​​verticale

C'è un attributo CSS chiamato writing-mode che accetta uno di questi tre valori; orizzontale-tb, verticale-rl e verticale-lr.

orizzontale-tb è l'impostazione predefinita e causa il tipico flusso di testo orizzontale da sinistra a destra in un elemento.

Il verticale-* i valori sono comunque per il flusso verticale dei blocchi, facendo sì che il testo venga scritto dall'alto verso il basso dai browser. Nel verticale-rl, nuove linee vengono aggiunte alla sinistra delle precedenti e viceversa per verticale-lr.

Questo è utile per visualizzazione di lingue come cinese e giapponese che sono tipicamente scritte dall'alto verso il basso e anche per quando si desidera visualizzare il testo in verticale per salvare lo spazio orizzontale, come nelle intestazioni delle tabelle.

Nota: Se si desidera controllare le direzioni delle singole lettere, è possibile utilizzare l'orientamento del testo ruotandole verticalmente o lateralmente, come desiderato.

 -modalità di scrittura webkit: verticale-rl; -ms-writing-mode: tb-rl; modalità di scrittura: verticale-rl; 

2. Riutilizzare il valore del colore

La parola chiave currentColor porta il valore di colore attributo e può essere utilizzato in altri attributi che accettano valori di colore come sfondo.

div background: linear-gradient (90deg, currentColor 50%, black 50%); ... color: # FFD700; / * currentColor è # FFD700 * / 

3. fondere sfondi

Un elemento può avere più di uno sfondo (un colore di sfondo e più immagini di sfondo). Il background-blend-mode li mescola tutti insieme in base alla modalità di fusione specificata. Ci sono un totale di 16 modalità di fusione al momento.

background-blend-mode: difference; 

4. Elementi di fusione

mix-blend-mode unisce i contenuti e gli sfondi di elementi sovrapposti. Chrome non sembra supportare tutte le modalità, anche se Firefox lo fa.

mix-blend-mode: color; 

Ho preso due elementi, un img mostrando l'immagine di una rosa e a campata con uno sfondo grafico, li impila e applica alcune modalità mix-blend.

5. Ignora eventi puntatore

È possibile rendere un elemento ignaro di qualsiasi evento puntatore utilizzando un singolo attributo chiamato pointer-events. Dando pointer-events il valore di nessuna in un elemento, ciò impedisce di essere un bersaglio per gli eventi del puntatore. Supporto IE11 + incluso.

Nella demo seguente, c'è una casella di controllo sotto due immagini impilate una sopra l'altra. Entrambe le immagini portano pointer-events: none, permettendoci di cliccare sulla casella di controllo sepolta sotto di loro. In base allo stato selezionato della casella di controllo, viene visualizzata l'immagine desiderata mentre l'altra è nascosta.

6. Decorare le scatole divise

Tipicamente quando una casella è divisa (come quando un elemento in linea assiste alle interruzioni di riga), i bordi delle parti divise sono privi di qualsiasi stile di casella e sembrano affettati. Per evitare ciò, puoi usare box-decorazione-break: clone.

Ora per seguire questo con un esempio e un promemoria "Natale all'orizzonte", ecco un elenco di Babbo Natale Renna tutto digitato in un unico campata! Ho! Ho! Ho!

Nota: Anche se il moderno IE supporta box-decorazione-break, al bordo del bordo della porzione divisa, il rendering non è liscio e lo sfondo appare affettato. Ma rende il rendering box-ombra bene, ed è per questo che ho usato le ombre delle caselle sia per il bordo che per lo sfondo. C'è anche un'assenza di imbottitura orizzontale nei bordi di IE che potresti voler riempire di spazi.

7. Comprimi elementi tabella

visibilità: collasso è un attributo creato solo per gli elementi della tabella, come righe e colonne. Se usato su qualsiasi altra cosa si comporterà visibilità: nascosta. Chrome lo considera come nascosto anche per elementi da tavolo.

Quando assegni visibilità: collasso su un elemento di una tabella, è nascosto e il suo spazio è riempito dal contenuto vicino, come il modo in cui si comporterebbe con l'uso display: none anziché.

Ma a differenza display: none che modifica il layout della tabella dopo aver rimosso lo spazio, il layout rimane lo stesso in Visibilità: crollo. Puoi vedere come funziona in modo più dettagliato qui.

8. Creare colonne

Puoi creare un layout di colonna per i tuoi contenuti usando il colonne attributo. Ti consente di specificare quante colonne (column-count) e in che modo ciascuna larghezza di colonna (larghezza della colonna) devono essere resi in un elemento.

Se il contenuto è diverso dal testo, ad esempio un'immagine, dovrai tenere presente la sua larghezza in base alla colonna. Per il seguente esempio, ho solo usato column-count per specificare quante colonne voglio.

-webkit-column-count: 2; -moz-column-count: 2; numero di colonne: 2; 

9. Rendi gli elementi ridimensionabili

Un elemento può essere reso ridimensionabile (verticalmente, orizzontalmente o entrambi) con l'attributo CSS3 ridimensionare . La resettabilità in a textarea può essere disabilitato usando lo stesso.

ridimensiona: verticale; ridimensiona: orizzontale; ridimensiona: entrambi; ridimensionamento: nessuno; 

10. Creare modelli

Possono esserci più gradienti CSS3 (sia lineari che radiali) per un singolo elemento e possono essere impilati l'uno sull'altro per creare motivi. Questo ci permette di crea degli sfondi piacevoli per gli elementi senza utilizzare immagini esterne. Farlo funzionare potrebbe richiedere un po 'di pratica.