Aprende a usar CSS para crear mayúsculas iniciales elegantes para tus párrafos. Incluso hay una técnica de reemplazo de imagen simple para usar una imagen gráfica para su tapa inicial.
Estilos básicos de gorras iniciales
Hay tres estilos básicos de mayúsculas iniciales en los documentos:
- Elevado - el más común, donde la primera letra es más grande y en la misma línea que el texto actual.
- Caído - también es bastante común, donde la primera letra es más grande y se coloca debajo de la primera línea de texto. El siguiente texto luego flota a su alrededor.
- Adyacente - donde la primera letra está en una columna al lado del resto del texto. Esto es más común en la impresión que el diseño web.
Las gorras iniciales o gorras son muy familiares. Son una excelente manera de vestir largos y aburridos tramos de texto. Y con la propiedad CSS: primera letra, puede definir fácilmente cómo hacer sus primeras letras más sofisticadas.
Crear una tapa inicial simple
Todo lo que necesita hacer para crear un límite inicial elevado simple es hacer que la primera letra de su párrafo sea más grande en tamaño con el pseudo-elemento de la primera letra:
p: primera letra {font-size: 3em; }
Pero muchos navegadores ven que la primera letra es más grande que el resto del texto en la línea, por lo que hacen que la primera letra sea igual a lo que tendría sentido para esa primera letra, no el resto de la línea. Afortunadamente, esto es fácil de solucionar con el pseudo-elemento de primera línea y la propiedad de altura de línea:
p: primera letra {font-size: 3em; }
p: primera línea {line-height: 1em; }
Juegue con la altura de la línea dentro de su documento hasta que encuentre el tamaño correcto para su texto.
Juega con tu gorra inicial
Una vez que entiendas cómo crear una gorra inicial, puedes vestirla con ropa elegante para resaltarla. Juega con colores, colores de fondo, bordes o lo que más te guste. Un estilo bastante simple es invertir los colores de la fuente y el color de fondo solo para la primera letra:
p: primera letra {
tamaño de letra: 300%;
color de fondo: # 000;
color: #fff;
}
p: primera línea {line-height: 100%; }
Otro truco es centrar la primera línea. Esto puede ser complicado con CSS, ya que la mitad de la línea de texto puede ser diferente si su diseño es flexible. Pero al jugar con los valores, puedes sangrar tu primera línea lo suficiente para que la primera letra parezca estar en el medio. Simplemente juegue con el porcentaje en la sangría de texto del párrafo hasta que se vea bien:
p: primera letra {
tamaño de letra: 300%;
color de fondo: # 000;
color: #fff;
}
p: primera línea {line-height: 100%; }
Las tapas iniciales adyacentes son difíciles con CSS
Las mayúsculas iniciales adyacentes pueden ser difíciles con CSS porque los diferentes navegadores muestran las fuentes de manera diferente. La idea detrás de la creación de un límite adyacente en CSS es usar la propiedad de sangría de texto en la primera línea para expulsar (a la izquierda) un valor negativo. También deberá cambiar el margen izquierdo de ese párrafo en cierta cantidad. Juega con estos números hasta que el párrafo se vea bien.
pag {
texto-sangría: -2.5em;
margen izquierdo: 3em;
}
p: primera letra {font-size: 3em; }
p: primera línea {line-height: 100%; }
Obtención de gorras iniciales realmente lujosas
La mejor manera de crear una tapa inicial elegante es cambiar la fuente a una familia de fuentes más decorativa. Si usa una serie de fuentes seguidas por una fuente genérica, ayudará a garantizar que su límite inicial se muestre bien para que sus clientes puedan verlo, sin tener problemas de accesibilidad y usabilidad.
p: primera letra {
tamaño de letra: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursiva;
}
p: primera línea {line-height: 100%; }
Y, como de costumbre, puede reunir todas estas sugerencias para crear un límite inicial que se adapte al estilo de su párrafo.
Usando una tapa inicial gráfica
Si, después de todo eso, todavía no te gusta el aspecto de tus mayúsculas iniciales en la página, puedes recurrir a los gráficos para obtener el efecto exacto que estás buscando. Pero antes de decidir pasar directamente a los gráficos, debe tener en cuenta los inconvenientes de este método:
- Los clientes sin imágenes no verán el límite inicial y es posible que no vean el texto oculto que la imagen está reemplazando. Esto puede hacer que el párrafo sea inaccesible o, en el mejor de los casos, difícil de leer.
- Las imágenes siempre aumentan el tiempo de descarga de una página. Si tiene muchos límites iniciales, puede aumentar significativamente el tiempo de descarga para algo que mucha gente consideraría insignificante.
- Algunos navegadores mostrarán tanto la primera letra oculta como la imagen que puede hacer que el texto del párrafo parezca extraño.
- Es muy difícil automatizar esta opción, ya que debe saber exactamente cuál es la primera letra para usar el gráfico correcto. Por lo tanto, cada vez que se edita el párrafo, es posible que deba crear un nuevo gráfico.
Primero, necesitas crear el gráfico de la primera letra. Utilizamos Photoshop para crear la letra L con la fuente "Edwardian Script ITC". Lo hicimos enorme - 300pt en tamaño. Luego recortamos la imagen hasta el mínimo alrededor de la letra y anotamos el ancho y la altura de la imagen.
Luego creamos una clase "capL" para nuestro párrafo. Aquí es donde definimos qué imagen usar, la delantera (altura de línea), etc.
Debe usar el ancho y el alto de la imagen para establecer la sangría de texto y la parte superior de relleno del párrafo. Para nuestra imagen L, necesitamos 95px sangría y 72px relleno.
p.capL {
línea altura: 1em;
imagen de fondo: url (capL.gif);
repetición de fondo: no repetición;
texto-sangría: 95px;
relleno superior: 72px;
}
Pero eso no es todo. Si lo deja allí, la primera letra se duplicará en el párrafo, primero con el gráfico y luego en el texto. Así que agregamos un intervalo alrededor de ese primer elemento con la clase "inicial" y le dijimos al navegador que no mostrara esa letra:
span.initial {display: none; }
Y luego el gráfico se muestra correctamente. Puede jugar con la sangría de texto en el párrafo para obtener el texto ajustado a la letra, como quiera que se muestre.
