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.
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.
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.
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.
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.
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.
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.
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.
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»
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.
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.