Comenzaremos el curso de CSS3 con una introducción fantabulosa, pues se trata del último estándar de CSS; que nos permite realizar más acciones de maquetación mediante código CSS, ahora tenemos el poder de realizar transformaciones, animaciones, transiciones, por otro lado tenemos la posibilidad de crear efectos de filtro en ciertos elementos y fondos degradados, etc. Ponte cómodo que empezamos.
Ir a contenido:
Novedades de CSS3
Aunque cada tema será desarrollado por separado y detenidamente en su respectiva sección, por ahora describiremos a grandes rasgos en qué consisten las principales nuevas características, novedades y opciones que se suman en CSS3.
Sombras
CSS3 nos permite aplicar sombras a diversos elementos, tanto a textos como a contenedores, tanto a elementos en línea como de bloque; podemos establecer el tamaño, colores y dirección de las sombras e incluso colocar, múltiples sombras a través de un código de CSS. Esto es interesante, para mejorar el aspecto de ciertos elementos en las que puede resultar atractiva.
Colores degradados
Con esta nueva característica, CSS3 nos permite crear colores degradados, básicamente se trata de la combinación de colores en la que los colores van ganando y perdiendo intensidad. CSS3 nos permite controlar dichos colores, paradas de color, la forma del degradado y muchas otras características del mismo; en su respectiva lección veremos cómo aplicar esta característica en elementos HTML.
Esquinas redondeadas
Las esquinas redondeadas son otra novedad de CCC3, a partir de ahora podemos establecer esquinas redondeadas para elementos como imágenes, contenedores, y muchos elementos; CSS3 nos permite controlar que esquinas y en cuanta medida se redondean, para ello estableceremos el radio de la circunferencia en cada esquina, o si deseamos podemos establecer una única vez para todas las esquinas. En todo caso, esto y mucho más aprenderemos en su respectiva lección.
Transiciones
Las transiciones de CSS3 consisten en el cambio de una propiedad, por ejemplo puede ser color de un elemento, podemos hacer que un elemento cambie de color, establecer el tiempo y entre otros efectos. Otro ejemplo sería la transición de dimensiones, podemos hacer que la dimensiones de un elemento cualquiera cambien en un tiempo establecido, todo esto gracias a CSS3.
Transformaciones
Gracias a las transformaciones de CSS3 es posible aplicar rotaciones a un elemento, además entre otras transformaciones podemos mencionar la de trasladar, esto hace posible llevar un elemento a otra posición; el de rotar hace que sea posible rotar un elemento sobre su eje. Estas y otras transformaciones veremos y desarrollaremos en su respectiva unidad de aprendizaje.
Animaciones
Mediante las animaciones podemos establecer cambios controlados sobre un elemento, esto es similar a las transiciones, pero se diferencia, pues para realizar una animación, definiremos una animación y luego asociaremos dicha animación a un elemento mediante el nombre de dicha animación.
Filtros
Los filtros son otra característica introducida en CSS3, ahora es posible controlar la apariencia de elementos como las imágenes, podemos establecer parámetros para controlar su aspecto y controlar sus colores, escala de grises, sepia, saturación, etc. En fin, esto y mucho más aprenderemos en la respectiva lección.
Compatibilidad de CSS3 con los navegadores
Cuando aparecieron las primeras características de CSS3 los navegadores aún no soportaban todas las características que CSS3 ofrecía, entonces había un pequeño problema y se solucionaba con el empleo de prefijos de proveedor, las mismas que conoceremos más adelante.
Pero con el pasar del tiempo, los navegadores web han ido mejorando e incluyendo soporte para las características de CSS3, de tal manera que algunas versiones soportan y otras no, algunos navegadores soportan y otras aún trabajaban en ello; sin embargo las últimas versiones de navegadores, trabaja casi sin problemas con CSS3 y van mejorando cada vez más.
El problema de compatibilidad ha llevado a usar los prefijos, con estos se solucionan dichos problemas de compatibilidad, sin embargo es posible que no sea necesario usar pues las últimas versiones de navegadores reconocen perfectamente casi todas las funciones de CSS3.
Prefijos CSS3 para navegadores web
Los prefijos generalmente se utilizan por los navegadores en periodos de experimentación, para soportar características de CSS3 que puede que forme o no parte de la especificación formal de CSS al final.
Navegador prefijo del navegador
- Firefox: -moz-
- Safari: –webkit-
- Chrome: –webkit-
- Opera: –o-
- Internet explorer: –ms-
Cómo poner prefijos de CCS3 para navegadores
Los prefijos se anteponen a la propiedad a declarar, para entender mejor veamos varios ejemplos a continuación.
Por ejemplo para establecer una sombra a una caja o contenedor se utiliza la propiedad box-shadow, ya la conoceremos en su respectiva lección, pero la forma de poner un prefijo seria de la siguiente manera:
- Para Firefox:
-moz-box-shadow: 7px 7px red; - Para Safari:
–webkit-box-shadow: 7px 7px red; - Para Chrome:
–webkit-box-shadow: 7px 7px red; - Para Opera:
–o-box-shadow: 7px 7px red; - Para Internet explorer:
–ms-box-shadow: 7px 7px red;
La mayoría de los navegadores al día de hoy tienen el soporte para trabajar con CSS3 sin problemas, pero no está demás saber que existen estos prefijos y aún hay muchas páginas que la usan, pero las cosas van cambiando y la mayoría de los navegadores nuevos tienen un soporte genial para CSS3.
Definitivamente, usar estos prefijos no es nada cómodo, imagina colocar todos los prefijos para todas las propiedades, realmente terminarás con una hoja de estilo muy extensa y probablemente pesada.
Aunque las características y propiedades que desarrollaremos en este curso de CSS3 están soportadas, es posible que existan una que otra que necesite de prefijos o quizá nuevas que se pueden ir agregando y también necesiten prefijos; pero en general las que desarrollaremos están soportadas por los nuevos navegadores y no siempre es necesario usar dichos prefijos. Claro hay que considerar las versiones de navegadores y entre otras.
[popup_anything id=»5821″]