CSS3
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial (no incluye prácticas)
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial
Suscríbete al Canal de Videotutoriales.com en YouTube
03.- Curso 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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial
Suscríbete al Canal de Videotutoriales.com en YouTube
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial
Suscríbete al Canal de Videotutoriales.com en YouTube
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial
Suscríbete al Canal de Videotutoriales.com en YouTube
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas
Suscríbete al Canal de Videotutoriales.com en YouTube
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Suscríbete al Canal de Videotutoriales.com en YouTube
08.- 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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Suscríbete al Canal de Videotutoriales.com en YouTube
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Suscríbete al Canal de Videotutoriales.com en YouTube
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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Suscríbete al Canal de Videotutoriales.com en YouTube
011.- 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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Suscríbete al Canal de Videotutoriales.com en YouTube
012.- 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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Suscríbete al Canal de Videotutoriales.com en YouTube
013.- 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 en formato m4v HD 720
Descargar en formato m4v(iPod, iPhone, iPad...).
Suscríbete al Canal de Videotutoriales.com en YouTube