Con CSS podemos dar el aspecto visual a nuestras páginas web, veamos cómo podemos aplicarlo: Insertado directamente en el HTML Podemos aplicarlo directamente dentro de las etiquetas HTML, ésta sería la forma más rudimentaria, un ejemplo dentro de una etiqueta div: Como se puede apreciar metemos la palabra «style» seguida de un «=» y luego …
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. Temática: Programación Nivel: Avanzado
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 …
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. Temática: Programación Nivel: Avanzado
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 Temática: Programación Nivel: Avanzado
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 …
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. Temática: Programación Nivel: Medio
Siguiendo con el Curso de CSS3 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. Temática: Programación Nivel: Medio
En éste vídeo se muestra como usar 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 …
Quinta entrega del curso de CSS3 en el que con un ejemplo práctico veremos el manejo y tratamiento de imágenes. También se verá como usar fuentes de texto únicas sin necesidad de que estén instaladas en el ordenador del usuario… Para tal efecto, Jesús Conde nos va a mostrar en el videotutorial siguiente como crear …