Me encanta vigilar el creciente mundo de las aplicaciones web de un solo propósito que están específicamente destinadas a hacer que parte de su trabajo como diseñador web sea un poco más fácil. Hoy veremos tres de estas herramientas que me han parecido divertidas y útiles recientemente.
Comenzaremos mirando a Colllor, una excelente manera de convertir un solo color en muchos. A continuación, saltaremos a Warp CSS y crearemos una sorprendente tipografía CSS que probablemente ni siquiera creíste posible. Finalmente, veremos Bear CSS, una forma de generar rápidamente una hoja de estilo de inicio basada en su HTML. ¡Empecemos!
Colllor
La primera herramienta nueva que veremos es Colllor, una aplicación divertida que te ayudará a agregar variedad a tus paletas de colores. El concepto aquí es simple: "Convertir un color en una variedad de alternativas". Vamos a ver cómo funciona.
Cómo funciona
El primer paso es simplemente elegir un color. Toma ese color de inicio, escríbelo y pulsa "Elegir color". botón. Puede escribir un código hexadecimal o incluso un color con nombre estándar. Alternativamente, puede presionar el botón de color aleatorio para darle una prueba de manejo.
Desde aquí la salida es bastante impresionante. Obtendrá cuatro barras horizontales llenas de nuevas muestras de color para elegir: tonos / tonos, tonos, mezclas y similares. Su color original está claramente resaltado como referencia.
Se le presentan más de cincuenta muestras relacionadas, cada una de las cuales está bien etiquetada, tiene un efecto de desplazamiento en 3D y se puede copiar en su portapapeles con un solo clic.
Mis pensamientos sobre Colllor
Soy un tonto para las aplicaciones de color y esta me atrajo de inmediato. Está realmente bien diseñado y es lo suficientemente interactivo como para hacer que encontrar colores sea una experiencia realmente agradable. Al principio, estaba un poco confundido acerca de por qué no se incluían las opciones estándar, como generar muestras complementarias, pero existen muchas aplicaciones con esa funcionalidad y me gusta que Colllor busque ser único en su enfoque.
Generalmente, para encontrar diferentes tonos de un solo color, uso 0to255, sin embargo, ese sitio tiende a ser bastante lento. Colllor es a la vez más rápido y más versátil. Particularmente único es el? Mix? Opción, que le permite elegir dos colores para ver un degradado de colores individuales entre los dos.
Otra cosa que funciona bien es la? Copia al portapapeles? característica. Muchas utilidades de color sienten la necesidad de incluir el? #? cuando se copia el color, lo que es útil para CSS, pero malo para Photoshop (CS6 se ocupa de esto). Por ahora, prefiero que el símbolo quede fuera, que es la ruta que tomó Colllor.
Realmente no tengo ninguna queja aquí. Colllor es una utilidad de color fantástica y gratuita que absolutamente debes agregar a tu lista de marcadores.
CSS Warp
CSS Warp es una herramienta loca que te permite crear tipos de web en vivo que siguen un camino complicado. La herramienta es notablemente similar a la funcionalidad de tipo de ruta en Illustrator, por lo que el flujo de trabajo debería ser lo suficientemente familiar como para que lo pueda captar con bastante rapidez.
Cómo funciona
Veamos una prueba para ver cómo funciona. Lo primero que debes hacer es ingresar algún texto. Debido a que el código final generado puede ser masivo (hablaremos de esto en un minuto), recomiendo mantener su texto corto y dulce. Una vez que hayas terminado, haz clic en el botón de deformar.
El siguiente paso es definir la curva que seguirá su tipo. Las opciones aquí son bastante flexibles, puede definir su propia ruta de estilo Bézier o elegir un círculo. Los puntos crean curvas redondeadas de forma predeterminada, pero hay una opción en la parte inferior de la aplicación para cambiarlas en esquinas nítidas.
Realice las manos reales en el moldeo en la pequeña ventana de vista previa que aparece junto a todos estos controles. Esto se actualiza en vivo con cualquier cambio que realice para que siempre pueda saber exactamente cómo se verá el producto final.
También puede definir varias opciones con respecto a la fuente, esto incluye la capacidad de establecer el tamaño, la altura de la línea, el kerning * y la fuente. Me encanta que pueda elegir de la biblioteca de fuentes web de Google aquí. También tiene algunas opciones sobre cómo se alinea el texto con la ruta.
* Utilicé el término? Kerning? aquí porque ese es el nombre del control en la aplicación real. Sin embargo, en realidad está mal etiquetado, este control deslizante realmente controla el seguimiento del tipo. La diferencia es importante. Lee esto para más información.
Una vez que haya terminado y tenga el tipo tal como lo desea, haga clic en ¿Generar HTML? botón sobre la vista previa para obtener el fragmento de texto para copiar y pegar en su código.
Mis pensamientos sobre CSS Warp
Honestamente puedo decir que nunca he visto otra herramienta que saque tan bien este truco con texto web en vivo. Los resultados son completamente impresionantes y simplemente no es algo que quieras hacer a mano. Me encanta cuando los desarrolladores toman la iniciativa de ampliar los límites de lo que es posible en la web y distribuir su trabajo libremente.
Mi único problema real aquí es realmente algo completamente fuera del control del desarrollador. CSS y HTML en realidad no tienen una funcionalidad integrada para escribir a lo largo de una ruta, por lo que la única forma de hacerlo es envolver cada letra en un espacio, luego colocarlas y rotarlas de forma independiente. Esto lleva a una gran cantidad de código que no es fácil de interpretar. Como dije, el desarrollador realmente no puede evitarlo, otras herramientas que apuntan a letras individuales como Kern.js están obligadas a trabajar de la misma manera.
En general, me sorprendió lo bien desarrollada que está la aplicación en su conjunto. Es extremadamente fácil obtener el efecto que desea y hay un montón de opciones para modificar en el camino. También hay una versión de JavaScript que deberías revisar.
Oso CSS
Bear CSS hace solo una cosa: sirve una hoja de estilo de inicio cuando carga un archivo HTML.No hace el trabajo de estilizar su página web, simplemente le ayuda a comenzar a escribir los ganchos de estilo obvios para usted.
Cómo funciona
Bear CSS no requiere realmente ningún pensamiento o esfuerzo por tu parte. Todo lo que hace, de hecho, todo lo que puede hacer, es cargar un documento HTML.
Una vez que cargue su documento HTML, es hora de hacer clic en "Descargar CSS". botón. Cogí un documento aleatorio que tenía por ahí solo para probarlo y recibí el siguiente resultado.
Mis pensamientos sobre el oso CSS
Yo era bastante escéptico acerca de esta herramienta. Me gusta escribir mi propio CSS y no me gustó la idea de que algo intentara hacerlo por mí. Dicho esto, me sorprendió gratamente la salida. La organización, aunque no es adecuada para cada proyecto, es definitivamente lógica y bastante ampliamente aplicable. Me gusta eso sin ningún esfuerzo. Tengo un buen documento de inicio de CSS con los ganchos principales a los que me gustaría apuntar, claramente separados en categorías como tipografía y diseño.
Obviamente, no es una herramienta mágica. No lee tu mente y crea selectores complejos, es solo las "necesidades del oso". (¿Consíguelo?). No todo el mundo escribe el HTML completo de una página web antes de comenzar con CSS, pero si lo hace, definitivamente esto es algo que debe probar.
Una de las características que realmente me gustaría ver es la capacidad de pegar algo de HTML en lugar de cargar un archivo. Sería bueno hacer una copia rápida desde mi editor de texto abierto. Además, en algunas de mis pruebas que contenían clases repetidas, el CSS generado también repitió ese selector de clase, que obviamente es redundante e innecesario.
Otra cosa que me gustaría ver es algunas opciones adicionales para que los usuarios profesionales puedan modificar. Algunos métodos de organización diferentes, ya sea para incluir o no elementos flotantes con algo envuelto en un ancla, y tal vez una reinicialización / normalización de inclusión.
Conclusión
Espero que hayas encontrado una nueva herramienta o quizás tres nuevas herramientas para agregar a tu bolsa de regalos de desarrollo web. Las tres aplicaciones anteriores no afectarán drásticamente su flujo de trabajo, pero pueden hacer que algunas partes de él sean un poco más fáciles.
Deje un comentario a continuación y déjenos saber qué piensa de las tres aplicaciones anteriores. ¿Has usado alguno de ellos antes? ¿Qué otras grandes herramientas te han ayudado recientemente?