15 utili trucchi CSS che potresti avere trascurato

Se sei stato uno sviluppatore web frontend per un po ', c'è un'alta probabilità che tu abbia avuto un momento in cui stavi cercando di scoprire come codificare qualcosa e realizzato dopo un po' di googling, che “c'è CSS per quello”. Se non l'avessi fatto, beh, lo stai facendo.

Questo post è una raccolta di tali codici CSS, che possono darti caratteristiche come trasformare un elemento appiccicoso, darti funzionalità di sottolineatura della linea tratteggiata, fluire il testo della tua pagina in una forma speciale o ottenere un effetto di parallasse. Alcuni di questi sono ampiamente supportati mentre altri sono in via di supporto da parte di tutti i browser.

1. Numerazione delle intestazioni e delle sottovoci

   Supponiamo che tu abbia una serie di intestazioni e sottotitoli nel tuo documento e li stai numerando manualmente o tramite uno script. Invece, puoi usare i contatori CSS per farlo. C'è già un post approfondito su di esso qui. E dal momento che è da una specifica CSS2, puoi scommettere che è supportato da tutti i browser, tranne forse IE 6.

2. Spice Up Plain Underlines

   A volte vogliamo sottolineare con una bella linea tratteggiata o tratteggiata invece di una solida. Dal momento che non esiste un'opzione per questo, ci accontentiamo border-bottom. Ma border-bottom non è una buona soluzione se il testo che stai sottolineando include.

   I CSS3 non hanno specificato una ma tre nuove proprietà per la decorazione del testo text-decoration-color, text-decoration-line, e text-decoration-style che può essere abbreviato nel buon vecchio text-decoration.

   Puoi usarli per sottolineare la sottolineatura, la sovrapposizione, persino per far lampeggiare il testo e altro ancora. A partire da aprile 2015 solo Firefox supporta questa proprietà, ma è possibile abilitare “caratteristiche della piattaforma web sperimentale” per usarlo su Chrome.

3. Citando un preventivo

   Prima di tutto, non c'è bisogno di preoccuparsi di digitare le virgolette ricurve corrette per le citazioni brevi perché c'è un codice HTML per questo: il tag che indica quotazioni in linea.

   Il tag si occupa anche di quotare le citazioni interne con virgolette singole. Quindi, dov'è il “c'è "CSS" per questo” momento in questo?

   Diciamo che non vuoi le virgolette doppie predefinite o hai più di un livello di virgolette nidificate, puoi definire le tue preferenze di quotazione per l'elemento preventivo con CSS usando il CSS2 citazioni proprietà.

4. Gestione delle tabelle indisciplinate

   Potresti esserti imbattuto in un grande tavolo con dimensioni di contenuto variabili per cella che si rifiuta di rimanere entro una larghezza che hai specificato, indipendentemente da ciò che provi. Domare quel tavolo con il table-layout proprietà (per altezza colonna uguale, segui questo link).

   Per essere specifici, la correzione è nel disposizione della tabella: fisso; valore. Quando assegni un layout fisso per la tabella, la tabella e la larghezza della cella sono determinate dalla larghezza della tabella o della prima riga di celle (che può essere definita dall'utente) e non dal contenuto. Questo è supportato da tutti i browser.

5. Rendilo appiccicoso

   Gli elementi appiccicosi sono elementi in una pagina che non verrà spostata fuori dalla vista. In altre parole, si attacca a un'area visibile (viewport o casella a scorrimento). Puoi crearlo usando i CSS posizione: appiccicosa;.

   Agiscono come elementi relativamente posizionati prima di qualsiasi scorrimento e successivamente come elementi fissi una volta raggiunta una soglia di scorrimento. Per adesso, solo Firefox lo supporta.

6. Ottieni il tuo testo in forma

   Vuoi che il testo sulla tua pagina si pieghi bene su qualche immagine che hai visualizzato accanto ad essa? Puoi provare Forme CSS. Per implementare le forme CSS, possiamo fare uso di tre proprietà forma-fuori, Forma margine e Forma-image-soglia. A partire da aprile 2015, CSS Shapes è supportato da browser webkit.

7. Campi obbligatori

   Se hai un modulo c'è un'alta probabilità che alcuni campi siano richiesti mentre altri no. Dovrai far sapere agli utenti quale è quale. Il CSS per questo è :necessario :opzionale pseudo classi. Tutti i browser moderni li supportano.

8. Schizzinoso con i colori

   Se non ti piace un determinato colore, come il blu, possiamo colorare l'area selezionata con un altro colore e il ::selezione pseudo element è il CSS per questo. Questo è supportato da tutti i browser moderni.

9. L'ho controllato??

   In una situazione in cui è stata selezionata una casella di controllo, sarebbe bello avere un'altra indicazione a parte il piccolo segno di spunta all'interno della casella di controllo predefinita per indicare che l'elemento è stato controllato.

   C'è CSS per ciò che sfrutta il legame tra i fratelli immediati, due elementi affiancati. Il CSS ha un selettore fratello adiacente denotato dal segno più + firmare e possiamo usarlo per selezionare l'etichetta accanto alla casella di controllo. Ma per quanto riguarda il targeting della casella di controllo selezionata prima? C'è la : selezionata pseudo classe per quello.

10. Come un libro di favole

    Quindi, non sarebbe bello se il primo “O” nel “C'era una volta” sembra carino? Possiamo farlo sembrare carino, dopotutto ci sono i CSS per questo. Ecco dove ::prima lettera l'elemento pseudo viene in soccorso. Mira alla prima lettera della prima riga dell'elemento mirato. Per saperne di più qui.

11. Vuoi saperne di più?

    Un elemento può avere classe X o dati Y o qualche altro valore per un attributo. Se dovessimo mai visualizzare un tale valore di attributo di un elemento vicino, possiamo usare il contenuti: attr (X). Recupera il valore dell'attributo X dell'elemento, quindi possiamo mostrarlo accanto all'elemento.

12. Un po 'di più a sinistra

    Elementi di centraggio per i principianti di CSS è piuttosto un'impresa. Elementi diversi richiedono differenti set di proprietà CSS per centrarli. Analizzeremo un esempio tra tutti quelli disponibili sul World Wide Web, in modo che tu possa ricordare ancora una volta che esiste un CSS per centrare le cose.

13. Divulgare il formato file dei collegamenti

    Hai mai visto una piccola immagine vicino a un link che indica che cos'è quel collegamento? Un PDF? o un DOC? Sì, c'è CSS per farlo. Il contenuti: url () è ciò che useremo per visualizzare l'immagine dietro i collegamenti.

14. Trigger Parallax Effect

    L'effetto di parallasse è un effetto usato per descrivere il movimento apparentemente lento dello sfondo rispetto al primo piano. Questo effetto è popolare nei siti Web che implementano lo scrolling della parallasse. Ci sono diversi modi per implementarlo, l'esempio qui sotto funziona con Firefox con background-attachment: fixed;.

15. Il potere delle animazioni CSS

    Probabilmente non è un enorme “c'è CSS per quello” momento, perché tutti probabilmente sono a conoscenza delle animazioni CSS ormai. Ma un piccolo promemoria non è dannoso. Ci sono molti usi per le animazioni CSS ma qui ce n'è uno per un semplice esercizio di colorazione.

Ora Leggi: 50 utili snippet CSS che ogni designer dovrebbe avere