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'è il CSS per questo" . Se non l'avessi fatto, beh, lo farai.

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 che 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. Dato che non esiste un'opzione per questo, ci accontentiamo del border-bottom . Ma border-bottom non è una buona soluzione se il testo che stai sottolineando si avvolge.

   I CSS3 non hanno specificato una ma tre nuove proprietà per la decorazione del text-decoration-color, text-decoration-line text-decoration-style e text-decoration-style che possono essere abbreviate nella buona vecchia decorazione del testo .

   Puoi usarli per mettere in risalto la sottolineatura, la sovrapposizione, persino far lampeggiare il testo e altro ancora. A partire da aprile 2015 solo Firefox supporta questa proprietà, ma puoi abilitare "funzionalità di piattaforma web sperimentali" per utilizzarla su Chrome.

3. Citando un preventivo

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

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

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

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 quella tabella con la proprietà di table-layout della table-layout (per l'altezza della colonna uguale, segui questo link).

   Per essere precisi, la correzione è nel layout 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 su una pagina che non verranno sfogliati. In altre parole, si attacca a un'area visibile (viewport o casella a scorrimento). Puoi crearlo con i CSS usando position: sticky; .

   Agiscono come elementi relativamente posizionati prima di qualsiasi scorrimento e successivamente come elementi fissi una volta raggiunta una soglia di scorrimento. Per ora, 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 le forme CSS . Per implementare le forme CSS, possiamo utilizzare tre proprietà shape-outside, shape-margin e shape-image-threshold . A partire da aprile 2015 CSS Shapes è supportato dai 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 codice CSS per questo è : obbligatorio : pseudo classi opzionali . 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 lo pseudo elemento ::selection è il CSS per quello. 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ù +, e possiamo usarlo per scegliere come target l'etichetta accanto alla casella di controllo. Ma per quanto riguarda il targeting della casella di controllo selezionata prima? C'è la pseudo classe : verificata per quello.

10. Come un libro di favole

    Quindi, non sarebbe bello se la prima "O" di "Once upon a time" fosse carina? Possiamo farlo sembrare carino, dopotutto ci sono i CSS per questo. Qui è dove : lo pseudo elemento della prima lettera viene in soccorso. Mira alla prima lettera della prima riga dell'elemento mirato. Per saperne di più qui.

11. Volete 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 contenuto: 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. Diversi elementi richiedono diversi set di proprietà CSS per centrarli. Analizzeremo un esempio tra i molti 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 del file di 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 contenuto: url () è ciò che useremo per visualizzare l'immagine dietro ai 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 in Firefox con background-attachment: fixed; .

15. Il potere delle animazioni CSS

    Probabilmente non è un enorme "c'è il CSS per questo" momento, perché tutti voi probabilmente siete a conoscenza delle animazioni CSS ormai. Ma un piccolo promemoria non è dannoso. Ci sono molti usi per le animazioni CSS, ma qui è uno per un semplice esercizio di colorazione.

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

8 tecnologie in grado di dare forma a classi future

Cosa riserva il futuro dell'apprendimento ? Come saranno le aule del futuro? Le tecnologie emergenti come il cloud computing, la realtà aumentata (AR) e la stampa 3D stanno aprendo la strada per il futuro dell'istruzione in modi che potremmo non avere ancora visto. Per lo meno, possiamo estrapolare da ciò che queste tecnologie promettenti e prevedere come le scuole le adotteranno nel tempo a venire.T

(Consigli tecnici e di design)

Come aggiungere miniature alle categorie e tag di WordPress

A volte un sito WordPress sarà molto più bello se potessimo visualizzare un'immagine accanto a categorie o tag. Ad esempio, potremmo aggiungere un'immagine sui CSS nella categoria "CSS" o il logo HTML5 nella categoria "HTML" (come mostrato di seguito).Tornato nella versione 2.9

(Consigli tecnici e di design)