Aprende cómo usar CSS crearlujoso mayúsculas iniciales para sus párrafos. Incluso existe una técnica de reemplazo de imagen simple para usar una imagen gráfica para su límite inicial.
Estilos básicos de mayúsculas 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 está en la misma línea que el texto actual.
- Caído - también bastante común, donde la primera letra es más grande y cae 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 junto al resto del texto. Esto es más común en la impresión que en el diseño web.
Las mayúsculas iniciales o las letras mayúsculas son muy familiares. Son una excelente manera de disimular tramos de texto que de otro modo serían largos y aburridos. Y con la propiedad CSS: primera letra, puede definir fácilmente cómo hacer que sus primeras letras sean más elegantes.
Crear un límite inicial simple
Todo lo que necesita hacer para crear un límite inicial elevado simple es agrandar la primera letra de su párrafo con el pseudoelemento de la primera letra:
p: primera letra {tamaño de fuente: 3em; }
Pero muchos navegadores vea que la primera letra es más grande que el resto del texto en la línea, por lo que hacen que el interlineado sea igual a lo que tendría sentido para esa primera letra, no para el resto de la línea. Afortunadamente, esto es fácil de solucionar con el pseudoelemento de primera línea y la propiedad line-height:
p: primera letra {tamaño de fuente: 3em; }
p: primera línea {altura de línea: 1em; }
Juega con la altura de la línea dentro de tu documento hasta que encuentres el tamaño adecuado para tu texto.
Juega con tu gorra inicial
Una vez que comprenda cómo crear una gorra inicial, puede vestirla con ropa elegante para que se destaque. Juega con colores, colores de fondo, bordes o lo que te apetezca. 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 fuente: 300%;
color de fondo: # 000;
color: #fff;
}
p: primera línea {altura de línea: 100%; }
Otro truco consiste en 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 con algunos juegos con los valores, puede sangrar su primera línea lo suficiente como para hacer 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 fuente: 300%;
color de fondo: # 000;
color: #fff;
}
p: primera línea {altura de línea: 100%; }
p {sangría de texto: 45%; }
Las mayúsculas 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 text-indent en la primera línea para empujarla (hacia la izquierda) con 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 {
sangría de texto: -2.5em;
margen izquierdo: 3em;
}
p: primera letra {tamaño de fuente: 3em; }
p: primera línea {altura de línea: 100%; }
Obtener mayúsculas iniciales realmente elegantes
La mejor manera de crear una tapa inicial elegante es cambiar la fuente a una familia de fuentes más decorativa. Si usa un serie de fuentes seguido de un fuente genérica, ayudará a garantizar que su límite inicial se muestre bien para que sus clientes puedan verlo, sin entrar en problemas de accesibilidad y usabilidad.
p: primera letra {
tamaño de fuente: 3em;
familia de fuentes: "Edwardian Script ITC", "Brush Script MT", cursiva;
}
p: primera línea {altura de línea: 100%; }
Y, como de costumbre, puede juntar todas estas sugerencias para crear un límite inicial que adapte el estilo de los anuncios a su párrafo.
Uso de un límite inicial gráfico
Si, después de todo eso, aún no te gusta cómo se ven las 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 reemplaza la imagen. Esto puede hacer que el párrafo sea inaccesible o, en el mejor de los casos, difícil de leer.
- Las imágenes siempre se suman al tiempo de descarga de una página. Si tiene muchos límites iniciales, puede aumentar significativamente el tiempo de descarga para algo que muchas personas considerarían insignificante.
- Algunos navegadores mostrarán tanto la primera letra oculta como la imagen, lo que puede hacer que el texto del párrafo parezca extraño.
- Es muy difícil automatizar esta opción, ya que debes saber exactamente cuál es la primera letra para poder 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. Usamos Photoshop para crear la letra L con la fuente "Edwardian Script ITC". Lo hicimos enorme: 300 puntos de tamaño. Luego recortamos la imagen al 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 inicial (altura de línea), etc.
Debe usar el ancho y el alto de la imagen para establecer la sangría del texto y la parte superior del relleno del párrafo. Para nuestra imagen L, necesitábamos una sangría de 95 píxeles y un relleno de 72 píxeles.
p.capL {
altura de línea: 1em;
imagen de fondo: url (capL.gif);
repetición de fondo: no repetición;
sangría de texto: 95px;
acolchado superior: 72px;
}
Pero eso no es todo. Si lo deja ahí, entonces la primera letra se duplicará en el párrafo, primero con el gráfico, 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; }
A continuación, el gráfico se muestra correctamente. Puede jugar con la sangría del texto en el párrafo para que el texto quede ajustado hasta la letra, como quiera que se muestre.