Impara come usare CSS crearefantasia cappucci iniziali per i tuoi paragrafi. C'è anche una semplice tecnica di sostituzione dell'immagine per utilizzare un'immagine grafica per il tuo cap iniziale.
Stili di base delle iniziali maiuscole
Ci sono tre stili di base di cappucci iniziali nei documenti:
- Sollevato - la più comune, dove la prima lettera è più grande e sulla stessa riga del testo corrente.
- caduto - anche abbastanza comune, dove la prima lettera è più grande e scende sotto la prima riga di testo. Il testo seguente fluttua intorno ad esso.
- Adiacente - dove la prima lettera si trova in una colonna accanto al resto del testo. Questo è più comune nella stampa che nel web design.
Le iniziali maiuscole o capolettera sono molto familiari. Sono un ottimo modo per vestire periodi di testo altrimenti lunghi e noiosi. E con la proprietà CSS: first-letter, puoi facilmente definire come rendere più fantasiose le tue prime lettere.
Crea un semplice cap iniziale
Tutto quello che devi fare per creare un semplice cap iniziale rialzato è ingrandire la prima lettera del tuo paragrafo con lo pseudo-elemento della prima lettera:
p: prima lettera { dimensione del carattere: 3em; }
Ma molti browser vedi che la prima lettera è più grande del resto del testo sulla riga, quindi rendono l'interlinea uguale a ciò che avrebbe senso per quella prima lettera, non per il resto della riga. Fortunatamente, questo è facile da risolvere con lo pseudo-elemento della prima riga e la proprietà line-height:
p: prima lettera { dimensione del carattere: 3em; }
p: first-line { line-height: 1em; }
Gioca con l'altezza della linea all'interno del tuo documento finché non trovi la dimensione giusta per il tuo testo.
Gioca con il tuo limite iniziale
Una volta capito come creare un berretto iniziale, puoi vestirlo con abiti eleganti per farlo risaltare. Gioca con i colori, i colori di sfondo, i bordi o qualsiasi cosa colpisca la tua fantasia. Uno stile abbastanza semplice è invertire i colori del carattere e il colore di sfondo solo per la prima lettera:
p: prima lettera {
dimensione del carattere: 300%;
colore di sfondo: #000;
colore: #fff;
}
p: first-line { line-height: 100%; }
Un altro trucco è centrare la prima linea. Questo può essere complicato con i CSS, poiché il centro della riga di testo può essere diverso se il tuo layout è flessibile. Ma con alcuni giochi con i valori, puoi far rientrare la tua prima riga abbastanza da far sembrare la prima lettera nel mezzo. Basta giocare con la percentuale sul rientro del testo del paragrafo finché non sembra giusto:
p: prima lettera {
dimensione del carattere: 300%;
colore di sfondo: #000;
colore: #fff;
}
p: first-line { line-height: 100%; }
p { rientro del testo: 45%; }
Le maiuscole iniziali adiacenti sono difficili con i CSS
I cappucci iniziali adiacenti possono essere difficili con i CSS perché i diversi browser visualizzano i caratteri in modo diverso. L'idea alla base della creazione di un limite adiacente in CSS è utilizzare la proprietà text-indent sulla prima riga per spingerlo fuori (a sinistra) un valore negativo. Dovrai anche modificare di una certa quantità il margine sinistro di quel paragrafo. Gioca con questi numeri finché il paragrafo non sembra buono.
p {
rientro del testo: -2.5em;
margine sinistro: 3em;
}
p: prima lettera { dimensione del carattere: 3em; }
p: first-line { line-height: 100%; }
Ottenere tappi iniziali davvero fantasiosi
Il modo migliore per creare un berretto iniziale di fantasia è cambiare il carattere in una famiglia di caratteri più decorativa. Se usi a serie di caratteri seguito da a carattere generico, ti aiuterà a garantire che il tuo limite iniziale venga mostrato bene in modo che i tuoi clienti possano vederlo, senza entrare in problemi di accessibilità e usabilità.
p: prima lettera {
dimensione del carattere: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", corsivo;
}
p: first-line { line-height: 100%; }
E, come al solito, puoi mettere insieme tutti questi suggerimenti per creare un limite iniziale che aggiunga stile al tuo paragrafo.
Utilizzo di un Cap iniziale grafico
Se, dopo tutto ciò, non ti piace ancora come appaiono i tuoi cappucci iniziali sulla pagina, puoi ricorrere alla grafica per ottenere l'esatto effetto che stai cercando. Ma prima di decidere di passare direttamente alla grafica, dovresti essere consapevole degli svantaggi di questo metodo:
- I clienti senza immagini non vedranno il limite iniziale e potrebbero non vedere il testo nascosto che l'immagine sta sostituendo. Ciò può rendere il paragrafo inaccessibile o, nella migliore delle ipotesi, difficile da leggere.
- Le immagini aumentano sempre il tempo di download di una pagina. Se hai molti limiti iniziali, puoi aumentare significativamente il tempo di download per qualcosa che molte persone riterrebbero insignificante.
- Alcuni browser mostreranno sia la prima lettera nascosta che l'immagine che può far sembrare strano il testo del paragrafo.
- È molto difficile automatizzare questa opzione, poiché devi sapere esattamente qual è la prima lettera in modo da utilizzare la grafica corretta. Quindi, ogni volta che il paragrafo viene modificato, potrebbe essere necessario creare una nuova grafica.
Per prima cosa, devi creare la grafica della prima lettera. Abbiamo utilizzato Photoshop per creare la lettera L con il carattere "Edwardian Script ITC". L'abbiamo reso enorme - 300 pt di dimensione. Abbiamo quindi ritagliato l'immagine al minimo attorno alla lettera e abbiamo annotato la larghezza e l'altezza dell'immagine.
Quindi abbiamo creato una classe "capL" per il nostro paragrafo. Qui è dove definiamo quale immagine usare, l'interlinea (line-height) e così via.
È necessario utilizzare la larghezza e l'altezza dell'immagine per impostare il rientro del testo e il riempimento superiore del paragrafo. Per la nostra immagine L, avevamo bisogno di 95 px di rientro e 72 px di riempimento.
p.capL {
altezza della linea: 1em;
immagine di sfondo: url (capL.gif);
background-repeat: no-repeat;
rientro del testo: 95px;
imbottitura: 72px;
}
Ma non è tutto. Se lo lasci lì, la prima lettera verrà duplicata nel paragrafo, prima con la grafica, poi nel testo. Quindi abbiamo aggiunto uno span attorno a quel primo elemento con la classe "iniziale" e abbiamo detto al browser di non visualizzare quella lettera:
span.initial { display: none; }
Il grafico viene quindi visualizzato correttamente. Puoi giocare con il rientro del testo sul paragrafo per ottenere il testo rannicchiato fino alla lettera, comunque desideri che venga visualizzato.