Emoticonos con CSS y JQuery para el diseño web

 

Aprender algo nuevo cada día es un buen hábito para mantener una mente sana. Por esto, hoy os traemos un truquillo para que podáis aplicar en vuestro diseño web.

 

Un diseño web sencillo usando CSS3

 

Hemos descubierto un plugin de jQuery, junto con su CSS, llamado CSS Emoticons, muy sencillo però funcional, que te permite convertir cualquier emoticonos de texto, ejemplo :-D, en los típicos emoticonos. Para ello utiliza puro CSS3, sin imágenes, utilizando los recursos que el CSS3 nos da para el diseño web actual.

 

Este plugin utiliza las propiedades de CSS3, transformar, border-radius, box-shadow, pendiente, y la transición (cuando sea compatible), porque como ya sabréis no siempre todos los navegadores lo aceptan. Aunque este pluguin acepta

Firefox, Chrome, Safari y Opera, pero no Internet explorer, en el que veremos los emoticonos como siempre (XD  😀  SD)

 

Dejémonos de teoría y vayamos a la práctica

Demostración del puro CSS

Hola  que gran plugin !  :-)

El html

<div class="comment">
  Hola que gran plugin! :-) 
</div>

Los ficheros necesarios a incluir

<link href="stylesheets/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/jquery.cssemoticons.js" type="text/javascript"></script>

El JS para activar el plugin

$('.comment').emoticonize();

Compártelo y suscríbete a la newsletter, prometémos molestarte lo justo y necesario