Scopri come usare i CSS per creare fantasiose protezioni iniziali per i tuoi paragrafi. C'è anche una semplice tecnica di sostituzione delle immagini per usare un'immagine grafica per il tuo berretto iniziale.
Stili di base dei tappi iniziali
Esistono tre stili di base di maiuscole iniziali nei documenti:
- Sollevato - il più comune, dove la prima lettera è più grande e sulla stessa riga del testo corrente.
- Dropped - anche abbastanza comune, dove la prima lettera è più grande e lasciata cadere sotto la prima riga di testo. Il seguente testo fluttua attorno ad esso.
- Adiacente - dove la prima lettera si trova in una colonna accanto al resto del testo. Questo è più comune nella stampa rispetto al Web design.
I cappucci iniziali o capolettera sono molto familiari. Sono un ottimo modo per mascherare lunghi e noiosi intervalli di testo. E con la proprietà CSS: first-letter, puoi facilmente definire come rendere più elaborate le tue prime lettere.
Crea un cappuccio iniziale semplice
Tutto quello che devi fare per creare un semplice cap iniziale sollevato è quello di rendere la prima lettera del tuo paragrafo più grande con lo pseudo-elemento della prima lettera:
p: first-letter {font-size: 3em; }
Ma molti browser vedono che la prima lettera è più grande del resto del testo sulla linea, quindi rendono il primo uguale a quello che avrebbe senso per quella prima lettera, non il resto della linea. Fortunatamente, questo è facile da risolvere con lo pseudo-elemento di prima linea e la proprietà dell'altezza della linea:
p: first-letter {font-size: 3em; }
p: first-line {line-height: 1em; }
Gioca con l'altezza della linea all'interno del documento fino a trovare la giusta dimensione per il testo.
Gioca con il tuo tappo iniziale
Una volta compreso 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 altra cosa ti colpisca. Uno stile abbastanza semplice è quello di invertire i colori del carattere e del colore di sfondo solo per la prima lettera:
p: prima lettera {
dimensione 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 che giocano con i valori, puoi indentare la prima riga abbastanza per far apparire la prima lettera nel mezzo. Basta giocare con la percentuale sul rientro del testo del paragrafo finché non appare corretto:
p: prima lettera {
dimensione carattere: 300%;
colore di sfondo: # 000;
colore: #fff;
}
p: first-line {line-height: 100%; }
I tappi iniziali adiacenti sono difficili con i CSS
I limiti 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 è di usare la proprietà text-indent sulla prima riga per spingerla (a sinistra) su un valore negativo. Avrai anche bisogno di cambiare il margine sinistro di quel paragrafo di qualche importo. Gioca con questi numeri finché il paragrafo non sembra buono.
p {
text-indent: -2.5em;
margin-left: 3em;
}
p: first-letter {font-size: 3em; }
p: first-line {line-height: 100%; }
Ottenere tappi iniziali davvero fantasiosi
Il modo migliore per creare un cap originale è quello di cambiare il carattere in una famiglia di font più decorativa. Se utilizzi una serie di caratteri seguiti da un carattere generico, questo ti aiuterà a garantire che il tuo berretto iniziale sia visualizzato in modo che i tuoi clienti possano vederlo, senza entrare in problemi di accessibilità e usabilità.
p: prima lettera {
font-size: 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 berretto iniziale che dia pubblicità allo stile del tuo paragrafo.
Utilizzo di un cappuccio iniziale grafico
Se, dopo tutto ciò, non ti piace ancora come appaiono i berretti iniziali sulla pagina, puoi ricorrere alla grafica per ottenere l'effetto esatto 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 cap iniziale e potrebbero non vedere il testo nascosto che l'immagine sta sostituendo. Questo può rendere il paragrafo inaccessibile o, al massimo, difficile da leggere.
- Le immagini si aggiungono sempre al tempo di download di una pagina. Se hai molti cappucci iniziali, puoi aumentare significativamente il tempo di download per qualcosa che molte persone ritengono sia insignificante.
- Alcuni browser visualizzeranno sia la prima lettera nascosta che l'immagine che possono rendere strano il testo del paragrafo.
- È molto difficile automatizzare questa opzione, poiché devi sapere esattamente quale sia la prima lettera in modo da utilizzare la grafica corretta. Pertanto, ogni volta che il paragrafo viene modificato, potrebbe essere necessario creare un nuovo grafico.
Innanzitutto, è necessario creare il grafico della prima lettera. Abbiamo usato Photoshop per creare la lettera L con il carattere "Edwardian Script ITC." L'abbiamo reso enorme - 300pt di dimensione. Abbiamo quindi ritagliato l'immagine fino al minimo necessario attorno alla lettera e annotato la larghezza e l'altezza dell'immagine.
Quindi abbiamo creato una classe "capL" per il nostro paragrafo. Qui è dove definiamo quale immagine usare, la leading (line-height) e così via.
È necessario utilizzare la larghezza e l'altezza dell'immagine per impostare il rientro del testo e il padding-top del paragrafo. Per la nostra immagine L, avevamo bisogno del rientro 95px e del padding 72px.
p.capL {
line-height: 1em;
background-image: url (capL.gif);
background-repeat: no-repeat;
text-indent: 95px;
padding-top: 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 un intervallo attorno al primo elemento con la classe "iniziale" e detto al browser di non visualizzare quella lettera:
span.initial {display: none; }
E l'immagine quindi viene visualizzata correttamente. Puoi giocare con il rientro del testo sul paragrafo per ottenere il testo ben aderito alla lettera, tuttavia desideri che venga visualizzato.
