Las páginas web se han convertido en un medio de difusión para compartir vídeos y fotos con el mundo entero, entre otros archivos multimedia. Pero no todo acaba aquí, el texto sigue siendo, a mi parecer, en una página web o un blog, lo más predominante, detonante, e importante de una publicación en una web o ya sea un blog, insisto. Esto implica, que la estructura de los párrafos, oraciones escritas, y el texto en general, en una página web o blog, puede tener un gran impacto y relevancia para el lector, si un visitante o usuario, decide quedarse o no, para leer lo que usted tiene que decir, en un artículo, por ejemplo.
Para éste nuevo tutorial, me encantaría enseñaros, algunos ejemplos para construir párrafos creativos y diseños de texto, mediante CSS3. Capitulares y efectos de texto en párrafos, extraídos de algunos sitios que he ido visitando y que me han parecido interesantes compartirlos con todos ustedes, a continuación podrás ver unos muestrarios, o la demostración, junto a su respectivo código para la incorporación en una web o un blog, verás primeramente la demo, luego el código CSS, y el HTML, para indicar la llamada al estilo elegido, anteriormente.
La primera opción son los Párrafos Capitulares
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare vehicula felis adipiscing euismod. Mauris vestibulum vel odio tincidunt molestie. Suspendisse vestibulum, justo non tempor gravida, lectus eros auctor metus, eu congue eros turpis eget.
p.first:first-letter, .dropcap {
float: left;
font-size: 4.8em;
padding: 2px;
font-family: Georgia, Tahoma, sans-serif;
margin-right: 10px;
line-height: 0.35em;
}
<p class="first">Aquí_el_texto_del_párrafo</p>
La segunda opción es un Párrafo Capitular con fondo
Nulla tristique aliquet sem, sed accumsan tellus. Phasellus dictum velit et quam pulvinar commodo. Vestibulum gravida ipsum malesuada nisl varius, ac feugiat sapien volutpat. Fusce a nibh ac dui sagittis elementum. Vestibulum augue risus, semper a sollicitudin sit amet, consequat vel sapien. Nunc commodo elit eu turpis lobortis sollicitudin.
p.altdrop:first-letter, .dropcap-alt {
float: left;
background: #434343;
color: #fff;
font-size: 2.2em;
padding: 10px 14px;
margin-right: 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
<p><span class="dropcap-alt">La_letra_de_inico_Capital</span>El_párrafo_a_mostrar</p>
Ejemplo con la etiqueta <blockquote>!
Quisque dictum, mi convallis tempus viverra, leo dolor convallis turpis, tincidunt tincidunt nunc lorem sit amet quam. In augue sapien, gravida non eros at, accumsan fermentum est. Maecenas malesuada tempus orci, in pellentesque tellus sodales sit amet. Vestibulum blandit.
blockquote {
color: #909090;
font-size: 1.15em;
line-height: 1.5em;
font-style: italic;
border-left: 5px solid #ab9f5c;
padding: 12px 20px;
margin-left: 20px;
margin-bottom: 30px;
quotes: none;
}
<blockquote>Aquí-el_texto_a_mostrar</blockquote>
Ejemplo párrafos con fondo de color!
Advertencia: Quisque vestibulum blandit magna, non varius lectus consequat et. Sed elementum dui elit, sit amet venenatis massa faucibus tempus. Quisque vestibulum.
.notice {
display: block;
padding: 12px 20px;
background: #fff5af;
color: #a79b44;
text-shadow: 1px 1px 0 #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
<p class="notice"><strong>Advertencia:</strong> Texto_del_párrafo</p>
Vía: Design Shack