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»

Animista, una colección de animaciones en CSS para usar en nuestros sitios web

animista

Animista comenzó como un proyecto personal de Ana Travas, una web que organizaba animaciones realizadas en CSS para que sea más fácil encontrarlas cuando se necesiten aplicar en un proyecto especí­fico.

Ahora se ha transformado en un excelente directorio de animaciones CSS que cualquier persona puede usar para ilustrar y dar efectos originales en sus sitios web. Una web en la que dejan claro que el flash ya no es necesario para animar el contenido que vemos a diario en Internet.
Continúa leyendo «Animista, una colección de animaciones en CSS para usar en nuestros sitios web»

Dos sitios web en los que encontrar botones para tus proyectos web

El uso de diferentes elementos web que ofrezcan una buena experiencia de usuario es algo de lo más importante. Si estáis buscando un sitio web desde el que descargar botones y otros elementos para vuestros proyectos web, es probable que las herramientas que os recomendamos a continuación os sean de utilidad.

bttn.css
bttncss

Si estáis buscando una alternativa desde la que descargar todo tipo de botones facilmente personalizables, bttn.css es una de las mejores opciones que encontramos en Internet. Además de poder encontrar botones en diferentes tamaños, la web nos permite cambiar el color de los mismos. Tan pronto hayamos decidido que botones queremos incluir en nuestro sitio web solo nos quedará obtener el código de los mismos. Por último, nos ha parecido interesante destacar la opción que nos permite descargar todo el contenido de la web con un solo clic.

Continúa leyendo «Dos sitios web en los que encontrar botones para tus proyectos web»

Transformicons, web que recopila iconos, sí­mbolos y botones animados SVG y CSS

transformicons

Como sabréis, a lo largo de los últimos años os hemos ido recomendando diferentes recursos de utilidad para todos aquellos que os dedicáis al mundo del diseño. En esta ocasión nos ha parecido interesante destacar la utilidad de Transformicons, una web que se encarga de recopilar iconos, sí­mbolos y botones animados SVG y CSS.

Sin duda, una de las ventajas más interesantes de Transformicons es la posibilidad de comprobar el funcionamiento de los diferentes botones desde la web, sin necesidad de descargar nada a nuestro equipo. De esta forma podemos comprobar en cuestión de segundos si el funcionamiento de un botón determinado es el deseado. En cuanto sepamos el icono que queremos emplear tenemos que hacer clic sobre el botón Builder para copiar el código necesario.

Continúa leyendo «Transformicons, web que recopila iconos, sí­mbolos y botones animados SVG y CSS»

Una web para elegir estilos de botones únicos para tus proyectos web

bttncss

Si te encuentras desarrollando un proyecto web y deseas incorporar algún botón moderno, elegante y con estilo, igual no está de más pasarte por la web de bttn.css. Se trata de un recurso web que te podrá servir de inspiración donde además tendrás todo lo necesario para incorporar algunos de los estilos de botón disponibles en dicha página dentro de tu propio proyecto.

Para ello, deberás descargarte primeramente la hoja de estilos CSS que encontrarás para su descarga desde la parte superior. Luego tan sólo deberás de escoger el color deseado, el tamaño deseado y finalmente el estilo concreto para obtener el código que deberás incorporar en tu proyecto para hacer referencia a dicho estilo. En este sentido, la propia web te permite de forma sencilla copiar el código que necesitas al portapapeles del sistema, ahorrándote algo de tiempo.
Continúa leyendo «Una web para elegir estilos de botones únicos para tus proyectos web»

CSSViewer, para visualizar las propiedades CSS de cualquier página web

cssviewer

Como ya sabréis, con frecuencia os recomendamos algunas de las mejores relacionadas con el mundo de Internet. En esta ocasión os traemos una herramienta de utilidad para todos aquellos que os dedicáis al mundo del desarrollo web. Se trata de CSSSViewer, una extensión para Google Chrome con la que visualizar las propiedades CSS de cualquier página web.

Al igual que otras herramientas similares, el uso de CSSViewer es bastante simple. Para activar la extensión solo hay que hacer clic en el icono de la extensión y pasar el cursor sobre el elemento que queramos inspeccionar en la página web en la que nos encontremos. De esta forma obtendremos el resultado que podéis ver en la imagen que ilustra este artí­culo.

Continúa leyendo «CSSViewer, para visualizar las propiedades CSS de cualquier página web»

CSSReference, una fantástica guí­a visual para aprender CSS

cssreference

Como ya sabréis, no dejamos pasar mucho tiempo sin recomendar alguna herramienta relacionada con el mundo de la programación, sobre todo si tenemos en cuenta la importancia de este campo. En esta ocasión nos ha parecido interesante ampliar la lista de recursos con CSSReference.io, una expléndida guí­a visual para todos aquellos que estéis aprendiendo CSS, un lenguaje imprescindible para el diseño web.

Sin duda, una de las mejores formas de aprender cualquier cosa es probando y equivocándose. Aun así­, siempre resulta interesante contar con diferentes recursos que nos faciliten el camino. Como habréis imaginado, CSSReference.io es una herramienta excelente a la hora de comprender exáctamente qué hace cada propiedad de CSS, algo que la web nos explica haciendo uso de imágenes y ejemplos animados.

Continúa leyendo «CSSReference, una fantástica guí­a visual para aprender CSS»

Las variables en CSS serán aceptadas en Chrome

Variable en un archivo CSS
Variable en un archivo CSS

Si habéis trabajado con CSS seguramente echaréis de menos las variables. Poder definir una variable con un color en la parte superior del código, por ejemplo, y hacer referencia a la misma durante todo el archivo, ayuda en la manutención, ya que en pocos segundos podemos cambiar el color de varios elementos, sin necesidad de tener que buscarlo linea por linea.

El problema es que la mayorí­a de los navegadores no saben interpretar variables en el código CSS, por lo que seguimos sin poder usar un recurso tan básico en la programación dentro de las hojas de estilo de nuestros sitios web.

Eso está cambiando. Continúa leyendo «Las variables en CSS serán aceptadas en Chrome»