Se le pueden aplicar 3 tipos de sombras:<\/p>\n
<\/p>\n
La propiedad que da sombra a las cajas se denomina box-shadow<\/em><\/strong>, y puede tener los siguientes valores:<\/p>\n Estos son los valores posibles que podemos aplicar a la sombra. Se puede utilizar cualquier unidad de medida que prefiramos. Se pueden aplicar valores negativos, con lo que la sombra se mover\u00eda al otro lado. Se puede trabajar el color aplicando opacidad, con la siguiente sintaxis:<\/p>\n Las sombras pueden ser externas (outlet<\/em><\/strong>) o internas (inset<\/em><\/strong>). Pero no escribir outset<\/em><\/strong>, si queremos sombra interna escribimos al final inset<\/em><\/strong>. Ejm<\/strong><\/p>\n Tambi\u00e9n podemos aplicar sombras<\/strong> al texto con esta propiedad.<\/p>\n Ejm<\/strong><\/p>\n Se pueden aplicar sombras m\u00faltiples<\/strong>, para ello separamos con coma las nuevas propiedades, de la siguiente manera.<\/p>\n Ejm<\/strong><\/p>\n Les podemos dar valores negativos, no s\u00f3lo positivos. Las sombras m\u00faltiples<\/strong> tambi\u00e9n se pueden hacer con los textos. La propiedad filter<\/em><\/strong> Podemos usar esta propiedad para poner filtros a nuestras cajas y textos. La sintaxis es<\/p>\n Ejm<\/strong><\/p>\n Dentro del div si incluimos una imagen con extensi\u00f3n PNG<\/em>, se le aplicar\u00e1 un filtro con color rojo, lo podemos probar y funcionar\u00e1 perfectamente. NO se pueden aplicar efectos m\u00faltiples con el filtro de drop-shadow<\/em><\/strong>. Con box-shadow<\/em><\/strong> s\u00ed se pod\u00eda.<\/p>\n Existen 3 tipos de degradados:<\/p>\n Hay herramientas online que nos ayudan con los degradados, una de las m\u00e1s utilizadas es https:\/\/cssgradient.io\/.<\/a><\/p>\n Los degradados trabajan sobre la propiedad background-color<\/em><\/strong> de la siguiente manera.<\/p>\n Ejm<\/strong><\/p>\n Como primer par\u00e1metro le podemos pasar los grados<\/strong>, cuya unidad en CSS es deg, de la siguiente manera.<\/p>\n Ejm<\/strong><\/p>\n Si subimos los grados se ir\u00e1 moviendo el degradado en sentido de las manecillas del reloj. Pod\u00e9mos utilizar tb las palabras.<\/p>\n de la siguiente manera.<\/p>\n Ejm<\/strong><\/p>\n Tambi\u00e9n podemos hacer lo siguiente.<\/p>\n Ejm<\/strong><\/p>\n Se pueden agregar m\u00e1s colores.<\/p>\n Ejm<\/strong><\/p>\n Podemos usar porcentajes de qu\u00e9 valor a qu\u00e9 valor vayan, de la siguiente manera.<\/p>\n Ejm<\/strong><\/p>\n Si queremos dibujar por ejm 3 colores que no se degraden, hacemos lo siguiente.<\/p>\n Ejm<\/strong><\/p>\n Por defecto el degradado radial<\/strong> es circular. El uso es el siguiente.<\/p>\n Ejm<\/strong><\/p>\n Podemos tener degradados radiales en forma de c\u00edrculos<\/strong> y elipses<\/strong>, de la siguiente manera.<\/p>\n Ejm<\/strong><\/p>\n Podemos hacer que cada color tenga un porcentaje en el que salga.<\/p>\n Ejm<\/strong><\/p>\n Podemos decir desde donde va a empezar el centro del radio, de la siguiente manera.<\/p>\n Ejm<\/strong><\/p>\n Los valores posibles de que disponemos son:<\/p>\n Podemos hacer combinaciones:<\/p>\n Si vamos a utilizar elipse<\/strong>, debemos hacer lo siguiente.<\/p>\n Ejm<\/strong><\/p>\n Los 30px son en el eje X, los 100px afectan al eje Y.<\/p>\n Lo que hace es generar una proyecci\u00f3n c\u00f3nica<\/strong>. La propiedad a usar es conic-gradient<\/em><\/strong>. La sintaxis es.<\/p>\n Ejm<\/strong><\/p>\n Podemos hacer m\u00e1s cosas, como por ejm.<\/p>\n Ejm<\/strong><\/p>\n El rojo ir\u00eda de 0 grados a 90, el azul de 90 a 120, y el verde el resto. No va a haber difuminaci\u00f3n entre el azul y el verde ya que el verde empieza justo cuando termina el azul. Podemos utilizar la palabra clave from<\/em> <\/strong>para elegir desde que grados se comienza la c\u00f3nica.<\/p>\n Hay 3 funciones para ello:<\/p>\n Ejm para linear-gradient<\/em><\/strong>.<\/p>\n Ejm<\/strong><\/p>\n Vamos a crear 2 gr\u00e1ficas, una de pastel y otra en formato de dona. Veamos dos ejms completos<\/p>\n Vamos a aprender a hacer filtros que se utilizan en software como Ilustrator<\/strong>. Comencemos Hay una gran cantidad de filtros CSS que podemos aplicar.<\/p>\n Existe la opci\u00f3n de aplicar varios filtros.<\/p>\n Se pueden a\u00f1adir varios filtros simplemente dejando un espacio entre las funciones.<\/p>\n Ejm<\/strong><\/p>\n Para ello utilizamos la propiedad backdrop-filter<\/em><\/strong>. Esta propiedad funciona igual que la propiedad filter<\/em><\/strong>, pero trabaja sobre los fondos de las cajas. Se le pueden aplicar filtros m\u00faltiples<\/strong> como en filter<\/em><\/strong>, tan s\u00f3lo separando las funciones con un espacio en blanco.<\/p>\n Ejm<\/strong><\/p>\n Para crear un tema light<\/strong> o tema dark<\/strong> utilizamos el filtro de la inversi\u00f3n. La sintaxis que tendr\u00edamos que utilizar es.<\/p>\n Ejm<\/strong><\/p>\n Vamos a superponer 2 im\u00e1genes, una sobre la otra. La propiedad que se utiliza es mix-blend-mode<\/em><\/strong> y el valor por defecto es normal<\/em><\/strong><\/p>\n Se utiliza la funci\u00f3n background-blend-mode<\/em><\/strong>. Se utiliza para im\u00e1genes de fondo.<\/p>\n La propiedad clip-path<\/em><\/strong> va a hacer uso de 4 funciones:<\/p>\n Ejm<\/strong><\/p>\n Podemos utilizar las palabras top<\/em><\/strong>, bottom<\/em><\/strong>… tambi\u00e9n porcentajes<\/strong>. Tambi\u00e9n podemos utilizar la palabra inset<\/em><\/strong>. La palabra round<\/em> <\/strong>redondea las esquinas, y puede tener hasta 4 valores, funcionando dichos valores como un margin<\/em> <\/strong>o un padding<\/em><\/strong>.<\/p>\n Tiene las mismas funciones que clip-path<\/em><\/strong> menos la funci\u00f3n inset()<\/em><\/strong>.<\/p>\n Vamos a ver un par de efectos relacionados con el desplazamiento de la p\u00e1gina. Esto es lo que se utiliza cuando queremos hacer una sola p\u00e1gina en nuestro sitio web. Hay una propiedad que se llama scroll-margin-top<\/em><\/strong> (tambi\u00e9n existen scroll-margin-left<\/em><\/strong>, scroll-margin-right)<\/em><\/strong> que lo utilizaremos para darle un enfoque elegante, es mejor utilizar \u00e9sta que utilizar margin-top<\/em><\/strong>. El otro efecto que vamos a utilizar es utilizar la propiedad scroll-behavior<\/em><\/strong>, cuyo valor por defecto es none<\/em><\/strong>. Se lo aplicamos directamente a la etiqueta html.\u00a0<\/em><\/strong>Le podemos dar un valor smooth<\/em><\/strong> (suave).<\/p>\n\n
box-shadow: 1rem 1rem 1rem 1rem color: #0005 inset;<\/pre>\n
<!DOCTYPE html>
<html lang=\"en\">
\u00a0 <head>
\u00a0 \u00a0 <meta charset=\"UTF-8\" \/>
\u00a0 \u00a0 <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>
\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>
\u00a0 \u00a0 <title>Ejm01<\/title>
\u00a0 \u00a0 <style>
\u00a0 \u00a0 \u00a0 .box {
\u00a0 \u00a0 \u00a0 \u00a0 border: thick solid black;
\u00a0 \u00a0 \u00a0 \u00a0 margin-left: auto;
\u00a0 \u00a0 \u00a0 \u00a0 margin-right: auto;
\u00a0 \u00a0 \u00a0 \u00a0 width: 200px;
\u00a0 \u00a0 \u00a0 \u00a0 height: 200px;
\u00a0 \u00a0 \u00a0 }
\u00a0 \u00a0 \u00a0 .box-shadow {
\u00a0 \u00a0 \u00a0 \u00a0 box-shadow: 1rem 1rem 1rem 1rem #0005;
\u00a0 \u00a0 \u00a0 }
\u00a0 \u00a0 <\/style>
\u00a0 <\/head>
\u00a0 <body>
\u00a0 \u00a0 <h1>Ejm01 - Jon Mircha<\/h1>
\u00a0 \u00a0 <p>Vamos a dibujar una caja con sombra<\/p>
\u00a0 \u00a0 <div class=\"box box-shadow\"><\/div>
\u00a0 <\/body>
<\/html><\/pre>\n<\/div>\n<\/div>\n1.2 text-shadow<\/h3>\n
p {\ntext-shadow: 1px (ancho) 1px (alto) 1px (blur)\n}<\/pre>\ndiv {\nbox-shadow: 1px 1px 1px 1px navy, 2px 2px 2px 3px green, -1rem -1rem 1rem 1rem yellow;\n}<\/pre>\nfilter: drop-shadow (mov-x mov-y blur-radius color)<\/pre>\n
div {\nfilter: drop-shadow(1rem 1rem 1rem red);\n}<\/pre>\n2. Degradados (gradients)<\/h2>\n
\n
2.1 Degradado lineal<\/h3>\n
background-image: linear-gradient(red, green);\nbackground-image: linear-gradient (red, green, blue);<\/pre>\n
background-image: linear-gradient(0deg, red, green, blue);<\/pre>\n
\n
background-image: linear-gradient(to right, red, green, blue);<\/pre>\n
background-image: linear-gradient(to top left, red, green, blue);\nbackground-image: linear-gradient(to top right, red, green, blue);<\/pre>\n
background-image: linear-gradient(to left, red, green, blue, grey);<\/pre>\n
background<\/span>: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);<\/pre>\nbackground-image: linear-gradient(90deg, green 33%, white 34% 67%, blue 68%);<\/pre>\n
2.2. Degradado radial<\/h3>\n
background: radial-gradient(red, blue, green);<\/pre>\n
background: radial-gradient(circle 2rem, red, blue, green)\nbackground: radial-gradient(ellipse 2rem, red, blue, green):<\/pre>\n
background: radial-gradient(circle 4rem, red 30%, blue 31% 67%, yellow);<\/pre>\n
background: radial-gradient(4rem at top, red, blue, green)<\/pre>\n
\n
\n
background: radial-gradient(ellipse 30px 100px, red, blue, green);<\/pre>\n
2.3 Gradiente c\u00f3nico<\/h3>\n
background: conic-gradient(red, blue, yellow)<\/pre>\n
background: conic-gradient(red 0deg 90deg, blue 90deg 120deg, green 120deg 230deg);<\/pre>\n
background: conic-gradient(from 90deg, red 0deg 90deg, blue 90deg 120deg, green 120deg 230deg);<\/pre>\n
3. Patrones para gradientes<\/h2>\n
\n
background: repeating-linear-gradient(red 0 10px, blue 10px 20px, green 20px 30px);<\/pre>\n
4. Gr\u00e1ficos con degradados CSS<\/h2>\n
<!DOCTYPE html>
<html lang=\"en\">
\u00a0 <head>
\u00a0 \u00a0 <meta charset=\"UTF-8\" \/>
\u00a0 \u00a0 <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>
\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>
\u00a0 \u00a0 <style>
\u00a0 \u00a0 \u00a0 .box {
\u00a0 \u00a0 \u00a0 \u00a0 width: 200px;
\u00a0 \u00a0 \u00a0 \u00a0 height: 200px;
\u00a0 \u00a0 \u00a0 }
\u00a0 \u00a0 \u00a0 .pastel {
\u00a0 \u00a0 \u00a0 \u00a0 background-image: conic-gradient(
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 cyan 050%,
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 magenta 50% 80%,
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 yellow 80%
\u00a0 \u00a0 \u00a0 \u00a0 );
\u00a0 \u00a0 \u00a0 \u00a0 border-radius: 50%;
\u00a0 \u00a0 \u00a0 }
\u00a0 \u00a0 \u00a0 .donut {
\u00a0 \u00a0 \u00a0 \u00a0 background-image: radial-gradient(
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 white 40%,
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 black 40% 41%,
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transparent 43%
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ),
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 conic-gradient(cyan 0 50%, magenta 50% 80%, yellow 80%);
\u00a0 \u00a0 \u00a0 \u00a0 border-radius: 50%;
\u00a0 \u00a0 \u00a0 }
\u00a0 \u00a0 <\/style>
\u00a0 \u00a0 <title>Document<\/title>
\u00a0 <\/head>
\u00a0 <body>
\u00a0 \u00a0 <div class=\"box pastel\"><\/div>
\u00a0 \u00a0 <div class=\"box donut\"><\/div>
\u00a0 <\/body>
<\/html><\/pre>\n<\/div>\n<\/div>\n5. Filtros<\/h2>\n
\n
6. Filtros m\u00faltiples a un \u00fanico elemento<\/h2>\n
filter: blur(0.1) hue-rotate(30deg) saturate(0.3) opacity(0.75)...<\/pre>\n
7. Aplicar fondos<\/h2>\n
backdrop-filter: blur(0.50) hue-rotate(120deg)...<\/pre>\n
8. Crear una clase para crear de claro a oscuro<\/h2>\n
.dark-mode {\nbackground-color: white; \/\/ COLOR DE FONDO POR DEFECTO EN LOS NAVEGADORES\ncolor: black; \/\/ COLOR DE LETRA POR DEFECTO EN LOS NAVEGADORES\ninvert(1); \/\/ INVIERTO LOS COLORES\n}<\/pre>\n9. Modos de mezcla<\/h2>\n
10. Modos de mezcla en fondos<\/h2>\n
11. clip-path (enmascaramiento)<\/h2>\n
\n
clip-path: circle(20px at top)\nclip-path: circle(20px at left bottom)\nclip-path: circle(20px at 0 0);\nclip-path: circle(20px at 20% 20%);\nclip-path: ellipse( 20px 30px);\nclip-path: inset(1rem 2rem 3rem 3rem round<\/strong> 1rem); \/\/ FUNCIONA IGUAL QUE MARGIN O PADDING\nclip-path: polygon(0 0, 100% 0, 50% 100%); \/\/ CREA UN TRI\u00c1NGULO, PODEMOS AGREGAR M\u00c1S NODOS, SI A\u00d1ADIMOS UN CUARTO VALOR<\/pre>\n
12. shape-outside<\/h2>\n
13. Desplazamiento de la p\u00e1gina<\/h2>\n