Paragrafo Dropcap con elementi di prima e di prima lettera del CSS

Esistono alcuni selettori CSS o proprietà che a mio avviso vengono raramente utilizzati in natura, ma in realtà esistono già dai giorni del CSS1; alcuni di essi includono il :prima linea e :prima lettera pesudo elementi.

Come usare?

Questi pseudo-elementi funzionano fondamentalmente come i loro fratelli -: prima e dopo - e penso che siano anche abbastanza semplici. Il :prima lettera punterà alla prima lettera o carattere di un elemento selezionato, questo pseudo-elemento è comunemente usato per creare un effetto tipografico come un capolettera. Ecco come è fatto.

 p: first-letter font-size: 50px;  

Questo codice risulta nella seguente presentazione.

Alcune cose dovrebbero essere notate, tuttavia, questo effetto si applica solo quando il primo carattere non è preceduto da un altro elemento, ad esempio un'immagine. Inoltre, quando abbiamo alcuni degli stessi elementi mirati in una riga, anche tutti loro saranno interessati.

Inoltre, in termini di :prima linea, Questo pseudo-elemento punterà alla prima linea dell'elemento mirato, questo esempio sotto mostra come siamo in grassetto nella prima riga del paragrafo.

 p: first-line font-weight: bold;  

Come il codice precedente di :prima lettera, questo influenzerà anche tutte le prime linee negli elementi di paragrafo presenti nella pagina.

Quindi, in casi reali, quando in genere vogliamo aggiungere il capolettera o modificare la prima riga solo nel primo paragrafo dobbiamo essere più specifici - aggiungendo un attributo di classe extra o applicando questi pseudo-elementi insieme a :Primogenito o : First-of-type selettore, in questo modo.

 p: first-child: first-letter font-size: 50px;  p: first-child: first-line font-weight: bold;  

Eccoci, il paragrafo interessato è ora solo il primo.

Pseudo-elementi sul lavoro

Bene, proviamo ora a progettare un aspetto migliore di un paragrafo utilizzando gli pseudo-elementi. Ma prima di iniziare abbiamo bisogno di un font speciale per il nostro capolettera e qui è la mia scelta: Hominis di Paul Lloyd. Quindi definiamo una nuova famiglia di caratteri nel foglio di stile, come segue.

 @ font-face font-family: 'HominisNormal'; src: url ('font / HOMINIS-webfont.eot'); src: formato url ('font / HOMINIS-webfont.eot? #iefix') ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') formato ('woff'), url ('font / HOMINIS-webfont.ttf ') format (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); font-weight: normal; stile carattere: normale;  

Successivamente, impostiamo la famiglia di font predefinita per i paragrafi.

 p color: # 555; famiglia di font: 'Georgia', Times, serif; altezza della linea: 24px;  

In questo esempio, useremo il :Primogenito selettore per indirizzare il primo paragrafo e applicare stili decorativi per renderlo più prominente:

 p: first-child padding: 30px; border-left: 5px solid # 7f7664; background-color: # f5f4f2; line-height: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); posizione: relativa;  

Quindi, aggiungiamo un capolettera usando :prima lettera, ingrandire la dimensione del font e assegnargli una nuova famiglia di font;

 p: first-child: first-letter font-size: 72px; float: a sinistra; imbottitura: 10px; altezza: 64 px; font-family: 'HominisNormal'; background-color: # 7F7664; margin-right: 10px; colore bianco; border-radius: 5px; altezza della linea: 70 px;  

Sottolineeremo anche la prima riga con :prima linea, così.

 p: first-child: first-line font-weight: bold; font-size: 24px; colore: # 7f7664;  

Infine, vogliamo aggiungere un attributo decorativo al primo paragrafo con una graffetta :dopo pseudo-elemento.

 p: first-child: after background: url ("... /images/paper-clip.png") no-repeat scroll 0 0 trasparente; contenuto: ""; display: blocco in linea; altezza: 100 px; posizione: assoluta; a destra: -5px; inizio: -35px; larghezza: 100 px;  

Questo è tutto il codice di cui abbiamo bisogno, ora il nostro paragrafo dovrebbe apparire molto meglio;

Puoi anche vedere la demo dal vivo qui sotto:

• Visualizza la demo
• Scarica fonte

Pensiero finale

Come accennato in precedenza in questo post, questi pseudo-elementi, in particolare il :prima lettera e :prima linea è stato incluso dal CSS1, quindi sono supportati anche in Internet Explorer 8 in precedenza.

Eppure, per quanto ne so, non sono così ampiamente implementate in natura. Quindi, speriamo che questo tutorial possa in qualche modo ispirarti a provare queste funzionalità CSS sul tuo sito web.