Obteniu informació sobre com crear capes inicials fantàstiques amb CSS i imatges
Obteniu informació sobre com utilitzar CSS per crear tapes inicials de luxe per als vostres paràgrafs. Fins i tot hi ha una senzilla tècnica de reemplaçament d'imatges per utilitzar una imatge gràfica per al vostre límit inicial.
Estils bàsics de tapes inicials
Hi ha tres estils bàsics de caps inicials en documents:
- augmentat : el més habitual, on la primera lletra és més gran i en la mateixa línia que el text actual.
- caigut - també bastant comú, on la primera lletra és més gran i es deixa caure per sota de la primera línia de text. El següent text flota al seu voltant.
- adjacent - on la primera lletra està en una columna al costat de la resta del text. Això és més comú que el disseny web.
Les tapes inicials o les gorres són molt familiars. Són una manera fantàstica de vestir-se de llargs i avorrits trams de text. I amb la propietat CSS: primera lletra, podeu definir fàcilment com fer que les vostres primeres lletres siguin més atractives.
Crea un límit inicial simple
Tot el que cal fer per crear un simple límit inicial inicial és fer que la primera lletra del paràgraf sigui més gran amb el pseudo-element de la primera lletra:
p: first-letter {font-size: 3em; }No obstant això, molts navegadors veuen que la primera lletra és més gran que la resta del text de la línia, de manera que fan que el primer sigui igual al que tindria sentit aquesta primera lletra, no la resta de la línia. Afortunadament, això és fàcil de solucionar amb el pseudomaterial de primera línia i la propietat de la línia d'alçada:
p: first-letter {font-size: 3em; } p: first-line (line-height: 1em; }Juga amb l'alçada de la línia dins del document fins que trobeu la mida adequada per al text.
Juga amb el teu Cap inicial
Una vegada que enteneu com crear un tap inicial, podeu vestir-lo amb roba de luxe per fer-lo ressaltar. Juga amb colors, colors de fons, vores, o el que t'atravi la teva fantasia. Un estil bastant senzill és invertir els colors de la vostra font i el color de fons només per a la primera lletra:
p: first-letter {font-size: 300%; color de fons: # 000; color: #fff; } p: primera línia {line-height: 100%; }Un altre truc és centrar la primera línia. Això pot ser complicat amb CSS, ja que la meitat de la línia de text pot ser diferent si el disseny és flexible. Però amb alguns jugant amb els valors, podeu sagnar la vostra primera línia com perquè la primera lletra sembli estar al centre. Només cal jugar amb el percentatge de la sangria del paràgraf del text fins que no es vegi bé:
p: first-letter {font-size: 300%; color de fons: # 000; color: #fff; } p: primera línia {line-height: 100%; } p {text-indent: 45% ; }Les tapes inicials adjacents són difícils amb CSS
Els límits inicials adjunts poden ser difícils amb CSS perquè els diferents navegadors mostren les fonts de manera diferent. La idea de crear un límit adjacent a CSS és utilitzar la propietat de sangria de text a la primera línia per expulsar (a l'esquerra) un valor negatiu. També haurà de canviar el marge esquerre d'aquest paràgraf per una quantitat determinada. Juga amb aquests números fins que el paràgraf es vegi bé.
p {text-indent: -2.5em; margin-left: 3em; } p: first-letter {font-size: 3em; } p: primera línia {line-height: 100%; }Obtenció de tapes inicials de fantasia
La millor manera de crear un bonic límit inicial és canviar la font a una família de fonts més decorativa. Si utilitzeu una sèrie de fonts seguides d'una font genèrica , us ajudarà a garantir que el vostre límit inicial es mostri bé perquè els vostres clients el puguin veure, sense tenir accés a problemes d'accessibilitat ni d'usabilitat.
p: first-letter {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursiva; } p: primera línia {line-height: 100%; }I, com de costum, podeu posar tots aquests suggeriments junts per crear un límit inicial que l'estil d'anuncis al vostre paràgraf.
Ús d'un límit inicial gràfic
Si després de tot això encara no us agrada veure com es veuen els caps inicials a la pàgina, podeu recórrer a gràfics per obtenir l'efecte exacte que esteu cercant. Però abans de decidir moure directament als gràfics, ha de tenir en compte els inconvenients d'aquest mètode:
- Els clients sense imatges no veuran el límit inicial, i és possible que no vegeu el text ocult que reemplaça la imatge. Això pot fer inaccessible el paràgraf o, en el millor dels casos, és difícil de llegir.
- Les imatges sempre s'afegeixen al temps de descàrrega d'una pàgina. Si teniu molts caps inicials, podeu augmentar significativament el temps de descàrrega d'una cosa que moltes persones considerarien que és insignificant.
- Alguns navegadors mostraran la primera lletra oculta i la imatge, cosa que pot fer que el text del paràgraf aparegui estrany.
- És molt difícil automatitzar aquesta opció, ja que heu de saber exactament quina és la primera lletra perquè utilitzeu la gràfica correcta. Per tant, cada vegada que s'edita el paràgraf, és possible que hàgiu de crear un gràfic nou.
En primer lloc, heu de crear el gràfic de la primera lletra. He fet servir Photoshop per crear la lletra L amb la font "Edwardian Script ITC". Ho vaig fer molt gran, de 300 tones. Després, vaig tallar la imatge fins al mínim mínim de la lletra i heu assenyalat l'ample i l'alçada de la imatge.
A continuació, he creat una classe "capL" per al meu paràgraf. Aquí és on definiria quina imatge es va a usar, la primera (alçada de la línia) i així successivament.
Heu d'utilitzar l'amplada i l'alçada de la imatge per establir la sangria del text i el farciment superior del paràgraf. Per a la meva imatge L, necessitava una sagnia de 95 píxels i un padding de 72 píxels.
p.capL (line-height: 1em; background-image: url (capL.gif); background-repeat: no-repeat; text-guion: 95px; padding-top: 72px; }Però això no és tot. Si la deixes aquí, la primera lletra es duplicarà al paràgraf: primer amb el gràfic, i després en el text. Per tant, he afegit un lapse al voltant d'aquest primer element amb la classe "inicial" - i va dir al navegador que no mostrés aquesta carta:
span.initial {display: none; }I el gràfic es mostra correctament. Podeu jugar amb el sagnat del text al paràgraf per aconseguir que el text s'adapti a la lletra, tot i que vulgueu que es mostri.