Tutorial de CSS3
CSS
Publicado el 3 de Mayo del 2017 por Administrador
2.411 visualizaciones desde el 3 de Mayo del 2017
El objetivo de este tutorial es conocer y practicar con las nuevas propiedades que nos presenta el css3. Disponemos de un concepto teórico, un ejercicio resuelto y la vista en ejecución de la página con su hoja de estilo.
Contenidos:
1 - Bordes redondeados (border-radius)
2 - Bordes redondeados de alguno de los vértices (border-top-left-radius etc.)
3 - Sombras (box-shadow)
4 - Sombras múltiples (box-shadow)
5 - Sombras interiores (box-shadow)
6 - Sombras con transparencias (box-shadow)
7 - Sombras de texto (text-shadow)
8 - Transformaciones 2D: rotación (transform:rotate)
9 - Transformaciones 2D: punto de origen (transform-origin)
10 - Transformaciones 2D: escalado (transform:scale)
11 - Transformaciones 2D: translación (transform:translate)
12 - Transformaciones 2D: torcer (transform:skew)
13 - Transformaciones 2D: múltiples transformaciones en forma simultanea
14 - Opacidad (opacity)
15 - Opacidad (color)
16 - Múltiples columnas (column-count)
17 - Múltiples columnas dinámicas (column-width)
18 - Múltiples columnas y su separación (column-gap)
19 - Múltiples columnas y línea separadora (column-rule)
20 - Importar una fuente no disponible en el navegador (@font-face)
21 - Imágenes de fondo (background-image)
22 - Imágenes de fondo en diferentes posiciones (background-position)
23 - Imágenes de fondo (background-size)
24 - Imágenes de fondo (background-origin)
25 - Transiciones de una propiedad (transition)
26 - Transiciones de múltiples propiedades (transition)
27 - Transiciones (funciones de transición)
28 - Transiciones (tiempo de demora en iniciar la transición)
29 - Transiciones (otra sintaxis para hacer lo mismo)
30 - Animaciones (sintaxis básica)
31 - Animaciones (animation-iteration-count y animation-direction)
32 - Animaciones (animation-timing-function y animation-delay)
33 - Animaciones (animation-play-state)
34 - Animaciones (definición de más de 2 keyframes)
Contenidos:
1 - Bordes redondeados (border-radius)
2 - Bordes redondeados de alguno de los vértices (border-top-left-radius etc.)
3 - Sombras (box-shadow)
4 - Sombras múltiples (box-shadow)
5 - Sombras interiores (box-shadow)
6 - Sombras con transparencias (box-shadow)
7 - Sombras de texto (text-shadow)
8 - Transformaciones 2D: rotación (transform:rotate)
9 - Transformaciones 2D: punto de origen (transform-origin)
10 - Transformaciones 2D: escalado (transform:scale)
11 - Transformaciones 2D: translación (transform:translate)
12 - Transformaciones 2D: torcer (transform:skew)
13 - Transformaciones 2D: múltiples transformaciones en forma simultanea
14 - Opacidad (opacity)
15 - Opacidad (color)
16 - Múltiples columnas (column-count)
17 - Múltiples columnas dinámicas (column-width)
18 - Múltiples columnas y su separación (column-gap)
19 - Múltiples columnas y línea separadora (column-rule)
20 - Importar una fuente no disponible en el navegador (@font-face)
21 - Imágenes de fondo (background-image)
22 - Imágenes de fondo en diferentes posiciones (background-position)
23 - Imágenes de fondo (background-size)
24 - Imágenes de fondo (background-origin)
25 - Transiciones de una propiedad (transition)
26 - Transiciones de múltiples propiedades (transition)
27 - Transiciones (funciones de transición)
28 - Transiciones (tiempo de demora en iniciar la transición)
29 - Transiciones (otra sintaxis para hacer lo mismo)
30 - Animaciones (sintaxis básica)
31 - Animaciones (animation-iteration-count y animation-direction)
32 - Animaciones (animation-timing-function y animation-delay)
33 - Animaciones (animation-play-state)
34 - Animaciones (definición de más de 2 keyframes)