CSS3: Una breve introducción

En el diseño y desarrollo web, como en la mayoría de los campos, hay que evolucionar para adaptarse a los nuevos tiempos. Esto es especialmente cierto con las nuevas funciones que se agregan a una de las herramientas más utilizadas por los diseñadores, como CSS. CSS3, la última especificación para CSS, tiene varias funciones nuevas que los diseñadores pueden comenzar a aprovechar ahora mismo.

El cambio más grande e importante en CSS3 es sin duda la modularización del proceso de aprobación de especificaciones. Esto significa que cada sección de CSS3 (bordes, sombras de cajas, imágenes, etc.) tiene su propio módulo. Esto significa que se pueden aprobar individualmente y desarrollar por separado.

Esto significa que recibimos los cambios más rápido y, cuando llegan, son más relevantes para lo que la comunidad y los desarrolladores de navegadores han estado pidiendo. También significa que es más fácil para el navegador estar actualizado con el nuevo estándar, porque se recibe poco a poco, en lugar de todo a la vez. Esto significa que hay que preocuparse menos por cómo se ve el contenido en diferentes navegadores y plataformas.

Todos conocemos a algunos en nuestro campo que se parecen más a dinosaurios que a diseñadores. No seas un dinosaurio, estancado en técnicas obsoletas y prácticas de diseño aburridas. Mejora tus diseños y aprovecha las últimas tecnologías con técnicas como:

Transiciones

Durante mucho tiempo, los diseñadores han tenido dificultades para utilizar Adobe Flash y JavaScript para lograr transiciones de imágenes. Ya no es así. Atrás quedaron los días de las feas y a menudo horteras transiciones de Flash y las animaciones JS difíciles de implementar. Ahora, con las transiciones CSS3, los diseñadores pueden utilizar una solución limpia y liviana del lado del navegador para implementar sus transiciones, en lugar de un método pesado del lado del servidor. Hay dos formas clave de hacer esto. Primero, y más simple, puede utilizar eltransicióndeclaración y activa efectos basados ​​en el mouse como pasar el mouse o activar la animación con un simple cambio de JS. Alternativamente, puede usar el@fotograma claveRegla para especificar cambios específicos en la animación que no requieren la intervención del usuario. Puedes leer más sobre las transiciones CSS3 aquí.

Gradientes

¿Estás cansado de perder el tiempo con Photoshop y de luchar para conseguir el degradado perfecto para esos botones? Todos los demás también. ¡Por suerte, ahora ya no tienes que hacerlo! Los degradados CSS permiten a los diseñadores crear hermosos degradados que se ven excelentes en cualquier pantalla. Lo mejor de todo es que todo está en un bonito y ligero archivo CSS compatible con todos los navegadores y no requiere que utilices imágenes pesadas que consuman muchos recursos (¿estás notando un patrón aquí?). Los degradados ya existen desde hace un tiempo, pero recién ahora están disponibles para su uso en todos los navegadores. En este momento, están disponibles los degradados radiales y lineales repetitivos y no repetitivos, y es probable que haya más en camino.

Transformaciones 3D

Seamos honestos por un segundo. Los diseñadores podemos ser un grupo de personas muy... ostentosas. Algunos podrían decir que disfrutamos alardeando de nuestras habilidades frente a diseñadores menos entendidos que nosotros. Ahora bien, si esto le suena familiar, o si simplemente desea crear un portafolio atractivo y atractivo, las transformaciones 3D CSS3 pueden realmente ayudar a que su trabajo se destaque. Nunca subestime el valor de un poco de destello (juego de palabras descarado) en el diseño de su página web, especialmente cuando desea destacarse de un verdadero mar de otros diseñadores.

Radio del borde

Las esquinas redondeadas se ven geniales. Las esquinas redondeadas se ven naturales. Históricamente, las esquinas redondeadas han sido un dolor de cabeza para codificar, y el uso de imágenes puede aumentar rápidamente el tamaño de los archivos. ¡Ahora sus botones pueden tener bordes redondeados naturales sin un exceso de código! Utilice la nueva función CSS3radio del bordepropiedad para crear bordes redondeados simples que no requieren manipulación excesivaalturayanchopropiedades y no se rompen cuando modificas el contenido o la ubicación. Si quieres un ejemplo, prueba estos fragmentos de código (cortesía de webreference.com) en una página web propia.

Código CSS:

.box {  border: 2px solid orange;  border-radius : 25px;  width: 100px;  padding: 10px;  text-align:center;}

HTML:

  `div class='box'Submit/div`

Imagen de borde

Siguiendo con el tema de los bordes, ¿cuántas veces has querido tener un borde bonito y agradable alrededor de un div o una imagen, solo para darte cuenta de que tienes que dedicar tiempo a Photoshop y aún más tiempo a hacer que el borde responda porque todas tus opciones predeterminadas son simplemente poco atractivas? Ahora tus bordes solo están limitados por tu imaginación y tu habilidad con Photoshop/Illustrator. Ahora puedes crear sprites de imágenes fáciles de usar y aplicarlos con elimagen de bordepropiedad. Esto le permitirá crear rápida y fácilmente esos bonitos bordes que desea, todo sin tener que pasar horas jugando y ajustando cosas.

Fuentes web

Parece que fue ayer cuando los diseñadores se vieron obligados a consultar tablas y listas de fuentes "seguras para la Web". Bueno, esos días ya quedaron atrás y todos deberíamos estar agradecidos.@cara de fuenteLa regla ahora le permite usar servicios como Google Web Fonts y Typekit para incluir cualquier fuente que pueda imaginar simplemente incorporando una nueva hoja de estilo. Esto significa que sus opciones de tipografía ya no se limitan a las que sabe que es probable que tenga acceso su usuario final. Esto también significa que ya no tendrá que especificar 12 familias de fuentes diferentes solo para asegurarse de que su texto no sea una fuente predeterminada fea.

Columnas CSS

¿Quieres diseñar tus artículos con un diseño responsivo basado en columnas? No hace mucho, eso significaba que tenías varias opciones. Primero, podías usar una tabla y ser odiado por todos en el mundo del diseño. Segundo, podías usar JS para hacer fluir tu contenido en divs que lo contengan y ser odiado por ti mismo por la tortuosa cantidad de tiempo que llevaría tal proceso. Sin embargo, ahora no se necesitan tablas ni concesiones. Simplemente puedes usar elcolumnasRegla y listo. El único problema que puede surgir es lograr que las cosas se vean iguales en todos los navegadores (estoy pensando en ti, IE), pero con Internet Explorer desapareciendo, parece que ese problema también debería solucionarse.

Selectores

Por último, y quizás lo más importante, tenemos nuevos selectores CSS. Se necesitaría más espacio del que quiero utilizar para explicarlos todos en detalle, así que solo nos centraremos en los aspectos más destacados y puedes consultar la lista completa aquí. También podemos seguir utilizando los antiguos selectores CSS2, pero ahora tenemos algunas reglas nuevas. En definitiva, ahora tenemos la posibilidad de seleccionar elementos DOM en función de sus valores de atributo, en lugar de especificar identificadores y clases para cada elemento. Ahora puedes aplicarles estilo simplemente en función de su campo de atributo.