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 :).
ยฟ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?
