Llevar un diseño de Photoshop a la web en un clic no es ni siquiera una idea remotamente nueva. ¿Durante todo el tiempo que ha habido? ¿Diseñadores web? Ha habido el sueño de tal flujo de trabajo. Hoy vamos a ver otra herramienta que hace esta promesa: CSS Hat.
Sin embargo, CSS Hat es diferente a otras aplicaciones que has visto. No es un WYSIWYG completo para permitirte construir un sitio completo sin escribir código, sino que es una forma de eliminar algunos estilos CSS3 rápidos en un solo elemento utilizando el proceso que has usado durante la última década o más. justo en Photoshop. Alerta de spoiler: es bueno. Realmente bueno. Sigue leyendo para ver por qué.
Conoce CSS Hat
Vamos a hablar de lo que CSS Hat es y no es. En primer lugar, no es una aplicación independiente. En su lugar, es un plugin de Photoshop. Y no me refiero a uno de esos enormes complementos de Photoshop que realmente se siente como una aplicación separada, me refiero a un panel muy simple que realmente no tiene mucho más allá de la salida basada en texto.
Lo que esto significa para usted es que la curva de aprendizaje es notablemente baja. De hecho, es prácticamente inexistente si conoce bien el Photoshop.
El truco realizado por CSS Hat es que tiene la capacidad de mirar una capa en Photoshop, analizar sus diversas características y luego intentar duplicar esas características con CSS puro. Obviamente, no puede replicar todo, pero el rango es bastante impresionante y se ajustará a sus necesidades para la mayoría de los propósitos. Estas son algunas de las cosas que puede manejar con éxito:
- Estilos de capa: Aquí es donde radica realmente el beneficio. Muchos de los estilos de capas de Photoshop se traducen notablemente bien en CSS (no todos, pero muchos). Algunos ejemplos de estilos admitidos incluyen sombras, brillos y superposiciones de degradado.
- Esquinas redondeadas: Si dibuja una forma vectorial con un radio de esquina redondeada, el CSS resultante usará un valor de radio de borde equivalente.
- Color de fondo y opacidad: Rellene una forma con un color y se aplicará también en su CSS.
- Estilos de tipografía: No tan rapido. Aparentemente esta característica está llegando, pero aún no se ha implementado. Los estilos de capa, los rellenos, etc. aún funcionan, pero no las propiedades relacionadas con la fuente.
Propina: Para tener una idea de cómo sería utilizar Photoshop para generar CSS, echa un vistazo a la aplicación web gratuita Layer Styles. No es tan simple como CSS Hat, pero es una alternativa poco divertida.
Pero odio los WYSIWYGs!
Lo sé, lo sé, odias Dreamweaver y cualquier otra aplicación que intente minimizar el aspecto de la codificación de los sitios web de construcción. Estoy ahí contigo. Codifico sitios a mano y disfruto haciéndolo de esa manera, así que puedes estar seguro de que no te guiaré por un camino que desafiará tus habilidades de codificación y producirá resultados horrendos.
CSS Hat no es una forma de que los no programadores engañen y construyan un sitio web atractivo con una base de código de mierda. De hecho, es obvio que CSS Hat es de hecho una utilidad para los codificadores, no para los no codificadores. Si va a usarlo de manera efectiva, necesita tener un conocimiento sólido de CSS: lo que es posible, cómo se implementa y cómo se aplican las diferentes propiedades en los navegadores.
Claro, CSS Hat va a hacer un montón de trabajo para usted con la generación de código, pero simplemente le proporciona una pequeña pieza del rompecabezas masivo que es un sitio web y depende de usted integrar esa pieza correctamente.
¿Entonces, para qué molestarse? Es una pregunta válida. Creo que la respuesta está en el hecho innegable de que CSS3, con todas sus increíbles habilidades, es voluminoso. Se necesita mucho código para lograr resultados incluso simples y si puede usar una herramienta que reduzca su inversión de tiempo y genere un código que sea virtualmente idéntico a lo que escribiría a mano, ¿por qué no lo usa?
¡Vamos a intentarlo!
Siempre soy muy escéptico con herramientas como esta, pero después de ver algunas de las muestras que CSS Hat pudo entregar, estaba ansioso por probarlo yo mismo. Para comenzar, construyamos un botón básico en Photoshop y veamos cómo CSS Hat maneja la tarea.
El proceso aquí es básicamente igual al que siempre usarías para crear un botón en Photoshop. Comenzaré dibujando una caja con un radio de esquina de 10px.
A continuación, agregaremos una superposición de degradado, comenzando desde # 009ced y finalizando en # 0065bd.
Ahora veremos una sombra interior para resaltar sutilmente en la parte superior.
Vamos a acelerar las cosas aquí y saltar hacia adelante hasta el botón terminado. Básicamente, desde aquí agregué un resplandor interior oscuro (funciona más como una sombra interna), un solo trazo de píxel y una sombra paralela. Tenga en cuenta que a pesar de que todo esto lleva un tiempo explicarlo, en realidad es solo un minuto o menos de trabajo de Photoshop.
Go Go Gadget CSS Hat!
Ahora que tenemos el botón de la forma que queremos, todo lo que tenemos que hacer es abrir nuestro panel de CSS Hat y encontraremos una gran cantidad de código en espera de ser copiada.
Antes de proceder a ver cómo se ve esto en el navegador, mejoremos aún más la salida. En la parte inferior, verás cinco botones. La primera copia el código a su portapapeles y las otras cuatro son opciones que puede activar y desactivar:
- Añade comentarios para explicar de dónde viene esa línea en particular.
- Genere CSS con prefijos específicos del proveedor cuando sea necesario.
- Agregue el ancho y el alto de la capa seleccionada a CSS.
- Envuelva el CSS en una regla que lleva el nombre de la capa.
Por conveniencia, voy a comprobar los cuatro opciones y nombre mi capa? .button? Ahora me dirigiré a un editor de código y pegaré el código resultante en mi CSS:
¿Funcionó?
Ahora llega el momento de la verdad, ¿qué aspecto tiene la demostración en vivo en comparación con la versión de Photoshop? Aquí está tu respuesta:
Como puedes ver, ciertamente no son perfectamente idénticos. Dicho esto, están bastante cerca y, de muchas maneras, la versión CSS es en realidad más suave y mejor. En mi opinión, ¡es una mejora en mi concepto de Photoshop!
Hay algunas advertencias que debes tener en cuenta. Algunos aspectos de los estilos de Photoshop simplemente no se pueden traducir a CSS en este momento. Por ejemplo, Photoshop agrega un modo de fusión de? Multiplicar? para colocar sombras de forma predeterminada, pero esto no se puede transferir a su CSS.
Dicho esto, hay muchas posibilidades avanzadas aquí, y puede agregarlas fácilmente a su trabajo con una buena codificación a mano a la antigua. El sitio web de CSS Hat muestra algunas demostraciones realmente impresionantes que se crearon con la ayuda de esta increíble herramienta, como la que se muestra a continuación por MusHo.
¡Tanto código!
Ya sé lo que algunos de ustedes piensan en este momento, así que permítame encontrarlo antes de dejar un comentario desagradable. El claro inconveniente de los ejemplos que vemos arriba es que toman mucho código de peligro. Sin embargo, esto no es culpa de CSS Hat en lo más mínimo. El código que produce está realmente bien organizado y lo más conciso posible.
La verdad es que, si desea usar imágenes para crear este tipo de efectos, puede ir fácilmente por esa ruta. Sin embargo, en estos días, en un mundo donde todo necesita cambiar el tamaño a diferentes dispositivos (algunos de los cuales tienen resoluciones de pantalla sorprendentes), nos gusta construir cosas con código puro, de modo que el tamaño y la pixelación nunca sean un problema.
Para hacer esto, recurrimos a nuestro amigo CSS3, que todavía se encuentra en un estado de flujo y, por lo tanto, requiere que utilicemos estos enormes bloques de código redundante con prefijos de navegador para lograr algo que valga la pena discutir. Cuando ve los enormes trozos de código de arriba, si tiene una reacción adversa, está reaccionando al estado del diseño web, no a esta herramienta específica.
Lo único que se podría decir sobre herramientas como CSS Hat es que hacen que sea muy fácil olvidar que realmente estás trabajando con código. Cuando escribe el código a mano, es mucho más consciente de la salida y, por lo tanto, es más conciso, tanto por la corrección como por la pereza. Asegúrese de que cuando esté utilizando cualquier generador de código, siempre examine de cerca la salida y pregúntese si el efecto vale la pena.
¿Qué piensas de CSS Hat?
Después de darle una prueba de manejo exhaustiva, me sorprende lo fácil que hace CSS Hat para generar CSS válido y bien codificado usando Photoshop. Es un sueño hecho realidad para muchos diseñadores y creo que se merece todo el entusiasmo que está recibiendo y más.
Si codificas muchos estilos CSS3 y te encanta Photoshop, definitivamente debes pensar en recoger tu copia. Es de $ 20 en este momento, lo que parece mucho. Pero sabes que si Photoshop lanzara estas características mañana, estarías encantado de pagar cientos de dólares para la actualización.
Ahora que has leído mi discurso, me encantaría escuchar lo que piensas. ¿Es esta una nueva herramienta impresionante para diseñadores y programadores o simplemente un juguete tonto que no debe tomarse en serio? ¡Despotricar!