El lenguaje CSS o hojas de estilo en cascada nos permite dar estilo a un documento de marcas por ejemplo realizado con HTML o XML. Con CSS podemos definir un estilo concreto para los elementos de nuestra página web.
CSS3 es la última versión disponible del lenguaje de marcas, que nos permite crear estilos específicos para nuestras páginas, y que combinado con lenguajes como JavaScript podremos aplicar efectos especiales para interactuar con los usuarios.
Este curso realiza un recorrido completo por los principales elementos disponibles en CCS3. Colores y texto, degradados, transformaciones, transiciones y animaciones son algunos de los elementos que se desarrollan de tal forma que el alumno pueda aprender de forma sencilla y muy práctica para diseñar páginas web siguiendo las nuevas tendencias utilizadas en hojas de estilo.
Objetivos
- Definir un estilo concreto para los elementos de la página web.
- Trabajar con colores y texto dando un estilo propio a las mismas.
- Realizar transformaciones y transiciones animadas sin necesidad de utilizar otros lenguajes de programación.
- Dominar la creación de animaciones en CSS3.
- Trabajar con soltura con fuentes y diseño multicolumna en CSS3.
Contenido
UNIDAD.- Introducción a CSS3
– ¿Qué es CSS3?
– Selectores CSS3
– Selectores relacionales
– Selectores de atributo
– Pseudo-clases
– Pseudo-clases estructurales
– Pseudo-elementos y contenido generado
– Contenido generado
– Video ejercicio – Introducción a CSS3
– Autopráctica – Selectores
– Autopráctica – Pseudo-elementos
– Test – Introducción a CSS3
UNIDAD.- Colores y texto en CSS3
– Colores HSL
– Colores HSLA
– Colores RGBA
– Opacidad
– Text-shadow
– Text-overflow
– Rotura de palabras largas
– Web Fonts
– Border-Radius
– Sombras
– Video ejercicio – Colores y texto en CSS3
– Autopráctica – Página web formulario
– Autopráctica – Border-Radius y sombras
– Test – Colores y texto en CSS3
UNIDAD.- Degradados en CSS3
– Degradados lineales
– Degradados radiales
– Degradados lineales de repetición
– Degradados radiales de repetición
– Múltiples imágenes de fondo
– Tamaño de fondo
– Video ejercicio – Degradados en CSS3
– Autopráctica – Creando degradados I
– Autopráctica – Creando degradados II
– Test – Degradados en CSS3
UNIDAD.- Transformaciones y Transiciones
– Transiciones
– Transition-property
– Transition-duration
– Transition-timing-function
– Transition-delay
– La propiedad abreviada transition
– Múltiples transiciones
– Transformaciones
– Traslación
– Escalar
– Rotación
– Inclinación
– Cambiar el origen de la transformación
– Video ejercicio – Transformaciones y Transiciones
– Autopráctica – Estilos de transición
– Autopráctica – Estilo de transformación
– Test – Transformaciones y transiciones
UNIDAD.- Animaciones en CSS3
– Animaciones
– Fotogramas clave
– Propiedad animation-name
– Propiedad animation-duration
– Propiedad animation-timing-function
– Propiedad animation-iteration-count
– Propiedad animation-direction
– Propiedad animation-delay
– Propiedad animation-fill-mode
– Propiedad animation-play-state
– Propiedad abreviada animation
– Video ejercicio – Animaciones en CSS3
– Autopráctica – Crear una animación I
– Autopráctica – Crear una animación II
– Test – Animaciones en CSS3
UNIDAD.- Fuentes y Diseño multicolumna en CSS3
– Importar fuentes tipográficas mediante Font-face
– Aplicar la fuente
– Tipos de fuentes y navegadores
– La propiedad column-count
– La propiedad column-gap
– La propiedad column-width
– La propiedad abreviada columns
– Columnas y la propiedad height
– Propiedad column-rule
– Salto de columna
– Inserción de imágenes
– Textos multicolumna
– Video ejercicio – Fuentes y Diseño multicolumna en CSS3
– Autopráctica – Texto multicolumnas
– Autopráctica – Mofidicar un texto multicolumnas
– Test – Fuentes y Diseño multicolumna en CSS3
