Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreAprende CSS3 sin dolor
Rating: 3.7 out of 53.7(70 ratings)
12,410 students
Aprende CSS3 sin dolor
Realiza animaciones asombrosas, antes imposibles con HTML con los estilos en cascada nivel 3.
Created byFrancisco Javier Arce Anguiano
Last updated 8/2025
Spanish
What you'll learn
- El alumno conocerá las principales características de los estilos en cascada nivel 3
- Aplicará los selectores tradicionales de CSS 2.1. y los nuevos selectores de CSS3 para aplicarlos en sus reglas de estilo.
- Trabajará con los nuevos formatos de colores y aplicará la transparencia u opacidad a los elementos y bordes de HTML.
- Instalará fuentes web de terceros, conocerá los principales formatos y los aplicará a sus páginas web.
- Realizará sus layout o maquetas con los nuevos comandos del nivel 3.
- Aplicará los nuevos comandos al modelo de cajas de los elementos HTML, como la redondez de las esquinas o las sombras.º
- Animará diversos elementos HTML por medio de los estilos en cascada con diferentes efectos.
- Realizará páginas que se adapten a la pantalla del dispositivo donde se visualicen, para que se muestren en forma correcta.
Explore related topics
Course content
15 sections • 121 lectures • 16h 4m total length
- Bienvenida al curso Aprende CSS3 sin dolor5:20
CSS3 es la última versión del lenguaje Hojas de estilo en cascada (Cascading Style Sheets en inglés), utilizado para definir la presentación visual de documentos web escritos en HTML o XML. En esencia, CSS3 permite a los diseñadores web separar el contenido de la estructura de una página de su diseño visual, facilitando la creación de sitios web más atractivos y responsivos
- Breve historia de Internet7:18
Internet se inició en torno al año 1969, cuando el Departamento de Defensa de los EE. UU desarrolló ARPANET, una red de ordenadores creada durante la Guerra Fría cuyo objetivo era eliminar la dependencia de un Ordenador Central, y así hacer mucho menos vulnerables las comunicaciones militares
- Introduccion a los estilos en cascada Nivel 315:20
En este curso aprenderás las nuevas características de los estilos en cascada, como a manejar las fuentes web, animaciones, transformaciones, el nuevo esquema de caja, sombras, entre muchas otras características que han llevado a CSS3 a ser una poderosa herramienta en el desarrollo de páginas Web.
- Archivos del curso "Aprende CSS3 sin dolor"0:02
Archivos del curso.
- Modernizr o cómo detectar a IE6-914:58
Modernizr es una excelente herramienta para poder detectar si nuestro navegador soporta los estilos en cascada nivel 3, en especial el dolor de cabeza que representa Internet Explorer 6-9
- Los prefijos de los navegadores modernos4:35
Los prefijos son parte de la evolución desigual que ha sufrido los estilos en cascada nivel 3, ya que debemos especificar los mismos dependiendo del tipo de navegador. Esta tendencia se irá eliminando en el futuro cercano cuando todos los navegadores adopten las especificaciones de la W3C.
- Apuntes Introducción a CSS318:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Selectores tradicionales en CSS 2.1.8:28
Los selectores son una de las partes fundamentales del manejo de los estilos de cascada, en cualquiera de las versiones existentes. Las primera de las partes de una regla de estilo será el selector, que como su nombre lo dice, "selecciona" los objetos HTML que serán modificados por las reglas de estilo.
- Selectores CSS38:33
Los selectores son una de las partes fundamentales del manejo de los estilos de cascada, en cualquiera de las versiones existentes. Las primera de las partes de una regla de estilo será el selector, que como su nombre lo dice, "selecciona" los objetos HTML que serán modificados por las reglas de estilo.
- Selectores de tipo Sibling-Children7:26
Uno de los nuevos tipos de selectores en los estilos en cascada nivel 3 es que podemos localizar los nodos dentro del DOM que sean hermanos (tienen el mismo padre) o de los hijos (chlidren) del nodo.
- Selector Atributos9:41
Los selectores de atributos no son nuevos en los estilos en cascada nivel 3 o CSS3. De hecho solo tienen algunas modificaciones a la manera de funcionar desde la versión CSS 2.1. Sin embargo, en este video, daremos un repaso y ejemplificaremos su uso.
- Selectores Nth8:46
Por medio de los selectoresNth podemos seleccionar elementos de una lista de lamentos, como listas ordenadas o sin orden, párrafos, imágenes, etc.
- La pseudo clase :root, uso de variables5:18
Por medio de la pseudo clase :root podemos definir variables para ser usadas en los estilos en cascada.
La variable debe ser definida con doble signo de menos antes del nombre.
La variable debe ser utilizada con la función var().
- Prefijos y Selectores
- Apuntes selectores CSS314:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Apuntes a selectores nth4:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Conceptos generales de los colores en web3:59
Los colores son una de características mejor implementadas en todos los navegares, incluso en Internet Explorer (casi). Con los estilos en cascada nivel 3 podremos manejar la transparencia de colores, en fondos y bordes. También podremos manejar formatos en HSL o CMYK asi como muchas cadenas de colores, adicionales a las 17 cadenas tradicionales.
- Manejo de la transparencia en los colores6:21
La transparencia es una de las características más esperadas en el HTML. Podremos manejarla siempre y cuando su navegador soporte CSS3. Los rangos serán, de cero (0), completamente transparente a uno (1) completamente opaco. También las funciones RGBA y HSLA manejan el cuarto canal o "alfa".
- Principios generales para los Gradientes9:05
Los gradientes son uno de los aspectos mas irregulares en el manejo de colores dentro de los estilos en cascada nivel 3. Cada uno de los principales navegadores iniciaron por su cuenta el desarrollo de los gradientes, pero afortunadamente contaremos con herramientas gratuitas para realizar los degradados en forma eficiente.
- Crear un Gradientes Lineal8:09
Los gradientes lineales son muy poderosos: podemos moverlos en relación a una línea en cualquier dirección, así comomanejar laamplitud del degradado y añadir los colores que necesitemos.
- Crear un Gradient Radial12:24
Los gradientes radiales están basados en dos circulos, que pueden estar ubicados uno dentro del otro, o uno a lado del otro. La dirección de este gradiente dependerá de la ubicación y radio de los círculos. Añadimos los colores o "color-stop" de la misma forma que los hicimos en los gradientes lineales.
- Crear un Gradiente Cónica11:27
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
- Repetir un gradiente radial, lineal o cónica5:07
Crear un gradiente radial, lineal o cónica en patrones repetidos
- Apuntes la manejo de colores en CSS35:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Apuntes a la creación de gradientes lineales en CSS311:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Conceptos generales en el manejo de Fuentes3:50
El manejo de las fuentes en los estilos en cascada nivel 3 ha sido uno de los puntos más fuertes, ya que es soportado, en su formato EOT, por Internet Explorer desde verisones muy antiguas. Así que todos los principales navegadores, aceptan un tipo de formato de fuentes web. Los navegadores en los dispositivos móviles también tienen su propio tipo de formato de fuentes.
- La poderosa etiqueta Font Face5:42
La instrucción en que nos basamos para manejar las fuentes web es font-face. Podemos utilizar diferentes formatos de la misma fuente,y el navegador seleccionará aquella que leseaapropiada.
- Bajar y manipular fuentes externas de la web11:14
Existen muchas páginas en las que podemos descargar fuentes web. En este video veremos cómobajarlas e instalarlas en nuestros sitios web.
- Manejo de sombras con shadow6:52
Las sombras en los textos pueden ser utilizadas fácilmente en CSS3, aunque hay que teer cuidado con ellas, ya que pueden hacer ilegible su texto. Se recomienda su uso en encabezados grandes. En este video veremos cómo añadir sombras a los textos.
- Crear dos o más columnas de texto con CSS36:01
Por medio de reglas del CSS3 podemos modificar los números de columnas, sus divisiones y ciertas características de los textos, con lo cual tenemos mucho control en textos largos.
- Manejo de las fuentes de Google8:37
Entre a la página de Google Fonts y seleccione una fuente.
Podemos llamar las fuentes de tres formas:
@import
<link>
@font-face
- Añadir los iconos de Font Awesome4:42
Es una página web de iconos.
Tiene una versión de cuenta gratuita limitada.
Nos genera una clave, la cual debe ser integrada al código.
- Colores y tipografía web
- Apuntes al manejo de fuentes en CSS34:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Apuntes al font-face de CSS36:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Introducción a las cajas flexibles de CSS310:17
En los estilos en cascadas nivel 3 tenemos nuevos comandos para hacer las cajas floten y se ordenen. En este video veremos como utilizar los nuevos comandos.
- display: flex; manejo de las cajas flexibles con CSS37:02
Las cajas pueden ser orientadas sin necesidad de nuestra conocida como "float". La forma natural de flotación es ensimar una caja sobre otra. Para modificar esta "flotación natural", tendremos el display:box, con eso le inciamos al navegador que vamos a utilizar el nuevo modelo de caja. Luego le diremos cómo queremos que se modifiquela flotación le diremos que deseamos elbox-orient:horizontal.
- flex-direction: cambiar la dirección de las cajas flexibles6:22
También tendremos la alineación de este nuevo modelo de caja una regla de tipo box-align: con los parámetros end,startcenter,baseline y stretch para modificar la flotación. Necesitaremos los modificadores de los navegadores para esta regla de los estilos en cascada.
- justify-content: justificar las cajas flexibles en el eje principal7:35
Dentro de las nuevas caracteristicas del nuevo modelo de cajas, es que podemos cambiar el órden de las cajas internas desde los comandos y en tiempo de ejecución con la regla de estilo: box-ordinal-group, como lo indicamos en este video.
- align-items: alinear los elementos flexibles en el eje cruzado o complementario15:28
En los estilos en cascada nivel 3, tendremos una regla de estilo "box-sizing" que se utiliza con elnuevo modelo "display:box". Los modelos serán border-box, os detalles los veremos en el video.
- align-self: modificar la alineación individual7:15
flex-wrap: crear diferentes lineas
- flex-wrap: crear diferentes lineas10:24
flex-wrap: crear diferentes lineas
- align-content: modificar los espacios entre las líneas (renglones) de los ítems9:58
- flex-flow: controlar los ejes9:30
flex-flow: controlar los ejes
- Apuntes al manejo de box-flex10:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Crear esquinas redondeadas en el modelo de caja6:27
Otra caracterítica que es muy buscada en los estilos en cascada nivel 3 es poder redondear las esquinas por medio del comando "border-radius". Podemos hacer bordes convexos y cóncavos, como veremos en el video.
- Añadir una imagen al borde del modelo de caja (primera parte)7:56
Otra característica de los estilos en cascada nivel tres que es muy gustada es que podemos colocar imágenes en los márgenes, aumentando en mucho la vista de nuestras páginas.
- Crear sombras a las cajas8:05
Con los estilos en cascada nivel 3 podemos añadir sombras a cualquier caja, y modificar su amplitud, dirección y color que nosotros deseemos mediante el comando "box-shadow".
- Nuevos parámetros en la regla Background en CSS38:21
Aunque podemos escribir todas las propiedades de la regla de estilo background, contamos con reglas separadas para cada uno de los parámetros particulares, por ejemplo, background-color, background-position, etc., ya sea para las propiedades tradicionales como para las nuevas.
- La propiedad background-size10:11
Por medio de la propiedad background-size tendremos completo control de las dimensiones de nuestro background, ya sea a lo ancho o a lo largo, lo cual nos dará muchas ventajas en el control de nuestros diseños por medio de CSS3.
- Hacer una composición de imágenes con background5:57
Por medio de las nuevas características de la propiedad background en los estilos en cascada nivel tres podemos hacer una composición con dos o más imágenes, cambiando sus propiedades como tamaño y ubicación, lo cual no sería posible con las estilos en cascada tradicionales.
- La mezcla de las imágenes del fondo con background-blend-mode7:17
La mezcla de las imágenes del fondo con background-blend-mode
- La propiedad background-attachment9:06
La propiedad background-attachement: fixed, backgrond-size: cover y background-position:center.
- La propiedad background-clip7:57
La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.
- Maquetación de una página y el nuevo modelo de caja de CSS3
- Apuntes al manejo de bordes en CSS37:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Apuntes a los nuevos atributos del Background en CSS311:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Introducción a las transformaciones en CSS310:10
La regla de estilo "transform" nos permitirá modificar, en tiempo de ejecución, propiedades de los elementos del documento, como la posición, la escala, la rotación o el sesgo.
- Modificar el origen de la transformación con CSS311:33
Otra de las características que nos dará mucho poder en nuestras transformaciones será modificar el origen de las mismas, ya sea al centro o a cualquiera de las esquinas, con lo cual podremos tener diferentes efectos.
- Las transiciones en CSS311:58
Las transiciones, a diferencia de las transformaciones, se realizan poco a poco en un intervalo que nosotros establezcamos. También podremos añadirles efectos de atenuación, ya sea al final o al inicio de la transición.
- Las animaciones en CSS310:19
Aún más potente que las transformaciones y que las transiciones serán las animaciones en CSS3, ya que, por medio de la directiva key-frames, con la cual podremos modificar varias propiedades y controlar el tiempo de cada una de las transiciones. ¿Quién necesita Adobe Flash?
- Las animaciones 3D en CSS312:58
Las animaciones tipo 3D en los estilos en cascada nivel 3 aún están en ciernes, pero podemos hacer efectos muy interesantes del tipo "paper-view", como el simular que una división "rote" sobre su mismo eje, haciendo un efecto de "flip", como el que se realiza en el presente video.
- Aplicar filtros a la imagen con CSS39:41
Por medio de filter podemos aplicar un filtro a una imagen.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
- Transiciones: cubic-bezier9:40
Podemos modificar la velocidad de las transiciones por medio de ease, linear, ease-in, ease-out, ease-in-out (funciones predeterminadas).
Podemos crear nuestra propia función con el parámetro cubic-bezier(n,n,n,n).
- Apuntes a las transformaciones 3D7:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Introducción a los Media Query10:09
Los media-querys nos permiten hacer páginas que respondan a su entorno, por ejemplo, al tamaño de la pantalla del dispositivo, con lo cual, y mediante la modificación de los estilos en cascada, podremos hacer que una misma página luzca diferente en un teléfono celular inteligente, una tableta, una computadora o una pantalla de alta resolución.
- Realizar una página responsiva con Media Query8:54
En este video haremos una página que responda a un telefono celular tipo iPhone 4, una tableta tipo iPad y a una computadora (de cualquier tipo). Detectaremos las dimensiones de la salida del monitor (o viewport) y modificaremos nuestra página con los estilos en cascada.
- Media Query: menú y bloques15:38
En este video aplicaremos algunas buenas prácticas en el manejo de los media-query, como es separarlos en archivos externos para que sean más fácil de manejar y darles mantenimiento.
- Crear media query: tabletas y móviles9:06
Realizaremos los cambios a una página diseñada para computadora:
Móvil: 0 a 600px
Tableta: 601px a 900px
Monitor: mayor igual a 901px
- Transiciones y páginas responsivas
- Apuntes a los media-query9:00
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Crear un portafolio responsivo, primera parte, HTML4:27
Otro formato muy utilizado es el portafolio, donde mostramos nuestro trabajo. Por medio de media querys nos será muy sencillo realizarlo en forma responsiva.
- Crear un portafolio responsivo, segunda parte, CSS7:09
Otro formato muy utilizado es el portafolio, donde mostramos nuestro trabajo. Por medio de media querys nos será muy sencillo realizarlo en forma responsiva.
- Crear un catálogo de productos responsivos, primera parte4:32
Otra aplicación muy solicitada es la crear un catálogo responsivos de productos. En este video crearemos la estructura básica en HTML.
- Crear un catálogo de productos responsivos, segunda parte10:55
Otra aplicación muy solicitada es la crear un catálogo responsivos de productos. En este video crearemos la estructura básica en HTML.
- Crear un grid responsivo, primera parte8:18
Una herramienta muy útil para desarrollar nuestra páginas responsivas es crear un grid que nos simplifique el trabajo. En estos videos veremos un grid sencillo desarrollado con CSS3 y HTML5.
- Crear un grid responsivo, segunda parte9:50
Una herramienta muy útil para desarrollar nuestra páginas responsivas es crear un grid que nos simplifique el trabajo. En estos videos veremos un grid sencillo desarrollado con CSS3 y HTML5.
- Crear un grid responsivo, tercera parte6:34
Una herramienta muy útil para desarrollar nuestra páginas responsivas es crear un grid que nos simplifique el trabajo. En estos videos veremos un grid sencillo desarrollado con CSS3 y HTML5.
- Crear un menú responsivo con una caja de búsqueda13:27
- Botones deslizables como menú9:29
- Crear un menú vertical4:40
En este video realizaremos un menú fijo, según el ejemplo de la W3C.
- Crear un menú fijo7:46
En este video realizaremos un menú fijo, según el ejemplo de la W3C.
- Crear un menú que se oculte con el scroll8:27
En este video realizaremos un menú oculto, según el ejemplo de la W3C.
- Crear un menú con submenú14:12
En este video realizaremos un menú con un submenú basado en los ejercicios de la W3C.
- Crear una línea de tiempo: HTML11:46
Por medio de HTML y de los estilos en cascada, podemos crear fácilmente una línea de tiempo.
- Crear una línea de tiempo: CSS10:41
Por medio de HTML y de los estilos en cascada, podemos crear fácilmente una línea de tiempo.
- Crear una línea de tiempo: Media Query7:45
Cuando se reduce el viewport se deforman los cuadros.
Aplicamos los @media query para solucionarlo.
- Crear un sencillo tooltip9:54
Por medio de los estilos en cascada podemos crear un sencillo tooltip al pasar el apuntador del ratón sobre un texto.
- Crear un efecto flip11:20
Por medio de los estilos en cascada podemos crear un sencillo efecto flip al pasar el apuntador del ratón sobre una división.
- Crear un símbolo de cargador8:33
Por medio de los estilos en cascada podemos crear un símbolo de cargador.
- Crear ua galería de imágenes con estilos e cascada10:47
Por medio de los estilos en cascada podemos crear una sencilla galería de imágenes ( y un poco de JavaScript).
- Crear ua galería de imágenes con estilos en cascada, segunda parte8:43
Por medio de los estilos en cascada podemos crear una sencilla galería de imágenes ( y un poco de JavaScript).
- Crear los datos y la imagen con las etiquetas HTML5:05
Crearemos la información y la estructura de la tarjeta con HTML.
- Crear las primeras reglas de estilo9:21
Herramientas para el manejo de colores, utilizar fuentes externas y favicon
- Crear los estilos en cascada para el manejo de textos9:02
En esta clase crearemos los estilos en cascada para manejar los textos.
- Crear los estilos para la sección de las Redes sociales8:40
En esta clase crearemos los diferentes iconos de las redes sociales.
- Crearemos las reglas de estilo para el área de habilidades6:02
En esta clase crearemos las diferentes reglas de estilo para la sección dehabilidades.
- Herramientas para el manejo de colores, utilizar fuentes externas y favicon10:36
Herramientas para el manejo de colores, utilizar fuentes externas y favicon
Requirements
- Conocimientos básicos de HTML y CSS
Description
En este curso aprenderás las nuevas características de los estilos en cascada, como a manejar las fuentes web, animaciones, transformaciones, el nuevo esquema de caja, sombras, entre muchas otras características que han llevado a CSS3 a ser una poderosa herramienta en el desarrollo de páginas Web.
Estudiaremos los selectores nuevos y los que ya se utilizaban en la versiòn 2.1. con los cuales tendremos completo control en nuestras páginas web.
Trataremos a profundidad los nuevos comandos para los colores, como los formatos CMYK y HSL, asi como el manejo de la transparencia.
En CSS3 podemos manejar fuentes externas, y no limitarnos a las fuentes que se encuentren instaladas en la computadora del usuario. Veremos diferentes páginas donde se pueden descargar las mismas.
Analizaremos las potentes reglas para manejar la maquetación o layout de nuestras páginas con CSS3.
Asímismo, estudiaremos las nuevas características del modelo de caja en el nivel 3, como modificar las esquinas de una caja, crear sombras, posicionar las imágenes en el background, etcétera.
También realizaremos transiciones, transformaciones y animaciones con CSS3 en cualquier elemento HTML, cosa que era impensable hacerla con los estilos en cascada.
Finalmente estudiaremos una de las propiedades más revolucionarias en los estilos en cascada: realizar páginas que se adapten al tamaño de la pantalla donde se despliegan, conocido como "páginas responsivas".
Para este curso es deseable que cuente con conocimientos básicos de HTML y CSS.
Who this course is for:
- Disenadores y desarrolladores Web