Las citas de bloque y las citas de extracción se pueden usar para puntuar bloques sólidos de texto en ejecución. También son dos de los elementos mejor impresos que actúan como puntos de referencia visuales para atraer los puntos de referencia visuales de alguien. No hay una regla sobre cuánto tiempo debe tomar la cita, cuán grande es la apariencia o incluso el estilo.
Entonces, ¿cómo diseñan citas de bloque y citas para reflejar la identidad visual de una marca y ayudar a contar su historia? Esto es lo que hice al diseñar HTML blockquote Use límites, decore marcas de cotización, formas personalizadas y algunos elementos de atributos inesperados.
Mi perfil: Patty Meltt es una floreciente sensación de música country y necesita un sitio web para lanzar su nuevo álbum. Ella quería que se viera único y memorable, así que llamó Cosas y tonterías. Patty no es real, pero el desafío de diseñar y desarrollar un sitio web como ella es.
Primero, la cita es la «resumen» de la involuntaria.
No hay restricciones sobre cómo diseñar la cita. Tanto las citas de bloqueo como la tracción pueden ser elementos de diseño convincentes, pero transmiten diferentes mensajes. Si bien las citas de bloques generalmente se encuentran en el flujo de contenido, las citas de extracción (a veces llamadas etiquetas) se extraen del texto para formar elementos separados.
HTML adecuado para etiquetar cotizaciones de bloque Depende de su contenido. Mi diseño para Patty Meltt incluye revisiones de conciertos, que contienen el nombre del revisor:
<blockquote>
<p>"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."</p>
<footer>— Waylon Bootscuffer</footer>
</blockquote>Aquí, footer Contiene información sobre la fuente del elemento principal o el autor. Esto lo hace perfecto para blockquoteinstruya quién lo escribe. Pero cite?
Con los años, lo he usado cite El elemento para marcar el atributo. Estos son esos html astuto hasta que lea Especificación Entonces, «Dagnabibi!» porque cite No para marcar a la gente. En cambio, debe usarse para:
«Título de trabajo creativo (como libros, sitios web, canciones, pinturas, etc.)»
<blockquote>
<p>"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."</p>
<footer>— Waylon Bootscuffer, <cite>Country Music Magazine</cite></footer>
</blockquote>Entonces, en ese ejemplo, footer Marque la atribución y cite Señale el título de la publicación, no la persona que la escribió. Esto proporciona una mejora semántica para los marcadores y ayuda a las personas a usar lectores de pantalla.
Un estilo con personalidad
Fuera de la caja, el navegador puede extraño Para diseñar las citas de bloque, excepto para agregar bordes en línea. Puedes agregar algo Estilo de bloque simplepero con un poco más de estilo, puede convertirlos en elementos de diseño expresivos que reflejen la personalidad y la voz de la marca.
Para el diseño de Patty Meltt, espero que sus citas la hagan segura, ruidosa y un poco segura en la parte superior.
pista: El ejemplo interactivo de este artículo es Disponible en mi laboratorio.
límite
Un límite simple hace que los bloques y las citas de extracción se destaquen y las fijan en el diseño. El borde de la izquierda o superior separa la referencia del bloque del contenido circundante, ayudando al lector a verlo como una voz diferente a la narrativa principal.
En revistas y periódicos, los bloques de comillas se bloquean y a menudo se contrastan con el texto circundante. uno Ancho completo, cita de bloque límite Se alienta a los lectores a hacer una pausa por un momento.
Esta es una forma simple pero efectiva de enfocar la atención de alguien en la información. uno Borde delgado Siéntete callado y discreto:
blockquote {
padding-inline: 1.5rem;
border-inline-start: 1px solid #98838e;
border-inline-end: 1px solid #98838e;
}
Esto puede ser adecuado para algunas marcas, pero no es un estilo que refleje la personalidad de Patty. Y un audaz Límites más gruesos Siéntete más seguro, como si tenga cosas importantes que decir:
blockquote {
padding-inline: 1.5rem;
border-inline-start: 5px solid #98838e;
border-inline-end: 5px solid #98838e;
}
Estos límites no siempre llenan toda la altura o ancho de uno blockquoteasí que no lo uses border Propiedades, uso ::before y ::after Pseudo-elemento a agregar Bordes artificiales Cualquier tamaño:
blockquote {
display: flex;
flex-direction: column;
align-items: center;
}
blockquote::before,
blockquote::after {
content: "";
display: block;
width: 80px;
height: 5px;
background-color: #98838e;
}
Incluso puede usar animaciones de cuadros de teclas o Transición simple Cuando alguien interactúa con una cita, su ancho aumenta:
blockquote::before,
blockquote::after {
content: "";
display: block;
width: 80px;
height: 5px;
background-color: #98838e;
transition: 300ms width ease-in-out;
}
blockquote:hover::before,
blockquote:hover::after {
width: 100%;
}Comilla
Antes de elegir cómo diseñar marcadores de cotización, considere si son necesarios por completo. Técnicamente, html blockquote La implicación es una cita. Por lo tanto, desde una perspectiva de accesibilidad y semántica, no se requiere una marca de cotización, ya que los lectores de pantalla y los motores de búsqueda reconocerán blockquote. Sin embargo, los marcadores de cotización pueden enfatizar visualmente el contenido citado y agregar interés y personalidad al diseño.
¿Siempre hay que abrir y cerrar marcadores? Cuando el diseño requiere Un sentimiento tradicionalo aparecen citas en el párrafo donde se ejecuta el texto:
blockquote {
position: relative;
padding-inline: 64px;
}
blockquote img:first-of-type,
blockquote img:last-of-type {
position: absolute;
}
blockquote img:first-of-type {
top: 0;
left: 0;
}
blockquote img:last-of-type {
right: 0;
bottom: 0;
}
O, para darle al diseño una sensación editorial, es posible que use decorativo Marca de apertura extra grande Para extraer citas, está separado del flujo normal del texto:
blockquote {
display: flex;
flex-direction: column;
align-items: center;
}
blockquote::after {
content: "";
display: block;
width: 80px;
height: 5px;
background-color: #98838e;
}Biblioteca de etiquetas de citas
Las citas en bloque no necesariamente requieren marcas de cotización, pero cuando las usas intencionalmente, son más que solo signos de puntuación. Se convierten en parte de la personalidad de diseño. Las marcas decorativas son ideales cuando las marcas quieren inyectar a sus personajes en su diseño.
Lamentablemente, incluso las fuentes mejor diseñadas pueden contener marcas de citas aburridas e inquebrantables. Por lo tanto, es importante recordar que si encajan mejor en el diseño, puede seleccionar marcadores de fuentes completamente diferentes.
Es por eso que cada vez que audiciono para una nueva fuente, reviso su marca de cotización. Si son memorables o valen la pena, los agregué como SVG y los agregué a mi biblioteca de etiquetas de cotización para que puedan encontrarse fácilmente más tarde.
forma
Los diseños de citas no tienen que detenerse en los límites y citas. Las cotizaciones de bloques y tirones pueden tener cualquier forma. Puede diseñar un álbum o una reseña de concierto discurso o idea Burbujas e incluyen la encarnación del autor. O puedes usar clip-path o mask Convertir citas a Cualquier forma Puedes imaginar.
Diseñado para Patty Meltt
Patty Meltt quería un sitio web con detalles de diseño. Cada elemento agregado al diseño es una oportunidad para la expresión, incluida su oferta. De la elección de los diseños que le mostré, sintió una mezcla de marcas de citas, imágenes de avatar y límites (el tipo con guiones de flujo) que se adaptaba mejor a su estilo.
Implementación Su cita de tirónUsé fuentes cursivas, que contrastaban bruscamente con el resto de sus diseños de impresión:
blockquote p {
font-family: "Lobster Two", cursive;
font-size: 1.5rem;
font-weight: 700;
font-style: italic;
text-transform: unset;
}Entonces iré de Ohno tipo fundición blazeface Tipo de familia.
<div>
<img src="https://css-tricks.com/getting-creative-with-quotes/img/blazeface-start.svg" alt="" width="48">
</div>Dividí a su empresa matriz en un contenedor flexible y alineé el contenido verticalmente:
blockquote div {
display: flex;
align-items: center;
gap: 1.5rem;
}… y use el contenido generado para agregar líneas horizontales de ancho flexible para llenar cualquier espacio restante:
blockquote div:first-of-type::after {
content: "";
display: block;
flex: 1;
height: 5px;
background-color: #98838e;
}en conclusión
Con un poco de cuidado y creatividad, las citas en bloque pueden tener un elemento de construcción de marca tan expresivo como un logotipo o título. Ya sea que use citas tranquilas y reflexivas o fuertes, diseñarlas es una oportunidad para mejorar la personalidad y la voz de su cliente.
La oferta de Patty Meltt se convirtió en una mini declaración de diseño. Pero independientemente de la marca, el mismo principio: obtenga la semántica correctamente, elija el estilo que se ajuste al tono y no tenga miedo de probar límites, calificaciones de citas o incluso formas.
