Blockquote 2 (Tutorial CSS)

Siguiendo con la pequeña tanda de CSS, he aquí mi segundo blockquote, bastante parecido la primero pero con algunas variantes como sombra y efecto hover en las puntas.

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 2 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):

@import url(http://fonts.googleapis.com/css?family=Press+Start+2P); @import url(http://fonts.googleapis.com/css?family=Economica:400,700); @import url(http://fonts.googleapis.com/css?family=Carter+One); @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700); blockquote{ width: 60%; color: white; font-family: 'Open Sans Condensed'; font-style: italic; margin-left:20px; padding:1.2em 30px 1.2em 50px; border-left:10px solid #0069D3; line-height:1.6; position: relative; font-size:20px; text-align: left; color: white; text-shadow: 2px 1px 2px rgba(255, 255, 255, 0.5); background: black; -webkit-box-shadow: 5px 5px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 5px 5px 2px 0px rgba(50, 50, 50, 0.75); box-shadow: 5px 5px 2px 0px rgba(50, 50, 50, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } blockquote::before{ font-family: "Carter One"; font-size:50px; font-style: normal; content: "\201C"; color:#0069D3; position: absolute; left: 10px; top:-10px; text-shadow: 2px 1px 2px rgba(255, 255, 255, 0); } blockquote::after{ content: ''; } blockquote:hover{ -moz-border-radius-topleft: 40px; -webkit-border-top-left-radius: 40px; border-top-left-radius: 40px; -moz-border-radius-topright: 40px; -webkit-border-top-right-radius: 40px; border-top-right-radius: 40px; -moz-border-radius-bottomright: 40px; -webkit-border-bottom-right-radius: 40px; border-bottom-right-radius: 40px; -moz-border-radius-bottomleft: 40px; -webkit-border-bottom-left-radius: 40px; border-bottom-left-radius: 40px; } blockquote span{ background:#0069D3; margin-left:-50px; margin-right: 0px; padding-right: 20px; display:block; color:white; text-align: right; font-family: 'Economica'; font-size: 18px; font-style: normal; font-weight: 700; margin-top:1em; text-shadow: 2px 1px 2px rgba(255, 255, 255, 0); -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } blockquote span::before{ content: "\2014\00A0"; }

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~