parallax background

Efectos de movimiento y brillo CSS3

Fondo estilo video juegos con CSS
7 mayo, 2017
Ficción vs Realidad
9 enero, 2018
 

Saber maquetar CSS te abre un mundo infinitas posibilidades, al igual que infinitos son los ejemplos que hay online para aprender trucos.

A unque no lo hacemos tanto como nos gustaría, las personas que nos dedicamos al diseño y desarrollo intentamos encontrar huecos para perfeccionar nuestras técnicas, descubrir recursos o para simplemente disfrutar de un proceso creativo cuyo resultado nos haga sentir satisfechos. En maquetación y desarrollo web, cada día aparecen nuevos recursos, tutoriales o técnicas y debemos estar al tanto de todo. En este post veréis el resultado sobre un par de efectos de CSS3 que pueden dar cierto empaque a un proyecto, siempre es bueno tener este tipo de recursos organizados en nuestra biblioteca porque el día menos pensado nos pueden hacer falta.

Por un lado tenemos el título con efecto de brillo con movimiento, este efecto puede hacerse combinando colores y, bueno, aquí publicamos el último resultado, pero hemos probado con varias combinaciones de colores y la verdad es que da bastante juego. Por otro lado, debajo del título, puedes ver una serie de items interactivos, en esta caso pueden ser para un menú, pero de nuevo las posibilidades son infinitas, puede servir como caja destacada interactiva o para cualquier tipo de actividad didactica. En el ejemplo vemos una analogía entre los 4 elementos que conforman la vida como la conocemos y los 4 elementos que todo diseñador necesita para desarrollar su labor.


Los 4 elementos del diseño web


 

Accede al código original y hazlo tú mismo:

Estos efectos CSS tienen su base en 2 ejemplos que hemos encontrado por la red, para ver cómo hacer el efecto de texto-brillo con movimiento entra en la web de Zachstronaut. Además del ejemplo mencionado, también puedes ver otro efecto (efecto fuego de gas en la cocina, y no es broma)

Para las cajas con movimiento hemos bicheado en Tympanus, haz click en el nombre y verás los archivos para hacerlo tú mismo. Si quieres que cada caja tenga su propio hover de color como en nuestro ejemplo, tendrás que pensar un poco, pero en realidad es bastante sencillo una vez metid@s en faena.


La música es genial, pero estoy más emocionado con la Tecnología. Maquetar a través de código (coding) es el espacio más creativo.

Will.i.am, cantante y fundador de Black Eyed Peas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *