CSS3 es la última evolución del lenguaje de las Hojas de Estilo en Cascada (Cascading Style Sheets), y pretende ampliar la versión CSS2.1. Trae consigo muchas novedades altamente esperadas , como las esquinas redondeadas, sombras, gradientes , transiciones o animaciones, y nuevos layouts como multi-columnas, cajas flexibles o maquetas de diseño en cuadrícula (grid layouts).

Las partes experimentales son particulares para cada navegador y deberían ser evitadas en entornos de producción, o usadas con extrema precaución, ya que tanto la sintaxis como la semántica pueden cambiar en el futuro.

Contenido del curso:

01. ¿Qué hay de nuevo?
02. Crear efectos gráficos sin gráficos.
03. Crear semitransparencias, gradientes y sombras
04. Usos de la Propiedad Transform
05. Uso de Css3 en el trabajo con imágenes.
06. Usar gráficos en bordes y fuentes Web.
07. Selectores de Atributos.
08. Pseudo-clases y Pseudo-elementos
09. Prácticas con Pseudo-Clases
10. Transiciones y animaciones
11. Uso de Media Queries.
12. Multi-Columns y diseño para móviles.
13. Diseñar sin floats ni posicionamientos.

01. Curso de CSS3. ¿Qué hay de nuevo?

VideoTutorial Nº 1 del Curso de CSS3 en el que vemos las novedades que ofrece. ;¿Qué es CSS3? Situación actual de desarrollo; Las nuevas funcionalidades de los módulos CSS3; ejemplos concretos; Sitios web donde informarse del estado de desarrollo de los nuevos estándares; explicación de los distintos niveles de desarrollo y de los prefijos usados por los motores de renderizado para las propiedades que aún no son estándares; Sistema de trabajo basado en «Progressive enhancement.» 32 minutos

Descargar Video en Formato MP4

02. Curso de CSS3. Crear efectos gráficos sin gráficos.

VideoTutorial Número 2 del Curso de CSS3. Empezamos con proyectos prácticos, desarrollando un sistema de bocadillos para comentarios de un blog, lo que nos permitirá profundizar en la versión 3 del lenguaje de hojas de estilo en cascada. Empezaremos creando una página base, compatible con todos los navegadores, siguiendo el principio de mejoras progresivas. A continuación usaremos la propiedad word-wrap para impedir que los textos se salgan de los bordes de un elemento html; Usaremos border-radius para dar esquinas redondeadas al cuerpo de nuestro comentario y añadiremos una cola al bocadillo que apunte al avatar del usuario sin usar ninguna imagen. Algo más de una hora.

Descargar Video en Formato MP4

03. Curso de CSS3. Crear semitransparencias, gradientes y sombras

Videotutorial Nº 3 del Curso de CSS3 en el que seguimos elaborando nuestro primer proyecto y profundizando en las principales propiedades y módulos de este nuevo nivel de las hojas de estilo. Fondos semitransparentes con RGBA o HSLA; Sintaxis; Herramienta de color online; Darle una semitransparencia a nuestros bocadillos; Uso de gradientes sin necesidad de imágenes; sintaxis -moz y -webkit; anatomía de un gradiente lineal; gradientes radiales; Aplicar sombras a elementos html sin imágenes; La propiedad box-shadow; Uso de Text-shadow. Una hora.

Descargar Video en Formato MP4

04. Curso de CSS3. Usos de la Propiedad Transform

Videotutorial número 4 del Curso de CSS3, en el que acabamos nuestro primer proyecto y trabajamos con las distintas funciones que forman la propiedad transform. ¿Qué son Transforms en CSS3? Las funciones translate, rotate, scale y skew. Ejemplos prácticos. Creación de un sistema de Tarjetas; aplicar Transforms a los avatares. 33 minutos.

Descargar Video en Formato MP4

05. Curso de CSS3. Uso de Css3 en el trabajo con imágenes.

VideoTutorial Nº 5 del Curso de CSS3 en el que iniciamos un nuevo proyecto que nos va permitir trabajar con las propiedades y conceptos aplicables a imágenes. Creamos una página con aspecto de una hoja de un cuaderno. Usamos la propiedad background-size para escalar una imagen de fondo con el texto. Vemos ejemplos prácticos y la sintaxis y usos de la propiedad a fondo. Vemos como aplicar múltiples imágenes de fondo en un mismo elemento y el modo de posicionarlos, redimensionarlas, repetirlas……. Hacemos también una selección de tutoriales online sobre los mismo temas. 45 minutos.

