Como crear un Speech Bubbles con CSS3

Geek / WEB CODE

Amigos, continuo con esto de la experimentación y mas que nada actualización propia del uso de las hojas de estilo, saben que es curioso, hace muchísimos años cuando yo empece con esto de la web uno de mis objetivos era crear tiras cómicas, tiras cómicas como las de Garfield, y la única manera de hacerlo era con imagenes, incluso en uno de mis proyectos mas queridos ” LA CASA DEL MOSTRO”, llevo años trabajando con el uso de imagenes, esto no es que este mal, pero creo que ya es momento de crear una aplicación web para la creación dinamica de tiras cómicas, algo quizas no tan complicado, pero después de este ejemplo quizas me den la razón, en caso contrario pues no me la den :).

 

La Casa del Mostro
Tira comica

 

¿Como hacer Speech Bubbles con CSS? Ese es nuestro objetivo.

Primero: ¿Si saben que es un Speech Bubble verdad?

[codepen_embed height=”257″ theme_id=”22281″ slug_hash=”rxXmQK” default_tab=”result” user=”fmorenor”]See the Pen SPEECH BUBLES by Francisco Moreno (@fmorenor) on CodePen.[/codepen_embed]

Pues muy bien empezaremos dejandoles el codigo de HTML para probar.

<img id="coyo_char" src="http://comicstrip.elmostro.com/wp-content/uploads/2014/06/thumb_coyo.jpg"></figure>
<a id="bubble">
Coyo es una diosa lunar y le encanta todo lo referente a la astronomía. Tiene 400 hermanos, además de Huitzi, que son todos conejos. A Coyo le gusta mucho molestar a su hermano Huitzi, pero además siempre discute con Xochi acerca de ropa y los accesorios.</a>

Seguiremos con las características de la hoja de estilo, aqui hay dos cosas importantes. Primero cargamos la imagen de COYO y con la hoja de estilo le damos solo un poquito formato, redondeando orillas y con una pequeña smbra, para que  aparezca en la parte izquierda de la pantalla, Segundo crearemos el globo  “BUBBLE” y de manera Tercera  “BUBBLE AFTER” posterior el señalador hacia donde apunta el speech bubble.

#coyo_char {
	-webkit-box-shadow: 3px 3px 3px #7C7C7C;
	box-shadow: 3px 3px 3px #7C7C7C;
	border-radius: 20px;
}

#bubble {
	position: absolute;
	width: 325px;
	height: 250px;
	padding: 18px;
	background: #C0E4FB;
	-webkit-border-radius: 47px;
	-moz-border-radius: 47px;
	border-radius: 47px;
	right: 0px;
	top:0px;
}

#bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 30px 15px 0;
border-color: transparent #C0E4FB;
display: block;
width: 0;
z-index:  6;
left: -30px;
top: 100px;
}

Como verán es bastante sencillo el uso de CSS para crear Speech Bubbles, mas sin embargo les dejare una liga que les puede facilitar muchísimo el trabajo.

http://html-generator.weebly.com/css-speech-bubble-generator.html

Ahora viene la pregunta del siglo, creen que sea posible crear con solo HTML5, Javascirpt y CSS una pagina que facilite la creación de tiras cómicas, sobre todo para nosotros los que no tenemos NPI de como usar Ilustrator.

¿ALGUIEN SE APUNTA A YUDARME A CREAR ESTA APLICACION?

Volver arriba