Introducción a CSS3

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.

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.

Te recomendamos ver:  Ejemplos y ejercicios resueltos CSS3

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.

Te recomendamos ver:  La regla @ font-face de CSS3

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.

Te recomendamos ver:  Border-radius: Esquinas redondeadas con CSS3

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.

Curso css3 - temas
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos