Aprende a crear capas de fantasía con CSS e imaxes
Aprende a usar CSS para crear imaxes fantasiosas para os teus parágrafos. Incluso hai unha técnica sinxela de substitución de imaxes para usar unha imaxe gráfica para a tapa inicial.
Estilos básicos de táboas iniciais
Hai tres estilos básicos de tapas iniciais nos documentos:
- elevado - o máis común, onde a primeira letra é máis grande e na mesma liña que o texto actual.
- caeu , tamén bastante común, onde a primeira letra é máis grande e cae debaixo da primeira liña de texto. O seguinte texto flota ao seu redor.
- adxacente - onde a primeira letra está nunha columna ao lado do resto do texto. Isto é máis común en impresión que o deseño web.
As tapas ou caídas de inicio son moi familiares. Son unha boa forma de levar posto que outros textos longos e abertos. E coa propiedade CSS: primeira letra, podes definir fácilmente como facer as túas primeiras letras máis atractivas.
Crea un casquete inicial simple
Todo o que cómpre facer para crear un simple toque inicial inicial é facer que a primeira letra do seu parágrafo sexa de tamaño maior co pseudo-elemento da primeira letra:
p: first-letter {font-size: 3em; }Pero moitos navegadores ven que a primeira letra é máis grande que o resto do texto da liña, polo que fan o marcador igual ao que tería sentido esa primeira letra, non o resto da liña. Afortunadamente, isto é fácil de solucionar co pseudo-elemento de primeira liña e a propiedade de altura de liña:
p: first-letter {font-size: 3em; } p: primeira liña {line-height: 1em; }Xoga coa altura da liña dentro do teu documento ata atopar o tamaño correcto para o teu texto.
Xoga co seu casco inicial
Unha vez que entende como crear un casquete inicial, pode vestirse con roupa extravagantes para destacar. Xoga con cores, cores de fondo, bordos ou o que queira a túa fantasía. Un estilo bastante simple é reverter as cores da fonte e a cor de fondo só para a primeira letra:
p: first-letter {font-size: 300%; cor de fondo: # 000; cor: #fff; } p: first-line {line-height: 100%; }Outro truco é centrar a primeira liña. Isto pode ser complicado con CSS, xa que o medio da liña de texto pode ser diferente se o deseño é flexible. Pero con algúns xogando cos valores, pode sangrar a súa primeira liña o suficiente para que a primeira letra pareza estar no medio. Simplemente xogue coa porcentaxe sobre o guión do parágrafo ata que pareza correcto:
p: first-letter {font-size: 300%; cor de fondo: # 000; cor: #fff; } p: first-line {line-height: 100%; } p {guión de texto: 45% ; }As tapas iniciais adxacentes son duras con CSS
Os casquetes adxacentes poden ser difíciles con CSS porque os diferentes navegadores mostran as fontes de xeito diferente. A idea de crear unha tapa adxacente en CSS é usar a propiedade de sangría de texto na primeira liña para empuxala (á esquerda) un valor negativo. Tamén necesitará cambiar a marxe esquerda dese parágrafo por algunha cantidade. Xoga con estes números ata que o parágrafo fose bo.
p {guión de texto: -2.5em; marxe esquerda: 3em; } p: first-letter {font-size: 3em; } p: first-line {line-height: 100%; }Conseguir capas iniciais de fantasía
A mellor forma de crear un bonito tapa inicial é cambiar a fonte a unha familia de fontes máis decorativa. Se usa unha serie de fontes seguidas dunha fonte xenérica , axudará a garantir que o seu casquete inicial móstrase ben para que os seus clientes poidan velo, sen entrar en cuestións de accesibilidade e usabilidade.
p: first-letter {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursiva; } p: first-line {line-height: 100%; }E, como de costume, podes poñer todas estas suxestións xuntas para crear unha tapa inicial que o estilo de anuncios do teu parágrafo.
Usando un casquete inicial gráfica
Se, despois de todo iso, aínda non lle gusta como os seus casquetes iniciales miran na páxina, pode recorrer a gráficos para obter o efecto exacto que está a procurar. Pero antes de decidir moverse directamente aos gráficos, debes ter en conta os inconvenientes deste método:
- Os clientes sen imaxes non verán a tapa inicial e non poderán ver o texto oculto que a imaxe está a substituír. Isto pode facer inaccesible o parágrafo ou, no mellor dos casos, é difícil de ler.
- As imaxes sempre se engaden ao tempo de descarga dunha páxina. Se tes moitos capítulos iniciales, podes aumentar significativamente o tempo de descarga de algo que moitas persoas sentirían é insignificante.
- Algúns navegadores mostrarán tanto a primeira letra escondida como a imaxe, o que pode facer que o texto do parágrafo pareza estraño.
- É moi difícil automatizar esta opción, xa que ten que saber exactamente cal é a primeira letra para que use o gráfico correcto. Entón, cada vez que se edita o parágrafo, pode que precise crear un novo gráfico.
En primeiro lugar, cómpre crear o gráfico da primeira letra. Eu usei Photoshop para crear a letra L coa fonte "Edwardian Script ITC". Fíxoo enorme - tamaño 300pt. A continuación, cortaba a imaxe ata o mínimo mínimo na letra e observaba o ancho ea altura da imaxe.
Entón eu creei unha clase "capL" para o meu parágrafo. Aquí é onde defecto a imaxe que usar, o principal (altura da liña), etc.
Debe usar o ancho e a altura da imaxe para definir a sangría do texto e o recheo. Para a miña imaxe L, necesitaba sinaxe de 95 píxeles e recheo de 72 píxeles.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: non-repetir; guión de texto: 95px; padding-top: 72px; }Pero iso non é todo. Se o deixas alí, a primeira letra duplicarase no parágrafo - primeiro co gráfico e despois no texto. Entón, engadín un espazo ao redor dese primeiro elemento coa clase "inicial" e díxolle ao navegador que non mostrase esa carta:
span.initial {amosar: ningún; }E o gráfico móstrase correctamente. Podes xogar co guión do texto no parágrafo para que o texto se acabe ata a letra, pero queres que se amose.