Los sitios web se han convertido en un medio para compartir información con todo el mundo. Esto ha pasado a incluir medios como fotos y videos. Pero el texto en una página web sigue siendo la opción predominante para la publicación web. Esto implicaría que la forma en que estructuran los párrafos, las oraciones y el texto en la página puede tener un gran impacto si un visitante decide quedarse y leer lo que tiene que decir.
En este tutorial me gustaría compartir algunas sugerencias de CSS para crear diseños creativos de párrafos o textos. La legibilidad y las opciones de fuente a menudo están directamente relacionadas con el diseño en sí. Pero la incorporación de efectos de texto como mayúsculas, resaltados e hipervínculos reconocibles distinguirá de otros contenidos en la página. Eche un vistazo a mi demostración de muestra en vivo para ver lo que estamos tratando de construir.
Demo en vivo - Descargar código fuente
Configuración general de la página
He creado un doctype HTML5 típico junto con un área de contenido de centro fijo. Los estilos de párrafo deben aparecer junto con otros elementos de la página, como un cuadro de notificación o una nota de bloque. Puede decir mucho por escrito sin utilizar ningún encabezado secundario en la página.
Mi hoja de estilo es bastante básica con una serie de restablecimientos y posicionamiento CSS. Cada elemento de párrafo está diseñado con ems utilizando un margen adicional en la parte inferior. También puedes ver cómo he creado la etiqueta h1 usando bordes horizontales posicionados uniformemente en el centro.
He elegido usar? Helvetica Neue? como la fuente principal en toda la página. Esta es una alternativa sans serif para Helvetica, pero no debe limitar las opciones de tipografía para elementos de página especiales.
Antes de saltar a los efectos, vale la pena pasar por alto el HTML. Mire algunos de los nombres de clase y los diversos elementos que he usado para diferentes propósitos dentro de cada párrafo.
Párrafos Drop Caps
Lo primero que probablemente notará es la gran letra caída en el primer párrafo. Este elemento de párrafo está usando una clase de .primero que está directamente vinculado al efecto de tapa de gota. Los escritores a menudo incluyen este capital reducido en libros y trabajos impresos, pero también es bueno para artículos en la web.
Notará que hay dos selectores aplicados a este efecto de capital reducido. CSS tiene una pseudo-clase llamada :primera letra que apunta la primera letra en cualquier elemento. Tenga en cuenta que esto no funcionará si su párrafo contiene otro elemento que precede al texto (como una miniatura de la imagen). Si necesita una imagen en el párrafo de la tapa de colocación, use un fondo CSS en lugar de la etiqueta img HTML. Con esto :primera letra Selector podemos aplicar el límite de caída en cualquier párrafo utilizando la clase .primero.
Pero con otra clase .dropcap podríamos aplicar el efecto específicamente envolviendo la letra en un elemento span. Esto aparecería como L en el documento HTML. Para motores de CMS como WordPress, es más fácil crear un tema que admita .primero clase anexada a cada primer párrafo de tus publicaciones o páginas (o ambas).
También diseñé un efecto alternativo de tapa descendente que crea un fondo más oscuro alrededor de la letra. Tenga en cuenta que este límite alternativo utiliza la familia Helvetica Neue, mientras que el límite inicial original cambia a Georgia u otra fuente serif. Esto toma el dialecto que a menudo encontramos en los libros impresos y lo replica en la pantalla digital.
Ahora el segundo párrafo en la página usa una clase de .más grande que simplemente aumenta el tamaño de fuente y la altura de línea de todo el párrafo. Algunos sitios web prefieren agrandar el primer párrafo para distinguirlo del resto de la página. Pero también puede intentar combinar mayúsculas junto con texto más grande para captar la atención de la gente.
Cotizaciones internas
Los artículos que tienen citas de otra persona a menudo usan blockquotes y otros elementos similares. Las comillas son ligeramente diferentes ya que utilizan texto directamente del artículo. Esto se hace a menudo para enfatizar un punto o frase que es crucial para el tema general del contenido.
El diseño de mi presupuesto es muy similar a lo que encontrarás aquí en Design Shack. Utiliza un fondo ligeramente más oscuro junto con las sombras del cuadro CSS3 para que parezca más elegante. El texto de la cita interna también es más grande para diferenciarse de los muchos otros párrafos. Es importante colocar estas comillas en el lado izquierdo o derecho de la página para que no aparezcan como citas regulares.
Cuando usamos el elemento de blockquote HTML5, a menudo podemos incluir otros elementos internos. Algunas blockquotes incorporarán varios párrafos e incluso una cita para la cita. El estilo de diseño utiliza mucho relleno y márgenes para crear espacio entre los párrafos regulares. El borde izquierdo es como un marcador para ayudar a los lectores a reconocer instantáneamente que el blockquote es diferente de los otros párrafos circundantes.
Personalizando simbolos
Aunque este es un pequeño efecto especial, los visitantes lo notan cuando leen las páginas de contenido. Las entidades HTML se utilizan para mostrar símbolos en su texto. Estas entidades podrían usar algo como Font Awesome para mostrar íconos personalizados, o podría usarlos para mostrar símbolos HTML típicos.
En mi ejemplo, he creado el ampersand con un elemento span de ajuste. Esto cambiará la familia de fuentes a Gabriela, que utiliza un diseño más serif. Un elemento genérico span con la clase .fancyamp Puede aplicar esta familia de fuentes a la entidad sin afectar a ningún otro texto. También lo he redimensionado un poco más grande para ayudarlo a sobresalir de las letras circundantes.
Pero no creas que este efecto solo se puede usar para los "ampersands". Los símbolos de copyright, las fracciones y otras entidades HTML podrían beneficiarse de este diseño estilizado. Incluso podría considerar otros efectos de texto como negrita cursiva o actualizar el color del texto.
Enlaces y Tonos Destacados
En los primeros párrafos encontrará un texto resaltado junto con un enlace de anclaje elegante. Ambos tienen un relleno adicional porque ambos utilizan colores de fondo.
Para los enlaces de anclaje, he elegido una paleta de colores verdes, aunque puede trabajar con cualquier combinación de colores que mejor se adapte a su diseño. El efecto de fondo agregado al desplazar cada enlace ayuda a los visitantes a reconocer de inmediato una vez que han flotado sobre algo. El texto del enlace en realidad se oscurece por lo que se destaca del fondo verde claro.
Desde que he incluido el relleno en los lados izquierdo y derecho, los márgenes negativos se usan para contrarrestar espacios extraños cuando se desplaza dentro y fuera de cada enlace. También hay relleno en el .realce clase pero ya que esto no necesita una :flotar diseño, el espacio extra nunca será realmente notable.
Si un efecto de texto resaltado no es suficiente, siempre puede crear clases secundarias para notificaciones de párrafos. Mi clase .darse cuenta cambia drásticamente el color del texto para que coincida con el tono más claro del amarillo en el fondo. Usando el CSS3 sombra de texto La propiedad ayuda con la legibilidad. También puede crear clases duplicadas para cuadros de aviso en otros esquemas de color como verde o azul.
Demo en vivo - Descargar código fuente
Clausura
No recomendaría incorporar todos estos efectos en cada página de su sitio web. Pero es aconsejable planificar estos estilos por adelantado y probar todo antes de agregar código a su hoja de estilo.
Los visitantes están tan acostumbrados a los efectos tradicionales que realmente puedes cautivar a una audiencia con estos matices. Siéntase libre de descargar una copia de mi código de tutorial y ver qué otras ideas puede agregar a estos efectos de párrafo.