Está aquí: Inicio Cursos Formación Elearning Programación y Bases de Datos Hojas de Estilo CSS3 -15 Horas
Duración:
15 Horas
Objetivos:
El objetivo general del curso es conseguir que el alumno sea capaz de realizar páginas web utilizando las hojas de estilo CSS3. Al final el curso el alumno será capaz de:
- 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