in

25+ Bonitas Citas en Bloque CSS / Blockquotes

¿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.

Bloques de citas con estilos modernos

Cita CSS con caja

CSS cita Flexbox

Citas CSS con tarjetas

CSS Citas Flextone con estilo ladrillo

Citas con estilo de notas

Citas con imagen en el borde

Café

Citas

Cita tarjeta

Written by webgenio