Comprensione dello pseudo-elemento prima e dopo
Il CSS (Cascading Style Sheet) è principalmente destinato all'applicazione di stili al markup HTML, tuttavia in alcuni casi l'aggiunta di markup extra al documento è ridondante o impossibile, in realtà esiste una funzionalità CSS che ci consente di aggiungere markup extra senza interrompere il vero documento, cioè il pseudo-elementi.
Hai sentito parlare di questo termine, specialmente quando hai seguito alcuni dei nostri tutorial.
Ci sono in realtà alcuni membri della famiglia CSS che sono classificati come pseudo-elementi come il :prima linea, :prima lettera, ::selezione, :prima e :dopo. Ma, per questo articolo, limiteremo la nostra copertura solo al :prima e :dopo, “pseudo-elementi” qui riferirò specificamente a entrambi. Analizzeremo questo particolare argomento dalle basi.
La sintassi e il supporto del browser
Il pseudo-elementi sono stati in giro da allora CSS1, ma il :prima e :dopo che stiamo discutendo qui sono stati rilasciati in CSS 2.1. All'inizio, il pseudo-elementi usa i due punti per la sintassi, poi come il web si è evoluto, in CSS3 pseudo-elementi sono stati rivisti per usare il doppio colon - diventando ::prima & ::dopo - per distinguerlo con pseudo-classi (vale a dire. : hover, :attivo, e così via).
Tuttavia, indipendentemente dal fatto che si utilizzi il formato a due punti o due punti, i browser riconosceranno comunque. E dal momento che Internet Explorer 8 supporta solo il formato a due punti, è più sicuro utilizzare il singolo punto se si desidera una maggiore compatibilità con il browser.
Che cosa fa?
In breve, il pseudo-elementi inserirà un elemento in più prima o dopo l'elemento del contenuto, quindi quando li aggiungiamo entrambi, sono tecnicamente uguali, con il seguente markup.
:prima Questo è il contenuto principale. :dopo
Ma quegli elementi non sono effettivamente generati sul documento. Sono ancora visibili in superficie ma non li troverai sulla fonte del documento, quindi praticamente lo sono falso elementi.
Usando pseudo-elementi
utilizzando pseudo-elementi è relativamente facile; la seguente sintassi selettore: prima aggiungerà un elemento prima il selettore del contenuto mentre questa sintassi selettore: dopo aggiungerà dopo di esso, e per aggiungere un contenuto al loro interno possiamo usare il soddisfare proprietà.
Ad esempio, il frammento di seguito aggiungerà un virgolette prima e dopo il blockquote.
blockquote: before content: open-quote; blockquote: after content: close-quote;
Pseudo-elementi stilistici
Nonostante sia un elemento falso, il pseudo-elementi in realtà si comporta come un “vero” elemento; siamo in grado di aggiungere qualsiasi dichiarazione di stile su di essi, come cambiare il colore, aggiungere lo sfondo, regolare la dimensione del carattere, allineare il testo al suo interno e così via.
blockquote: before content: open-quote; font-size: 24pt; allineamento del testo: centro; altezza della linea: 42 px; colore: #fff; sfondo: #ddd; float: a sinistra; posizione: relativa; superiore: 30 px; blockquote: after content: close-quote; font-size: 24pt; allineamento del testo: centro; altezza della linea: 42 px; colore: #fff; sfondo: #ddd; float: giusto; posizione: relativa; fondo: 40px;
Specifica la dimensione
Gli elementi generati sono di default un elemento a livello di riga, quindi quando stiamo per specificare l'altezza e la larghezza, dobbiamo prima definirlo come un elemento di blocco usando il blocco di visualizzazione dichiarazione.
blockquote: before content: open-quote; font-size: 24pt; allineamento del testo: centro; altezza della linea: 42 px; colore: #fff; sfondo: #ddd; float: a sinistra; posizione: relativa; superiore: 30 px; border-radius: 25px; / ** definirlo come un elemento di blocco ** / display: block; altezza: 25px; larghezza: 25px; blockquote: after content: close-quote; font-size: 24pt; allineamento del testo: centro; altezza della linea: 42 px; colore: #fff; sfondo: #ddd; float: giusto; posizione: relativa; fondo: 40px; border-radius: 25px; / ** definirlo come un elemento di blocco ** / display: block; altezza: 25px; larghezza: 25px;
Allegare l'immagine di sfondo
Possiamo anche sostituire il contenuto con un'immagine anziché solo testo normale. sebbene il soddisfare la proprietà fornisce a url () stringa per inserire un'immagine, ma nella maggior parte dei casi preferisco di gran lunga utilizzare il sfondo proprietà per un maggiore controllo sull'immagine allegata.
blockquote: before content: ""; font-size: 24pt; allineamento del testo: centro; altezza della linea: 42 px; colore: #fff; float: a sinistra; posizione: relativa; superiore: 30 px; border-radius: 25px; background: url (images / quotationmark.png) -3px -3px #ddd; blocco di visualizzazione; altezza: 25px; larghezza: 25px; blockquote: after content: ""; font-size: 24pt; allineamento del testo: centro; altezza della linea: 42 px; colore: #fff; float: giusto; posizione: relativa; fondo: 40px; border-radius: 25px; background: url (images / quotationmark.png) -1px -32px #ddd; blocco di visualizzazione; altezza: 25px; larghezza: 25px;
Tuttavia, come puoi vedere dallo snippet qui sopra, stiamo ancora dichiarando il soddisfare proprietà e questa volta con una stringa vuota. Il soddisfare la proprietà è Un requisito e dovrebbe sempre essere applicato; altrimenti il pseudo-elemento non funzionerà qualsiasi.
Combinazione con pseudo-classi
Anche se sono un tipo diverso di pseudo-, possiamo usare il pseudo-classi insieme a pseudo-elementi insieme in una regola CSS, per esempio, se vogliamo girare il sfondo di virgolette un po 'più scuro quando passiamo il mouse sopra il blockquote.
blockquote: hover: after, blockquote: hover: before background-color: # 555;
Aggiunta dell'effetto di transizione
E possiamo anche applicare il transizione su di loro per creare un grazioso effetto di transizione del colore.
transizione: tutti i 350ms; -o-transizione: tutti i 350ms; -moz-transition: tutti i 350ms; -webkit-transition: tutti i 350ms;
Sfortunatamente, però, l'effetto di transizione sembra funzionare solo nell'ultima versione di Firefox. Si spera che altri browser raggiungano il tempo per consentire l'applicazione della proprietà di transizione pseudo-elementi nel futuro.
- dimostrazione
- Scarica fonte
Più ispirazione
Per ispirarti, abbiamo selezionato tre fantastici esempi che possono darti idee per il tuo web design.
Ombre affascinanti
In questo tutorial Paul Underwood ha spiegato come creare un effetto ombra più realistico e affascinante usando :prima e :dopo pseudo-elementi. Entrambi sono posizionati in modo assoluto e posizionati nella parte posteriore con negativo z-index valore.
Effetto immagine impilata
Usando il pseudo-elementi è anche possibile creare un effetto immagine impilato disordinato solo con una singola immagine sul markup. Il pseudo-elementi è usato per creare un'illusione delle immagini impilate nella parte posteriore dell'immagine reale usando il negativo z-index.
Conclusione
Pseudo elementi è semplicemente “freddo” e alla fine utilizzabile, in pratica abbiamo due elementi bonus per ogni elemento che aggiungiamo senza interferire con la struttura HTML effettiva e quindi trasformandoli in quasi tutto ciò che possiamo mai immaginare.
Ci sono in realtà alcuni miglioramenti per pseudo-elementi che è attualmente in lavorazione, come ad esempio pseudo-elementi di nidificazione div :: before :: before content: "; e più pseudo-elementi div :: before (3) content: "; che ovviamente aprirà molte più possibilità nella pratica del web design in futuro. Mentre vengono implementati nei browser correnti, aspettiamo pazientemente per ora.
