Categoría: css


Círculos con animación parallax Css

Esta es una animación completamente en css, no utiliza javascript, aunque está escrita en Haml y Scss, se puede ver también la versión compilada en simple html y css. Estos círculos contienen una pequeña animación que se ejecuta al posicionar el cursor sobre ellos, dando un efecto parallax. Es una manera muy eficiente de realizar una animación y como no se está ejecutando todo el tiempo, no consume ningún tipo de recursos y se puede utilizar en conjunto con otras animaciones. Pueden ir al enlace original: http://codepen.io/jcoulterdesign/pen/OMOqjy


Fondo con animación Css – Js

Este es un fondo animado de burbujas o partículas, utilizando css para la estructura y los gradientes, mientras que se usa enteramente javascript para realizar cálculos para la animación y generación de partículas que se esparcirán por el fondo. Es basado en canvas de html5, así que se necesita de los navegadores actuales que lo soporten. Una ventaja de hacer animaciones en javascript, es que se mantiene un estándar que soporta varios navegadores, en cambio sí usaran ccs3, estaría limitado a los navegadores que lo soporten. Sin importar que tecnología utilicen, las animaciones generadas de esta manera tienden a ser […]


Minificar, comprimir código CSS

Como indiqué en un post anterior Minificar, comprimir código JavaScript, también podemos realizar lo mismo con los archivos css, igualmente es para reducir el tamaño de los archivos generados. Es importante cuando trabajamos con grandes archivos o librerías completas, sino tienes tantas líneas de código, no será necesario estar comprimiendo el archivo, ya que la reducción no sería muy notable. Recomiendo esta página: http://cssminifier.com/ Se encarga de convertir este código:

En este:

 


Generador de gradiente Css

En esta página podemos generar todo tipo de gradientes, seleccionando cualquier color que deseemos y también genera código estándar compatible con diversos navegadores, podemos también seleccionar el tipo de código Css o Sass. Es una ventaja no tener que generar manualmente el código pero una vez comprendido resulta fácil, lo he usado bastante para crear todo tipo de backgrounds. http://www.colorzilla.com/gradient-editor/


Tarjeta de presentación con animación css

Codepen.io es una página para publicar códigos del lado del cliente, ya sea html, css y javascript. Se ejecuta en un pequeño entorno, esto nos permite mostrar el resultado en vivo y compartirlo. Aquí les muestro una pequeña aplicación que me compartieron, se trata de una tarjeta de presentación web, con la capacidad de realizar pequeñas animaciones para darle un toque artístico increíble, esto demuestra lo que se puede realizar con diseño y programación css. Pueden ir al enlace original: http://codepen.io/darkosxrc/pen/ZGRQbv


Generador de Css3

Siempre es conveniente tener a la mano una herramienta generadora de códigos css3. Desde que se implementó el css3 se ha convertido en la mejor forma de crear diseños especiales, aunque al principio se podía complicar y crear códigos desde cero resulta tedioso si te encuentras en una situación de apuro, por ello recomiendo esta herramienta. En la página http://css3gen.com/ encontraremos un recurso que nos permitirá fácilmente crear: sombreado (box shadow), texto con sombra (text shadow), botones personalizados, gradientes, transformaciones, animaciones, objetos 3d y mucho más.