Para los que buscan animaciones hechas con CSS

csswand

El CSS forma una parte importante de la web actual. Son millones de webs las que usan efectos realizados con CSS, y cada vez son más populares en todo el mundo.

Para los desarrolladores que estén interesados en aplicar efectos a sus webs, tenemos muchos recursos adecuados, y hoy hablaremos de algunos de ellos: Continúa leyendo «Para los que buscan animaciones hechas con CSS»

StyleURL, para exportar y compartir cambios en CSS de forma sencilla

StyleURL

Si os dedicáis al mundo del desarrollo web y sois usuarios de Google Chrome es probable que la extensión de la que os hablamos a continuación os llame la atención. Se trata de StyleURL, una herramienta que nos permite exportar y compartir cambios en CSS de forma sencilla.

Tal y como afirman los creadores de la herramienta, el objetivo de StyleURL es facilitar la colaboración entre desarrolladores web. Para ello, una vez instalada la extensión podremos compartir los cambios que realizamos en el código CSS de nuestra web mediante una URL al proyecto generada automáticamente por la extensión.

Continúa leyendo «StyleURL, para exportar y compartir cambios en CSS de forma sencilla»

piCSSel-art, herramienta de creación de pixel-art mediante código CSS

piCSSel-art

piCSSel-art es una herramienta gratuita basada en la web desarrollada a modo de experimento por Kushagra Gour, para posibilitar la realización de creaciones pixel-art usando sólamente código CSS.

Ahora la vuelve a lanzar completamente renovada con una serie de funciones interesantes: posibilidad de compartir URL, opciones de configuración de lienzo y tamaño de pí­xel, disponibilidad de cuadrí­cula, con paletas de colores, y más accesible por teclado.
Continúa leyendo «piCSSel-art, herramienta de creación de pixel-art mediante código CSS»

Keyframes, un sencillo editor online para crear animaciones en CSS

Keyframes

A dí­a de hoy tenemos a nuestra disposición multitud de herramientas con las que crear animaciones. Si estáis buscando una herramienta que os permita generar vuestras propias animaciones personalizadas en CSS, a continuación os recomendamos una opción que podrí­a resultaros de gran utilidad. Hablamos de Keyframes, un sencillo editor para crear animaciones desde el navegador y exportar el resultado en CSS.

Tal y como podéis comprobar en la web de la plataforma, Keyframes es una herramienta extremadamente útil a la hora de crear, visualizar y reproducir animaciones sin necesidad de tener que estar cambiando constantemente entre el navegador y nuestro editor. Sin duda, uno de sus pilares principales es su sencillo funcionamiento, y es que Keyframes nos permite trabajar usando una lí­nea de tiempo muy visual.

Continúa leyendo «Keyframes, un sencillo editor online para crear animaciones en CSS»

CSS Gradient, un completo generador gratuito de gradientes

CSS Gradient

Todos aquellos que os dediquéis al mundo del diseño y la programación web estaréis al tanto de la popularidad del uso de los gradientes, recursos gráficos ampliamente utilizados. Por ello, cada vez son más las herramientas que nos permiten crear gradientes de manera sencilla y sin necesidad de descargar nada. Hoy os hablamos de CSS Gradient, una herramienta gratuita con la que crear gradientes para nuestra web en cuestión de pocos minutos.

Tal y como podéis comprobar en la web del recurso del que os hablamos, su funcionamiento es de lo más simple e intuitivo. Para crear nuestro primer gradiente solo tenemos que utilizar el selector de colores incorporado. Además, podemos añadir tantos colores nuevos como queramos haciendo clic en la barra de colores horizontal. Una de las ventajas de CSS Gradient es la posibilidad de usar el formato hexadecimal para gestionar los colores, lo que nos permitirá usar un color exacto sin ningún inconveniente.

Continúa leyendo «CSS Gradient, un completo generador gratuito de gradientes»

Purgecss, para reducir el tamaño de archivos css eliminando selectores no utilizados

Purgecss

Aquellos desarrolladores de sitios web que estén generando proyectos utilizando para ello frameworks css como Bootstrap, Foundation, Pure CSS o Materialisecss, entre muchos otros posibles, agradecerán de la existencia de Purgecss.

Se trata de una herramienta gratuita y de código abierto que podrán integrar en sus flujos de trabajo para tratar de conseguir que los archivos de estilos css generados por estos frameworks reduzcan su tamaño por un tamaño más acorde al contenido que se mostrará finalmente.
Continúa leyendo «Purgecss, para reducir el tamaño de archivos css eliminando selectores no utilizados»

2 sitios web para generar patrones en CSS de manera sencilla

Patrones

Si os dedicáis al mundo del diseño web estamos seguros de que en más de una ocasión habréis tenido que crear un patrón de colores, algo que puede llegar a resultar pesado si no contamos con herramientas que nos faciliten la tarea. Por esta razón os recomendamos dos sitios web con los que generar patrones en CSS de manera sencilla.

Continúa leyendo «2 sitios web para generar patrones en CSS de manera sencilla»

CSSPeeper, para obtener las especificaciones de cualquier elemento CSS con un clic

CSSPeeper

Si os dedicáis al mundo del diseño web y estáis buscando una herramienta que os pueda facilitar vuestro trabajo diario, la extensión de la que os hablamos a continuación os será de gran ayuda. Se trata de CSSPeeper, una utilidad para Google Chrome con la que podemos obtener las especificaciones de cualquier elemento CSS con un clic.

El principal punto a favor de CSSPeeper es que no es necesario ponernos a consultar el código de una web para analizar los elementos CSS de la misma. En lugar de ello, la extensión nos muestra toda la información necesaria de una forma elegante, ordenada y mucho más rápida que si llevásemos a cabo el proceso de forma manual. De esta forma, una vez instalada podremos consultar parámetros como el grosor de una lí­nea, las dimensiones de un botón o los colores exactos de una web.

Continúa leyendo «CSSPeeper, para obtener las especificaciones de cualquier elemento CSS con un clic»

Varias herramientas de utilidad para los que trabajáis con CSS

Imagen

Si os dedicáis al mundo del diseño y desarrollo web es probable que os interese conocer diferentes herramientas con las que trabajar con CSS desde el navegador. A continuación os dejamos algunas de las alternativas más llamativas a la hora de utilizar botones, animaciones e incluso emojis.

Continúa leyendo «Varias herramientas de utilidad para los que trabajáis con CSS»

CSS Stats, para obtener estadí­sticas e información del CSS de cualquier sitio web

CSS Stats

Hoy os traemos una herramienta que será de gran utilidad para todos aquellos que os dedicáis al mundo del desarrollo de páginas web. Se trata de CSS Stats, una sencilla pero útil herramienta con la que podemos obtener estadí­sticas e información del CSS de cualquier sitio web en cuestión de segundos.

Tal y como podéis ver en la captura de pantalla que ilustra este artí­culo, CSS Stats es capaz de desglosar la información existente en el CSS de la página web que queramos consultar para mostrarla de forma visual y ordenada. Sin duda, se trata de una forma interesante de consultar datos como el número de reglas, selectores o propiedades del CSS, así­ como su peso. Y no solo eso, ya que también es posible acceder a la información de colores únicos, lo que puede resultar bastante útil.

Continúa leyendo «CSS Stats, para obtener estadí­sticas e información del CSS de cualquier sitio web»