Buscador

Escribe tu búsqueda y presiona enter

Blockquote 1 (Tutorial CSS)




Me he vuelto a encantar con el CSS y he estado tratando de aprender a tratar con él. Me he entretenido bastante jugando con la infinidad de variantes posibles, todo cae en la creatividad de cada uno.

Ahora, me puse a crear mis propios blockquote o citas y me ha gustado bastante el resultado. Alojé el proyecto en la página CodePen, una genial herramienta para probar HTML, CSS y Javascript con resultados a tiempo real. El resultado sería el siguiente:

See the Pen Blockquote 1 by ChuckAileron (@ChuckAileron) on CodePen.

Si lo vas a usar en tu blog o usarás el tutorial, por favor deja los créditos correspondientes.

Para tener este tipo de cita en tu blog deberás ir a Diseño → Edición de HTML, ahora presiona Ctrl + F y aparecerá un buscador de palabras. Busca lo siguiente blockquote { y reemplaza todo su código CSS con lo siguiente (haz click en el cuadro):



Dentro del código hay partes donde especifico algunas propiedades, como por ejemplo el color de fondo, tamaño de letra, etc, todo eso lo podrás personalizar a tu gusto si deseas.

Ahora, para usar el blockquote hay que poner el siguiente código HTML a tu entrada:

<blockquote>
TEXTO CITADO
<br/>
<span class="autor">NOMBRE DEL AUTOR</span>
</blockquote>


Es muy importante entender cómo funciona ésto para que resulte. Primero abrimos la etiqueta <blockquote> que será donde va el citado. Puede ser la cantidad de texto que quieras. Luego, agregamos <br/> que es un salto de línea y por último agregamos la etiqueta <span> pero dentro de ella agregamos class="autor", con esto llamamos a la clase creada en el CSS para que le de los estilos correspondientes. Agregamos el nombre del autor y cerramos la etiqueta con </span>. Recuerda que todo esto va aún dentro de la etiqueta <blockquote> así que una vez terminado lo anterior, cerramos el código con </blockquote>.

Y listo. Se vendrán más trabajos así ya que me entretiene mucho, el tiempo vuela cuando estás ñoñeando con las maravillas de CSS y HTML ;D

~Recuerda dar los créditos correspondientes si usarás el código o pondrás el tutorial en tu blog o web~



0 comentarios:

Publicar un comentario