Descargar Video en Formato MP4

06. Curso de CSS3. Usar gráficos en bordes y fuentes Web.

VideoTutorial número 6 del Curso de CSS3 en el que terminamos nuestro segundo proyecto, usando la propiedad border-size para añadir una imagen en el borde. Usamos también background-clip para impedir que las imágenes de fondo aparezcan en el borde y le aplicamos una sombra al div con box-shadow. En la última parte del Videotutorial vemos en profundidad la regla @font-face, viendo como podemos incluir en nuestros diseños web fuentes independientemente de si se encuentran o no en el ordenador del usuario. Indicamos los formatos de fuente que debemos usar y como crearlos online.

Descargar Video en Formato MP4

07. Curso de CSS3. Selectores de Atributos.

Videotutorial número 7 del Curso de CSS3, en el que vemos los selectores de atributos, tanto de CSS 2.1 como de CSS3. Vemos ejemplos prácticos de su uso, añadiendo iconos automáticamente a las descargas por tipo, y aplicamos distintos estilos a las imágenes según la carpeta en la que se encuentren. 35 minutos.

Descargar Video en Formato MP4

08. Curso de CSS3. Pseudo-clases y Pseudo-elementos

VideoTutorial Nº8 del Curso de CSS3. Vemos como apuntar a elementos específicos del documento sin usar IDs o Clases mediante el uso de Pseudo-clases y pseudo-elementos. Pseudo-clases estructurales en CSS3; El uso de nth-child( ); El DOM(Document Object Model); Ejemplo práctico: Aplicar a los comentarios estilos diferentes. 37 minutos.

Descargar Video en Formato MP4

09. Curso de CSS3. Prácticas con Pseudo-Clases

Videotutorial Número 9 del Curso de CSS3 en el que llevamos a cabo distintas prácticas con el uso de pseudo-clases. Dar rotación aleatoria a las fotos del proyecto; El uso de nht-of-type; Destacar de modo dinámico secciones de una página; La pseudo-clase :target; Crear iconos sólo con CSS; Uso de Counters CSS; Cambiar el color de fondo de secciones de un documento de modo dinámico. 37 minutos.

Descargar Video en Formato MP4

10. Curso de CSS3. Transiciones y animaciones

Videotutorial nº 10 del Curso de CSS3 en el que vemos como crear animaciones y transiciones con puro CSS. Hacer Fade in con transiciones; ¿A qué se puede aplicar transiciones? Hacer fade out con el uso de animaciones; ejemplos prácticos del uso de transiciones y animaciones. 31 minutos

Descargar Video en Formato MP4

11. Curso de CSS3. Uso de Media Queries.

Videotutorial Nº 11 del Curso de CSS3 en el que vemos los Media Queries. Diferente tamaño de pantalla, diferente diseño; Diseño de partida; ¿Qué son Media Queries?; Cambiar el diseño para grandes pantallas; Fundametales de las Media Queries; Modificación navegación de horizontal a vertical. 25 minutos.

Descargar Video en Formato MP4

12. Curso de CSS3. Multi-Columns y diseño para móviles.

Videotutorial Nº 12 del Curso de CSS3 en el que trabajamos con la propiedad multi-column y usamos media queries para crear diseños para dispositivos móviles. Con este videotutorial completamos la web que readapta su diseño dependiendo de los píxeles que tenga la ventana del navegador o la pantalla del dispositivo móvil. Puedes ver el proyecto finalizado en http://illasaron.com/mediaqueries/mediaqueries.html

Descargar Video en Formato MP4

13. Curso de CSS3. Diseñar sin floats ni posicionamientos.

Videotutorial Nº 13 y último del Curso de CSS3, que dedicamos a los módulos CSS3 que permiten crear diseños web. El Modelo Flexible Box Layout; Crear diseños multi-columna sin floats ni posicionamientos; Hacer que los bloques sean flexibles; Añadir columnas; Reordenar columnas; Centrar vertical y horizontalmente elementos de la página; La propiedad box-sizing; Los Módulos Template layout y Grid Positioning. 45 minutos.

Descargar Video en Formato MP4