Efecto estado de Facebook sobre fondo de color con CSS 3 y jQuery

Tutoriales

Demo Github

CSS y jQuery son muy potentes compañeros que nos ayudan a crear interfaces  increíbles. La aplicación de Facebook para móviles nos permite publicar un estado sobre un fondo de color, entero o degradado, esto le da vida a nuestros estados, para que entiendan mejor de lo que hablo pueden ver la siguiente imagen:

Fuente: techcrunch.com

Lo que voy hacer es el efecto en cuestión, vamos por el tutorial.

Primero creare el textarea en donde escribiré mi estado:

Así mismo creare una botonera para seleccionar los fondos de color para aplicarle a nuestro post:

También he agregado dos imágenes como mascaras de la aplicacion facebook para móviles y el HTML de la estructura del dispositivo móvil (iPhone), acá todo el codigo completo:

Ahora mediante CSS 3 a mi contenedor .cont le agrego las siguiente propiedades CSS:

Creamos otras clases con diferentes propiedades, una de ellas es la propiedad background: linear-gradient();  las aplicare a mi contenedor .cont mediante jQuery, la propiedad background: linear-gradient(); es el color de fondo para nuestro estado:

Cada botón servirá como una vista previa del color que se va aplicar al contenedor como fondo para nuestro estado, creamos una clase para cada botón, acá las propiedades CSS para un botón, el resto de botones contiene casi las mismas clases, solo varia el contenido de la propiedad background:

Por último mediante jQuery le doy funcionalidad a los botones que al hacer click cambian el color de fondo de mi Post:

Solo he destacado los códigos de las funciones resaltantes del tutorial, al inicio del artículo esta el repositorio Github en donde pueden ver el código completo de la aplicación.

Síguenos en nuestras redes sociales y suscríbete a nuestro canal de Youtube. Espero que este tutorial te sirva de mucho.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required