¿Qué es una ‘Cita en bloque’ o ‘Blockquote’?
Una ‘cita en bloque’ o ‘blockquote’ es un elemento HTML que indica que el texto que aparece es una cita. Básicamente, quiere decir que lo escrito no son tus propias palabras, sino que estás citando a otra persona.
Por ese motivo, las citas en bloque o blockquotes suelen presentarse de una manera que aparezcan resaltadlas, normalmente con una o dos comillas.
Hay quien asegura que el uso de estas citas en bloque es incluso bueno para el SEO, porque a Google no le gusta el contenido duplicado, y es una forma de indicar que el texto marcado como blockquote no es tuyo.
Veamos a continuación algunos bloques de citas bonitos y elegantes que hacen resaltar el texto que vayas a citar:
Bloque de citas misterioso
Este blockquote incluye una animación CSS cuando se carga, con un bonito gradiente de colores sobre fondo negro.
Bloque de citas con animación
See the Pen CSS Quote Box Hover Effects by abdel Rhman (@abdelRhman345) on CodePen.
Este blockquote incluye una animación cuando pasas el ratón sobre el texto.
Bloque de citas con imagen
Este bloque de citas puede incluir una imagen junto al texto. Incluye una animación de entrada.
Bloque de citas con estilo
Una cita en bloque con diseño único y original.
Cita en bloque con efecto 3D
Esta cita en bloque se muestra sobre una tarjeta que parece flotar sobre la pantalla con efecto 3D.
Cita:
5 estilos de Blockquotes
Un set de cinco estilos sencillos para citas en bloque.
Con borde rojo
Blockquote retro / vintage
See the Pen Quotes by Iulian Savin (@Iulius90) on CodePen.
Blockquote con tarjeta
Cita en bloque minimalista
See the Pen Quote Test by Jose Manuel Gulias Lugo (@chepe) on CodePen.
Blockquote Pure CSS
Cita simple
Bloque de citas circular
Cita con línea vertical lateral
Cita CSS con tipografía
Cita con efecto
Esta cita en bloque incluye un efecto al mostrarse.