CSS 3 AVANZADO by Luis Huaman Mendoza

CSS 3 AVANZADO by Luis Huaman Mendoza https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz en-us 2022-10-04 23:39:38 UTC 2025-12-12 14:33:06 UTC hello@padlet.com GRADIENTES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601119 Nos permiten añadir efectos de colores degradados en nuestros diseños. ]]> 2022-10-04 23:40:19 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601119 SOMBRAS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601256 2022-10-04 23:40:28 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601256 EFECTOS DE TEXTO luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601517 Veamos algunas de estas propiedades]]> 2022-10-04 23:40:45 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601517 WEB FONTS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601757 2022-10-04 23:41:03 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601757 TRANSFORMACIONES 2D luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601994 Las transformaciones CSS permite mover, rotar, escalar y sesgar elementos.]]> 2022-10-04 23:41:20 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326601994 TRANSFORMACIONES 3D luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326602187 2022-10-04 23:41:31 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326602187 TRANSICIONES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326602574 Conseguir un efecto suavizado entre un estado inicial y un estado final al realizar una acción.]]> 2022-10-04 23:41:44 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326602574 ANIMACIONES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326602888

Utilizar la propiedad animation (o derivadas) para indicar que elemento HTML vamos a animar.

Definir mediante la regla @keyframes la animación en cuestión y su comportamiento.

]]> 2022-10-04 23:42:05 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326602888 TOOLTIPS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326603249 "Globos de ayuda" que aparecen al posicionar el ratón sobre un determinado elemento.]]> 2022-10-04 23:42:20 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326603249 ESTILO SOBRE IMÁGENES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326603498 2022-10-04 23:42:32 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326603498 1.- GRADIENTES LINEALES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326620747 Permite crear fondos degradados que van en una dirección y cambian de un color a otro, dependiendo de la lista de colores indicada por parámetro.]]> 2022-10-05 00:01:39 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326620747 2.- GRADIENTES RADIALES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326621072 Son un tipo de degradado con formas circulares o elípticas. Para crearlos.]]> 2022-10-05 00:02:01 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326621072 3.- GRADIENTES CÓNICOS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326621412 Similar al gradiente radial, pero haciendo referencia a una figura cónica vista desde un plano superior, incluyendo sus sombras y brillos.]]> 2022-10-05 00:02:25 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326621412 1.- SOMBRAS CSS EN TEXTOS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326630709 Para ello, utilizaremos la propiedad text-shadow. Esta propiedad permite los siguientes parámetros.]]> 2022-10-05 00:12:16 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326630709 2.- SOMBRAS CSS EN CAJAS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326630988 Se pueden crear en una etiqueta o elemento HTML. Añadimos los siguiente.]]> 2022-10-05 00:12:31 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326630988 3.- SOMBRAS IDENTICAS CSS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326631477 Existe una función menos conocida denominada drop-shadow() que puede utilizarse mediante la propiedad filter y que permite crear las llamadas sombras idénticas.

]]> 2022-10-05 00:12:58 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326631477 luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326642181 OPCIONES POSIBLES DE TEXTOS EN BLANCO]]> 2022-10-05 00:21:40 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326642181 ALINEACIONES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326647137 2022-10-05 00:25:28 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326647137 1.- PROPIEDADES BÁSICAS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326655632 2022-10-05 00:31:55 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326655632 2.- FUENTES SEGURAS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656004 2022-10-05 00:32:12 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656004 3.- TAMAÑO luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656399 2022-10-05 00:32:28 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656399 4.- ESTILO luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656834 2022-10-05 00:32:47 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656834 5.- PESO luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656974 2022-10-05 00:32:53 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326656974 MÉTODO TRASLATE() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326695439 Mueve elementos de su actual posición, de acuerdo a los parámetros dados por el Eje X y el Eje Y.]]> 2022-10-05 01:05:12 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326695439 MÉTODO ROTATE() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326695925 Rota un elemento en sentido de las manecillas del reloj o al contrario según el grado dado]]> 2022-10-05 01:05:35 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326695925 MÉTODO SCALE() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326696455 Incrementa o decrementa el tamaño del elemento, de acuerdo a los parámetros dados en width y height.]]> 2022-10-05 01:06:00 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326696455 MÉTODO skewX() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326697923 Desvía un elemento a lo largo del eje X por el ángulo dado.]]> 2022-10-05 01:07:10 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326697923 MÉTODO skewY() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326698307 Desvía un elemento a lo largo del eje Y por el ángulo dado. ]]> 2022-10-05 01:07:28 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326698307 MÉTODO skew() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326699467 Desvía un elemento a lo largo de los ejes X y Y por el ángulo dado. ]]> 2022-10-05 01:08:17 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326699467 MÉTODO MÁTRIX luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326700505 combina todos los métodos de transformaciones en uno solo. Este método toma seis parámetros, los cuáles son:
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )]]> 2022-10-05 01:09:10 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326700505 MÉTODO rotateX() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326714865 Gira un elemento alrededor su eje X en un grado dado.]]> 2022-10-05 01:20:27 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326714865 MÉTODO RotateY() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326715350 Gira un elemento alrededor de su eje Y en un grado dado:]]> 2022-10-05 01:20:50 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326715350 MÉTODO rotateZ() luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326715998 Gira un elemento alrededor de su eje Z en un grado dado:]]> 2022-10-05 01:21:17 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326715998 PROPIEDADES DE TRANSFORMACIONES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326717026 2022-10-05 01:22:04 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326717026 transition-property luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326722467 2022-10-05 01:25:46 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326722467 transition-duration luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326723022 2022-10-05 01:26:12 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326723022 transition-delay luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326723481 2022-10-05 01:26:33 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326723481 PROPIEDADES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326727321 2022-10-05 01:29:35 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326727321 animation-direction luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326728021 2022-10-05 01:30:07 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326728021 ATAJO luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326728685 2022-10-05 01:30:40 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326728685 USO luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326733780 2022-10-05 01:34:37 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326733780 POSICIÓN luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326735248 2022-10-05 01:35:51 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326735248 COLORES Y ESTILOS luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326735818 2022-10-05 01:36:19 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326735818 ANIMACIONES luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326736131 2022-10-05 01:36:35 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326736131 object-fit luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326741578 2022-10-05 01:41:15 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326741578 object-position luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326742125 2022-10-05 01:41:44 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326742125 image-rendering luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326742551 2022-10-05 01:42:06 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326742551 image-orientation luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326743211 2022-10-05 01:42:36 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326743211 aspect-ratio luishm18112001 https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326743629 2022-10-05 01:42:57 UTC https://padlet.com/luishm18112001/niwoyhnl6x7ekoxz/wish/2326743629