Homepage » Coding » Paragrafo Dropcap con elementi di prima e di prima lettera del CSS

    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.