Recientemente estuve discutiendo los méritos y varias características de los preprocesadores de CSS con un colega. Cubrimos todos los aspectos básicos: cómo es genial tener variables y cómo los mixins pueden ahorrarle una cantidad increíble de tiempo de codificación. Cuando la conversación giró hacia algunas de las características más oscuras, las cosas se pusieron interesantes. Cuando mencioné las diversas operaciones de color, mi colega proclamó audazmente que no era un "diseñador real". alguna vez podría encontrar una excusa legítima para usar esta función y no elegir sus propios colores manualmente.
En palabras de Barney Stinson, "¿desafío aceptado?" Hoy vamos a crear un impresionante efecto de texto en falso 3D con CSS puro y luego veremos por qué es mucho más fácil hacerlo con las operaciones de color en Sass o LESS.
Vamos a construir un texto en 3D
No hay realmente una genial Manera de aplicar un efecto 3D utilizando CSS. No hay? Texto-extruir? propiedad, aunque de hecho eso sería bastante impresionante. En su lugar tenemos que fingirlo. Una de las formas más populares de hacer esto es configurar un montón de sombras de texto (efecto que Mark Otto muestra aquí). Al igual que con los fondos CSS, las sombras de texto se pueden apilar repetidamente para lograr algunos resultados realmente interesantes.
Propina: IE odia a los diseñadores web, por lo que no admite nada bueno como las sombras de texto. Utilice Modernizr para compensar.
La Fundación
Empecemos despacio y construyamos la base básica de HTML y CSS con la que deberemos crear un objeto de texto grande y agradable para trabajar. Todo lo que necesitamos para el HTML es un h2 con algo de texto y una sola clase aplicada.
Ahora para algunos CSS. Por ahora, simplemente apunta al h2 y aplica algunos estilos básicos. Transformé el texto en mayúsculas y utilicé un poco de taquigrafía para aplicar un montón de propiedades de fuente de una sola vez: tamaño de peso / altura de línea de la familia de fuentes.
Con eso, deberías tener un simple fragmento de texto que es bastante impresionante en todos los sentidos. ¡No temas, lo haremos asombrosamente genial con los siguientes pasos!
Aplicando una sombra de texto
Para comenzar el proceso de ificación 3D, elija un color que le guste y aplíquelo a la clase de tres. A continuación, aplique un tono ligeramente más oscuro del color como una sombra de texto. He indicado cómo funciona la sintaxis con un comentario. Observe que tanto el desplazamiento horizontal como el desenfoque se establecen en cero. Queremos una sombra dura que se extienda al sur de nuestro texto.
Si necesitas una manera buena y rápida de encontrar diferentes tonos de un color determinado, revisa 0to255, una aplicación web gratuita y muy útil que utilizo todo el tiempo.
Después de este paso, puede ver claramente los efectos de la sombra de texto. Como puedes ver, una sombra no lo corta del todo. Nos estamos acercando a un efecto 3D, pero en este momento realmente parece una sombra. Tenemos que llenar esos vacíos.
Yendo en 3D
Para llenar los huecos, todo lo que tenemos que hacer es agregar algunas sombras de texto más. Realmente no creará una transición perfecta, pero tus ojos son perezosos y tenderán a percibir las sombras separadas como una sola entidad a menos que realmente mires de cerca.
Para aplicar varias sombras, simplemente separa cada una con una coma. Asegúrate de que cada uno esté un poco más compensado que el anterior para que obtengamos ese bonito efecto de extrusión.
Después de esto, debes tener un efecto 3D realmente agradable que comienza a tomar forma. ¡Las letras realmente parecen extruidas!
Observa que todas mis sombras son del mismo color. Esto da lugar a un efecto 3D muy plano, caricaturesco. Si eso es lo que buscas, genial, pero queremos algo con un poco más de realismo. Para lograr esto, podemos hacer que cada sombra consecutiva sea un poco más oscura.
Hay un poco de compensación aquí. Es mucho más fácil ver las sombras individuales de esta manera, pero me gusta más el efecto de oscurecimiento que el aspecto plano.
Últimos retoques
Todavía no estamos del todo al nivel realista. El problema que veo ahora es que el texto tridimensional no tiene un efecto en su fondo. Vamos a arreglar esto con algunas sombras más, esta vez con un poco de desenfoque y transparencia.
Con eso, todos hemos terminado! De ninguna manera es tan definido como lo que podríamos lograr con Photoshop y una hora para matar, pero dado que es CSS puro, ¡es bastante impresionante!
El problema con este método
El principal problema que tengo con este método es que no es muy flexible. Ya que estamos usando un total de cinco variaciones diferentes de un color, ¡eso significa que cambiar el color del texto 3D es un verdadero dolor!
Por ejemplo, digamos que quería cambiar el texto a azul. No solo tengo que elegir mi azul primario, sino que también debo aplicar cada una de las sombras mientras oscurezco gradualmente ese azul.
Claro, no es la cosa más difícil del mundo, pero después de juguetear con algunas variaciones de color para representar este artículo, definitivamente puedo decir que es una tarea que requiere mucho tiempo. Odio que todo mi trabajo no sea reutilizable.Me gustaría poder simplemente aplicar el efecto 3D, elegir un solo color y hacer que el resto suceda automáticamente.
Sass al rescate
Como sin duda ya habrá calculado, esta es una situación en la que las operaciones de color Sass demostrarían ser extremadamente útiles. Sí, soy un verdadero diseñador. Sí, prefiero elegir esquemas de color manualmente. Sin embargo, este proceso no es ciencia espacial y realmente parece que debería ser automatizado. Mientras pueda elegir el color de inicio, no me importa dejar que Sass se encargue del resto.
Creando el Mixin
Aquí es donde las cosas se pondrán muy elegantes, así que si no has hecho tu tarea en Sass, te recomiendo que consultes el tutorial oficial.
Vamos a envolver todo este proceso 3D en una pequeña mezcla que se puede aplicar con muy poco esfuerzo. Para ello, utilizamos el? @Mixin? sintaxis, entonces nombre nuestro mixin. Aquí está la estructura del bloque de código de inicio:
Pasando en Parámetros
Ya que queremos que esto sea algo que podamos iniciar sobre la marcha, necesitamos poder pasar un color. Para hacer esto, creamos una variable y la colocamos dentro de los paréntesis. Tenga en cuenta que las variables Sass comienzan con el signo de dólar.
Configuración del color principal
Ahora es el momento de poner a funcionar esta mezcla. Queremos que tome el color que se le pasa y lo aplique a la propiedad de color. Esto se hace igual que en CSS normal, solo usamos nuestra variable en lugar de escribir un código de color.
Oscureciendo el color
Antes de continuar con la creación de la sombra, debemos aprender cómo funciona una de las operaciones de color de Sass. Como vimos anteriormente, nuestra sombra debe ser cada vez más oscura con cada implementación. Sass puede lograrlo fácilmente con la operación de oscurecimiento.
Aquí inicié la operación de oscurecimiento, pasé la variable que establecimos antes y le di un valor del 10%. Esto devolverá un color que es 10% más oscuro que el que sea. $ color se establece en.
Creando las sombras
Ahora que sabemos cómo funciona todo, es hora de armarlo y construir nuestras sombras de texto. Aquí está el fragmento de mixin completo. Creamos la mezcla, pasamos una variable, establecemos el color del texto en esa variable y luego construimos nuestras sombras con variaciones más oscuras de esa variable.
Implementando El Mixin
Ese pequeño fragmento de arriba nos permite crear texto 3D sofisticado con cualquier color sin apenas trabajo. Todo lo que tenemos que hacer es ejecutar el comando de inclusión, indicar el nombre de la mezcla y pasar un color. Es una cosa hermosa.
¿Qué tan fácil es eso? Ahora, si decidimos que queremos un nuevo color, cambiarlo es rápido e indoloro.
Intenta cambiar la fuente
Tenga en cuenta que esto se hace con texto en vivo, completamente seleccionable / editable. Esto abre muchas grandes posibilidades. Por ejemplo, intente combinarlo con una fuente web de Google como Medula One para obtener un efecto realmente impresionante.
Demo en vivo
Haga clic aquí para ver y jugar con la versión Sass de nuestra combinación de tres.
Ahora con MENOS
Solía ser MENOS, pero me ha conquistado la profundidad y el poder de Sass. Sin embargo, sigo pensando que LESS es una herramienta increíble y no quiero desalentarte de usarla de ninguna manera. Ambos preprocesadores tienen sus méritos, así que si te gusta MENOS mejor, úsalo. Ambos generan CSS puro al final, de modo que la forma de llegar depende de usted.
Sé por artículos anteriores que muchos de nuestros lectores son MENOS fanáticos, por lo que no quería que nadie se perdiera este increíble efecto. LESS en realidad comparte las operaciones de color Sass para que podamos construir fácilmente una mezcla similar con esta sintaxis. De hecho, la versión LESS es en realidad más concisa porque podemos eliminar la sintaxis de @ mixin / @ include que requiere Sass.
Como puedes ver, las dos versiones son muy similares. Tenga en cuenta que Less utiliza el símbolo @ para las variables y que las combinaciones en realidad reflejan clases en forma, lo que es conveniente y un poco confuso.
Conclusión
En última instancia, estoy de acuerdo en que no debería recurrir a un preprocesador de CSS para hacer su trabajo de diseño por usted. Las paletas de colores deben construirse cuidadosamente después de sopesar varios factores. Sin embargo, eso no significa que las operaciones automáticas de color sean inútiles. Con suerte, he demostrado un claro ejemplo en el que la operación de oscurecimiento combinada con una mezcla crea un flujo de trabajo infinitamente mejor para lograr un gran efecto 3D CSS. Me encantaría escuchar sus opiniones sobre otras formas de utilizar las operaciones de color en un flujo de trabajo legítimamente útil.
Si está buscando implementar algún texto en 3D en uno de sus proyectos, observe Design Curate, nuestro increíble sitio de descargas. Pronto publicaremos algunos recursos realmente geniales que se basan en este tutorial.