├── .gitignore ├── 01-CursoHTML ├── assets │ ├── codigos.js │ └── estilos.css ├── hola.html ├── img │ ├── bextlan-logos.svg │ ├── favicon.png │ ├── fox-svgrepo-com.svg │ ├── kEnAi.svg │ ├── periodic-table-of-html-elements.png │ ├── puesta-sol.jpg │ └── this-is-fine.gif ├── index.html └── media │ ├── Feels-PatrickPatrikios.mp3 │ ├── emmet-cheat-sheet.pdf │ └── kenai.mp4 ├── 02-CursosCSS ├── assets │ ├── BuenosDias.jpg │ ├── Chalet.ttf │ ├── Chalet.woff │ ├── HSL-wheel.jpg │ ├── Pecita.ttf │ ├── Pecita.woff │ ├── arbol.png │ ├── aves.png │ ├── cielo.png │ ├── favicon.png │ ├── puesta-sol.jpg │ └── stars.gif ├── backgrounds.html ├── border-outline.html ├── box-model.html ├── colors.html ├── css │ ├── backgrounds.css │ ├── border-outline.css │ ├── box-model.css │ ├── colors.css │ ├── fonts-texts.css │ ├── forms.css │ ├── images.css │ ├── lists.css │ ├── motion.css │ ├── normalize.css │ ├── otro-hoja.css │ ├── positions-examples.css │ ├── positions.css │ ├── reset.css │ ├── scroll-one-page.css │ ├── scroll-snap-slides.css │ ├── style.css │ ├── tables.css │ ├── units.css │ ├── variables-functions.css │ └── visual-effects.css ├── fonts-texts.html ├── forms.html ├── images.html ├── index.html ├── lists.html ├── motion.html ├── positions-examples.html ├── positions.html ├── scroll-one-page.html ├── scroll-snap-slides.html ├── tables.html ├── units.html ├── variables-functions.html └── visual-effects.html ├── 03-ResponsiveArquitecturaCSS ├── assets │ └── kenai.mp4 ├── css │ ├── grid.css │ ├── init.css │ ├── print.css │ └── style.css ├── img │ ├── butterfly.jpg │ ├── butterfly.webp │ ├── html5-3d-1200.png │ ├── html5-3d-600.png │ ├── html5-3d-900.png │ ├── kitten-large.png │ ├── kitten-medium.png │ ├── kitten-small.png │ └── puesta-sol.jpg └── index.html ├── README.md └── responsive-arquitectura.zip /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /01-CursoHTML/assets/codigos.js: -------------------------------------------------------------------------------- 1 | console.log("Hola aprendiendo a invocar código JS desde HTML"); 2 | -------------------------------------------------------------------------------- /01-CursoHTML/assets/estilos.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | body { 6 | font-family: sans-serif; 7 | } 8 | 9 | h1 { 10 | color: navy; 11 | } 12 | 13 | img, 14 | video { 15 | max-width: 100%; 16 | height: auto; 17 | } 18 | 19 | iframe { 20 | width: 80%; 21 | height: 400px; 22 | } 23 | -------------------------------------------------------------------------------- /01-CursoHTML/hola.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hola 9 | 10 | 11 | 12 |

Hola este es otro documento HTML

13 | Regresar al Index 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /01-CursoHTML/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/01-CursoHTML/img/favicon.png -------------------------------------------------------------------------------- /01-CursoHTML/img/fox-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /01-CursoHTML/img/kEnAi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 22 | 23 | 24 | 25 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /01-CursoHTML/img/periodic-table-of-html-elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/01-CursoHTML/img/periodic-table-of-html-elements.png -------------------------------------------------------------------------------- /01-CursoHTML/img/puesta-sol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/01-CursoHTML/img/puesta-sol.jpg -------------------------------------------------------------------------------- /01-CursoHTML/img/this-is-fine.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/01-CursoHTML/img/this-is-fine.gif -------------------------------------------------------------------------------- /01-CursoHTML/media/Feels-PatrickPatrikios.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/01-CursoHTML/media/Feels-PatrickPatrikios.mp3 -------------------------------------------------------------------------------- /01-CursoHTML/media/emmet-cheat-sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/01-CursoHTML/media/emmet-cheat-sheet.pdf -------------------------------------------------------------------------------- /01-CursoHTML/media/kenai.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/01-CursoHTML/media/kenai.mp4 -------------------------------------------------------------------------------- /02-CursosCSS/assets/BuenosDias.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/BuenosDias.jpg -------------------------------------------------------------------------------- /02-CursosCSS/assets/Chalet.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/Chalet.ttf -------------------------------------------------------------------------------- /02-CursosCSS/assets/Chalet.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/Chalet.woff -------------------------------------------------------------------------------- /02-CursosCSS/assets/HSL-wheel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/HSL-wheel.jpg -------------------------------------------------------------------------------- /02-CursosCSS/assets/Pecita.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/Pecita.ttf -------------------------------------------------------------------------------- /02-CursosCSS/assets/Pecita.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/Pecita.woff -------------------------------------------------------------------------------- /02-CursosCSS/assets/arbol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/arbol.png -------------------------------------------------------------------------------- /02-CursosCSS/assets/aves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/aves.png -------------------------------------------------------------------------------- /02-CursosCSS/assets/cielo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/cielo.png -------------------------------------------------------------------------------- /02-CursosCSS/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/favicon.png -------------------------------------------------------------------------------- /02-CursosCSS/assets/puesta-sol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/puesta-sol.jpg -------------------------------------------------------------------------------- /02-CursosCSS/assets/stars.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/02-CursosCSS/assets/stars.gif -------------------------------------------------------------------------------- /02-CursosCSS/backgrounds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fondos en CSS 9 | 10 | 11 | 12 | 13 |

Fondos en CSS

14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | ☝️ 25 |





























26 | 27 | 28 | -------------------------------------------------------------------------------- /02-CursosCSS/border-outline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bordes y Outlines 9 | 10 | 11 | 12 | 13 |

Bordes y Outlines

14 |

Bordes Redondeados

15 |
16 |
17 |
18 |
19 |

Outlines

20 |
Outline
21 |
22 | 23 |
24 | ☝️ 25 |





























26 | 27 | 28 | -------------------------------------------------------------------------------- /02-CursosCSS/box-model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modelo de Caja en CSS 9 | 10 | 11 | 12 | 13 |

Modelo de Caja en CSS

14 |

15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam eos id blanditiis fugiat provident, quod 16 | sunt in voluptatem tempore recusandae doloribus eaque eum laborum cumque libero, minus animi illum. 17 |

18 |
19 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi a illo sed veritatis hic magnam, 20 | ipsum at repellendus in? Harum illum et officiis ea aliquam magnam. Nihil at tempora incidunt.
21 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi a illo sed veritatis hic magnam, 22 | ipsum at repellendus in? Harum illum et officiis ea aliquam magnam. Nihil at tempora incidunt.
23 |
24 |

Cajas de Línea VS Cajas de Bloque

25 | Esto es una caja de línea 26 | Esto es una span 27 |
Esto es un caja de bloque
28 |
29 |

Propiedad Display

30 |
31 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, voluptates! Libero perspiciatis voluptatibus 32 | explicabo dolores quidem nobis vero suscipit, natus totam, sequi vitae adipisci minus nesciunt amet! Veritatis, 33 | laboriosam blanditiis? 34 |
35 | 36 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat laudantium repudiandae aliquam ipsam maiores! 37 | Incidunt maiores natus, aliquid adipisci ea ullam dicta tempore ipsa harum voluptatem eligendi deserunt, quas sit. 38 | 39 |

40 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit necessitatibus, illum ex a, maxime, corporis 41 | mollitia provident repellendus vel obcaecati dignissimos et aperiam porro quia molestias voluptatibus culpa dolorum 42 | tenetur. 43 |

44 | 50 |
    51 |
  1. Item 1
    2. 52 |
  2. Item 2
    3. 53 |
  3. Item 3
    4. 54 |
  4. Item 4
    5. 55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Celda 7Celda 8Celda 9
73 |
74 |

Propiedad Visibility

75 |
76 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, voluptates! Libero perspiciatis voluptatibus 77 | explicabo dolores quidem nobis vero suscipit, natus totam, sequi vitae adipisci minus nesciunt amet! Veritatis, 78 | laboriosam blanditiis? 79 |
80 |
81 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, voluptates! Libero perspiciatis voluptatibus 82 | explicabo dolores quidem nobis vero suscipit, natus totam, sequi vitae adipisci minus nesciunt amet! Veritatis, 83 | laboriosam blanditiis? 84 |
85 |
86 |

Propiedad Overflow

87 |

88 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum tempore veniam nesciunt neque, laudantium 89 | praesentium eaque fugit quidem quis, soluta minus maxime, tenetur modi optio accusamus? Dignissimos amet natus 90 | voluptatibus. 91 |

92 |
93 |

Tamaño de Caja

94 |
95 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam ea accusamus nam sequi facere reprehenderit 96 | maxime, laborum, quidem in omnis porro perspiciatis nemo corporis est hic numquam iste cupiditate quam? 97 |
98 |
99 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam ea accusamus nam sequi facere reprehenderit 100 | maxime, laborum, quidem in omnis porro perspiciatis nemo corporis est hic numquam iste cupiditate quam? 101 |
102 |
103 |
Sección 1
104 |
Sección 2
105 |
Sección 3
106 |
107 |
108 |

Propiedad Float & Clear

109 |
110 |
Este elemento flota a la derecha
111 |
Este elemento flota a la izquierda
112 |
113 |
114 |
115 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, harum doloribus, officiis facilis 116 | quam animi voluptate expedita magni natus nesciunt aliquam quod vel. Iste sed cumque aliquid cupiditate labore 117 | doloremque.
118 |
119 |
120 |

Colapso de Márgenes Verticales

121 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dignissimos laborum consectetur, quas praesentium 122 | debitis repellat? Ipsa, consectetur. Porro a ullam iure inventore molestias cumque, quis provident iste nam 123 | doloribus.
124 |
125 |
Sección 1
126 |
Sección 2
127 |
Span 1Span 2Span 3
128 |
129 |
130 |

Centrado de Cajas

131 |
132 |
Cabecera
133 |
Contenido Principal
134 | 135 |
136 | ☝️ 137 |





























138 | 139 | 140 | -------------------------------------------------------------------------------- /02-CursosCSS/colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Colores en CSS 9 | 10 | 11 | 12 | 13 |

Colores en CSS

14 |

Color por nombre

15 |
16 |

17 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia possimus ex doloremque ullam aperiam soluta. 18 | Asperiores tenetur quam aperiam, itaque possimus nobis excepturi accusamus. Enim accusamus facilis non ut aliquam. 19 |

20 |
21 |

Colores Hexadecimales

22 |
23 |

24 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia possimus ex doloremque ullam aperiam soluta. 25 | Asperiores tenetur quam aperiam, itaque possimus nobis excepturi accusamus. Enim accusamus facilis non ut aliquam. 26 |

27 |
28 |

Colores RGB

29 |
30 |

31 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia possimus ex doloremque ullam aperiam soluta. 32 | Asperiores tenetur quam aperiam, itaque possimus nobis excepturi accusamus. Enim accusamus facilis non ut aliquam. 33 |

34 |
35 |

Colores HSL

36 |
37 |

38 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia possimus ex doloremque ullam aperiam soluta. 39 | Asperiores tenetur quam aperiam, itaque possimus nobis excepturi accusamus. Enim accusamus facilis non ut aliquam. 40 |

41 |
42 | Círculo Cromático 43 |

Valores transparent & currentColor

44 |
45 |
46 |

47 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia possimus ex doloremque ullam aperiam soluta. 48 | Asperiores tenetur quam aperiam, itaque possimus nobis excepturi accusamus. Enim accusamus facilis non ut 49 | aliquam. 50 |

51 |
52 |
53 |

Propiedad Opacity

54 |
55 |

56 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia possimus ex doloremque ullam aperiam soluta. 57 | Asperiores tenetur quam aperiam, itaque possimus nobis excepturi accusamus. Enim accusamus facilis non ut aliquam. 58 |

59 |
60 | ☝️ 61 |





























62 | 63 | 64 | -------------------------------------------------------------------------------- /02-CursosCSS/css/backgrounds.css: -------------------------------------------------------------------------------- 1 | /* 2 | background-color: define el color de fondo del elemento 3 | background-image: define la imagen de fondo del elemento 4 | background-size: define el tamaño de la imagen de fondo, primer valor x, segundo y 5 | - cover: cambia el tamaño de la imagen de fondo para asegurarse de que permanezca completamente visible 6 | - contain: cambia el tamaño de la imagen de fondo para asegurarse de que el elemento esté completamente cubierto 7 | background-repeat: define cómo se repite la imagen de fondo en el elemento 8 | background-position: 9 | define la posición de la imagen de fondo, primer valor x, segundo y, si no se especifica un segundo valor éste será center 10 | aparte de valores numéricos podemos indicar el posicionamiento con las palabras: center, top, bottom, left and right 11 | background-clip: define cuánto debe extenderse el fondo dentro del elemento. 12 | background-origin: define el origen de la imagen de fondo. 13 | background-attachment: define cómo se comportará la imagen de fondo al desplazarse por la página 14 | */ 15 | 16 | .box { 17 | margin: 2rem auto; 18 | width: 300px; 19 | height: 300px; 20 | border: thick dashed red; 21 | } 22 | 23 | .bg-color { 24 | background-color: black; 25 | } 26 | 27 | .bg-image { 28 | background-image: url("../assets/puesta-sol.jpg"); 29 | } 30 | 31 | .bg-size { 32 | background-image: url("../assets/puesta-sol.jpg"); 33 | background-size: 300px 200px; 34 | background-size: 300px; 35 | background-size: cover; 36 | background-size: contain; 37 | } 38 | 39 | .bg-repeat { 40 | background-image: url("../assets/puesta-sol.jpg"); 41 | background-size: 100px; 42 | background-repeat: repeat; 43 | background-repeat: repeat-x; 44 | background-repeat: repeat-y; 45 | background-repeat: no-repeat; 46 | } 47 | 48 | .bg-position { 49 | background-color: skyblue; 50 | background-image: url("../assets/puesta-sol.jpg"); 51 | background-size: 100px; 52 | background-repeat: no-repeat; 53 | background-position: 10px 20px; 54 | background-position: 1rem 2rem; 55 | background-position: 10% 20%; 56 | background-position: 10%; 57 | background-position: 10% center; 58 | background-position: top center; 59 | background-position: top right; 60 | background-position: top left; 61 | background-position: bottom center; 62 | background-position: bottom right; 63 | background-position: bottom left; 64 | background-position: bottom; 65 | } 66 | 67 | .bg-clip { 68 | background-color: skyblue; 69 | background-image: url("../assets/puesta-sol.jpg"); 70 | background-repeat: no-repeat; 71 | background-size: 200px; 72 | background-size: cover; 73 | background-clip: border-box; /* default */ 74 | background-clip: padding-box; 75 | background-clip: content-box; 76 | padding: 1rem; 77 | } 78 | 79 | .bg-origin { 80 | background-color: skyblue; 81 | background-image: url("../assets/puesta-sol.jpg"); 82 | background-repeat: no-repeat; 83 | background-size: 200px; 84 | background-size: cover; 85 | background-origin: padding-box; /* default */ 86 | background-origin: border-box; 87 | background-origin: content-box; 88 | padding: 1rem; 89 | } 90 | 91 | .bg-attachment { 92 | background-color: skyblue; 93 | background-image: url("../assets/puesta-sol.jpg"); 94 | background-repeat: no-repeat; 95 | background-size: cover; 96 | width: 100%; 97 | height: 50vh; 98 | background-attachment: scroll; 99 | background-attachment: fixed; 100 | /* background: red; */ 101 | } 102 | 103 | .bg-multiple { 104 | width: 50%; 105 | height: 30vh; 106 | background-image: url("../assets/favicon.png"), 107 | url("../assets/puesta-sol.jpg"); 108 | background-repeat: repeat-x, no-repeat; 109 | background-size: 10%, cover; 110 | } 111 | 112 | .bg-art { 113 | width: 1000px; 114 | height: 700px; 115 | background: url("../assets/arbol.png") no-repeat center bottom, 116 | url("../assets/aves.png") no-repeat center bottom, 117 | url("../assets/cielo.png") no-repeat center top; 118 | } 119 | -------------------------------------------------------------------------------- /02-CursosCSS/css/border-outline.css: -------------------------------------------------------------------------------- 1 | .box { 2 | background-color: black; 3 | margin: 2rem auto; 4 | width: 400px; 5 | height: 400px; 6 | border: thick solid red; 7 | } 8 | 9 | .border-radius { 10 | border-radius: 2rem; 11 | border-top-left-radius: 4rem; 12 | border-top-right-radius: 4rem; 13 | border-bottom-right-radius: 4rem; 14 | border-bottom-left-radius: 4rem; 15 | border-radius: 2rem 4rem; 16 | border-radius: 2rem 4rem 0; 17 | border-radius: 4rem 3rem 2rem 1rem; 18 | border-radius: 2rem; 19 | } 20 | 21 | .border-radius-2 { 22 | border-radius: 2rem / 4rem; 23 | border-radius: 2rem 4rem / 4rem 8rem; 24 | } 25 | 26 | .border-radius-3 { 27 | border-radius: 50%; 28 | } 29 | 30 | .border-radius-4 { 31 | width: 400px; 32 | height: 200px; 33 | width: 200px; 34 | height: 400px; 35 | border-radius: 50%; 36 | } 37 | 38 | .outline { 39 | color: white; 40 | text-align: center; 41 | outline-width: 5px; 42 | outline-style: dashed; 43 | outline-color: chartreuse; 44 | outline: thick solid blue; 45 | /* border-width: 100px; */ 46 | /* outline-width: 100px; */ 47 | outline-offset: 3rem; 48 | outline-offset: -3rem; 49 | } 50 | -------------------------------------------------------------------------------- /02-CursosCSS/css/box-model.css: -------------------------------------------------------------------------------- 1 | /* 2 | https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja 3 | 4 | Modelo de Caja: Es la forma en que CSS ve a los elementos HTML y ¿cómo los ve? como si fueran cajas con las siguientes propiedades: 5 | 1. El contenido (content): El contenido (texto) del elemento HTML, tomando en cuanta sus dimensiones (width & height) 6 | 2. El borde (border): Lo que delimita cada uno de los elementos HTML 7 | 3. El relleno (padding): Son las distancias internas (La distancia del borde al contenido) 8 | 3. El márgen (margin): Son las distancias externas (La distancia entre el elemento html y sus elementos hermanos o padres) 9 | 10 | Dentro del modelo de caja hay que considerar que una caja tendrá 4 lados: 11 | 1. Arriba (top) 12 | 2. Derecha (right) 13 | 3. Abajo (bottom) 14 | 4. Izquierda (left) 15 | */ 16 | 17 | h1 { 18 | width: 400px; 19 | height: 200px; 20 | /* propiedades de tipo shorthand */ 21 | border-color: green; 22 | border-top-color: red; 23 | border-width: thick; /* thin - 1px , medium - 3px, thick - 5px */ 24 | border-style: solid; 25 | border: 2px dashed blue; 26 | } 27 | 28 | .caja-uno, 29 | .caja-dos { 30 | background-color: chocolate; 31 | border: medium solid orange; 32 | /* 33 | Esto aplica para margin y padding 34 | 1 valor = aplicar a los 4 lados 35 | 2 valores = 36 | primer valor es para los lados verticales (t/b) 37 | segundo valor es para los lados horizontales (l/r) 38 | 3 valores = 39 | primer valor es para top 40 | segundo valor es para los lados horizontales (l/r) 41 | tercer valor es para bottom 42 | 4 valores = Piensa en las manecillas del reloj 43 | primer valor es para top (12) 44 | segundo valor es para right (3) 45 | tercer valor es para bottom (6) 46 | cuarto valor es para left (9) 47 | */ 48 | padding: 20px; 49 | margin: 20px; 50 | padding: 20px 40px; 51 | margin: 40px 20px; 52 | padding: 0 40px 20px; 53 | margin: 50px 30px 0; 54 | padding: 0 40px 20px 50px; 55 | margin: 100px 50px 30px 0; 56 | } 57 | 58 | /* 59 | Caja de Línea 60 | - Ocupan el espacio necesario para mostrar su contenido. 61 | - No tienen dimensiones modificables (alto, ancho). 62 | - Permiten otros elementos a su lado. 63 | - Padding y margin solo empujan a elementos adyacentes en horizontal, NUNCA EN VERTICAL. 64 | Caja de Bloque 65 | - Ocupan todo el ancho disponible, lo que genera saltos de línea. 66 | - Tienen dimensiones modificables (alto, ancho). 67 | - No permiten otros elementos a su lado (aunque especifique un ancho, siguen ocupando todo el espacio disponible a lo ancho, generando saltos de línea). 68 | */ 69 | 70 | .caja-linea, 71 | .caja-bloque { 72 | background-color: darkcyan; 73 | color: white; 74 | width: 500px; 75 | height: 250px; 76 | border: medium solid black; 77 | padding: 16px; 78 | } 79 | 80 | .caja-bloque { 81 | margin: 32px; 82 | display: block; 83 | } 84 | 85 | .caja-linea { 86 | margin: 48px; 87 | display: inline; 88 | } 89 | 90 | /* 91 | Propiedad Display 92 | inline 93 | block 94 | inline-block - Se comporta como un elemento de línea pero acepta modificar sus dimensiones (alto y ancho) 95 | none 96 | table 97 | list-item 98 | flex - ve mi curso de Flexbox CSS 99 | grid - ve mi curso de Grid CSS 100 | */ 101 | .caja-none, 102 | .caja-linea-bloque, 103 | .caja-hidden { 104 | background-color: darkolivegreen; 105 | color: white; 106 | width: 600px; 107 | height: 300px; 108 | border: medium solid black; 109 | } 110 | 111 | .caja-linea-bloque { 112 | display: inline-block; 113 | } 114 | 115 | .caja-none { 116 | display: none; 117 | } 118 | 119 | .caja-hidden { 120 | visibility: hidden; 121 | } 122 | 123 | .overflow { 124 | background-color: darkturquoise; 125 | width: 200px; 126 | height: 100px; 127 | overflow: visible; 128 | overflow: hidden; 129 | overflow: scroll; 130 | overflow: auto; 131 | /* overflow-y: scroll; */ 132 | /* overflow-x: scroll; */ 133 | } 134 | 135 | /* 136 | Tamaño de Caja 137 | */ 138 | 139 | .box-sizing-content, 140 | .box-sizing-border { 141 | background-color: deepskyblue; 142 | box-sizing: content-box; 143 | width: 500px; 144 | height: 250px; 145 | padding: 10px; 146 | border: thick solid black; 147 | /* w 500 + 10 + 10 + 5 + 5 = 530 */ 148 | /* h 250 + 10 + 10 + 5 +5 = 280 */ 149 | } 150 | 151 | .box-sizing-border { 152 | box-sizing: border-box; 153 | } 154 | 155 | .container-col-3 { 156 | background-color: burlywood; 157 | width: 600px; 158 | height: 300px; 159 | margin-top: 20px; 160 | } 161 | 162 | .container-col-3 > * { 163 | box-sizing: border-box; 164 | width: 200px; 165 | border: thin solid red; 166 | padding: 10px; 167 | float: left; 168 | } 169 | 170 | /* 171 | https://www.paulirish.com/2012/box-sizing-border-box-ftw/ 172 | apply a natural box layout model to all elements, but allowing components to change 173 | */ 174 | html { 175 | box-sizing: border-box; 176 | } 177 | 178 | *, 179 | *:before, 180 | *:after { 181 | box-sizing: inherit; 182 | } 183 | 184 | /* Floats */ 185 | .container-floats { 186 | background-color: cornflowerblue; 187 | } 188 | 189 | .float-left { 190 | float: left; 191 | } 192 | 193 | .float-right { 194 | float: right; 195 | } 196 | 197 | .clearfix { 198 | clear: both; 199 | } 200 | 201 | /* Colapso de Márgenes Verticales */ 202 | .margin-collapse { 203 | background-color: skyblue; 204 | } 205 | 206 | .margin-collapse section { 207 | border: thin solid black; 208 | margin-top: 16px; 209 | margin-bottom: 16px; 210 | } 211 | 212 | .margin-collapse span { 213 | border: thin solid black; 214 | display: inline-block; 215 | margin-right: 16px; 216 | margin-left: 16px; 217 | } 218 | 219 | /* Centrado de Cajas */ 220 | .sitio-web { 221 | border: thin solid black; 222 | background-color: thistle; 223 | width: 800px; 224 | height: 1000px; 225 | padding: 16px; 226 | margin-top: 200px; 227 | margin-left: auto; 228 | margin-right: auto; 229 | /* margin: 0 auto; */ 230 | } 231 | -------------------------------------------------------------------------------- /02-CursosCSS/css/colors.css: -------------------------------------------------------------------------------- 1 | .color-by-name { 2 | background-color: coral; 3 | color: rebeccapurple; 4 | border: thick solid greenyellow; 5 | } 6 | 7 | /* 8 | Sistema Hexadecimal 9 | 0123456789ABCDEF 10 | 11 | RedGreenBlue (Medios Digitales) vs CyanMagentaYellowKey (Medios Impresos) 12 | 13 | Colores en HEX va a ser colores de 6 dígitos 14 | #ff6600 15 | */ 16 | .color-hex { 17 | background-color: #ff6600; 18 | background-color: #f60; 19 | background-color: #ff6605; 20 | background-color: #00000000; 21 | background-color: #00000055; 22 | background-color: #0003; 23 | color: #12ac78; 24 | border: thick solid #ffffff; 25 | border: thick solid #fff; 26 | border: thick solid #ff0000; 27 | border: thick solid #f00; 28 | border: thick solid #00ff00; 29 | border: thick solid #0f0; 30 | border: thick solid #0000ff; 31 | border: thick solid #00f; 32 | border: thick solid #000000; 33 | border: thick solid #000; 34 | } 35 | 36 | /* 37 | Sistema RGB 38 | Acepta 8 bits por canal de color 39 | Bit (0/1) 2 elevado a la potencia 8 = 2*2*2*2*2*2*2*2 = 256 40 | Por cada canal de color tenemos valores que van del 0 al 255 41 | */ 42 | .color-rgb { 43 | background-color: rgb(255, 255, 255); 44 | background-color: rgb(255, 0, 0); 45 | background-color: rgb(0, 255, 0); 46 | background-color: rgb(0, 0, 255); 47 | background-color: rgb(0, 0, 0); 48 | background-color: rgba(0, 0, 0, 0.92); 49 | color: rgb(255, 102, 0); 50 | border: thick solid rgb(128, 109, 7); 51 | } 52 | 53 | /* 54 | Sistema HSL 55 | HueSaturationLightness (Tono-Saturación-Luminosidad) 56 | 57 | El primer es Hue (Círculo Cromático) 58 | 0° -> red 59 | 60° -> yellow 60 | 120° -> green 61 | 180° -> cyan 62 | 240° -> blue 63 | 300° -> magenta 64 | 65 | El segundo valor es Saturation (Intensidad del Color) 66 | 0% -> Escala de grises 67 | 100% -> Color puro 68 | 69 | El tercer valor es Lightness (Luminosidad del Color) 70 | 0% -> negro 71 | 50% -> color puro 72 | 100% -> blanco 73 | */ 74 | .color-hsl { 75 | background-color: hsl(0, 100%, 50%); 76 | background-color: hsl(120, 100%, 50%); 77 | background-color: hsl(240, 100%, 50%); 78 | background-color: hsl(30, 100%, 50%); 79 | background-color: hsla(30, 100%, 50%, 0.5); 80 | background-color: hsla(30, 100%, 50%, 0.25); 81 | background-color: hsla(30, 100%, 50%, 0); 82 | background-color: hsla(30, 100%, 50%, 0.75); 83 | color: hsl(0, 0%, 100%); 84 | color: hsl(0, 0%, 0%); 85 | border: thick solid hsl(210, 75%, 65%); 86 | } 87 | 88 | /* 89 | Valor transparent: color transparente es igual a aplicar rgba(0,0,0,0) 90 | Valor currentColor: Hereda el valor por defecto o asignado de la propiedad color, del ancestro que tenga definida esta propiedad, busca del ancestro más cercano al más alejado 91 | */ 92 | .color-transparent-current { 93 | background-color: darkmagenta; 94 | background-color: currentColor; 95 | background-color: transparent; 96 | color: olive; 97 | border: thick solid currentColor; 98 | } 99 | 100 | .opacity { 101 | background-color: orchid; 102 | color: navy; 103 | border: thick solid black; 104 | opacity: 0.5; 105 | opacity: 1; 106 | opacity: 0; 107 | opacity: 0.75; 108 | } 109 | 110 | .opacity-00 { 111 | opacity: 0; 112 | } 113 | 114 | .opacity-10 { 115 | opacity: 0.1; 116 | } 117 | 118 | .opacity-20 { 119 | opacity: 0.2; 120 | } 121 | 122 | .opacity-30 { 123 | opacity: 0.3; 124 | } 125 | -------------------------------------------------------------------------------- /02-CursosCSS/css/fonts-texts.css: -------------------------------------------------------------------------------- 1 | /* 2 | Estilos de la Fuente 3 | 4 | font-family 5 | font-size 6 | font-weight 7 | font-style 8 | font-variant 9 | line-height 10 | font 11 | */ 12 | 13 | .font { 14 | font-family: Georgia, "Times New Roman", Times, serif; 15 | font-family: sans-serif; 16 | font-size: 32px; 17 | font-weight: bold; 18 | font-style: italic; 19 | font-variant: small-caps; 20 | line-height: 2; 21 | font: italic small-caps bold 24px / 1.5 monospace; 22 | } 23 | 24 | /* 25 | Formato woff o woff2 - Web Open Font Format 26 | 27 | font-display: 28 | auto - permite que el navegador utilice el método predeterminado que suele ser block 29 | block - oculta brevemente el texto hasta que la fuente haya sido descargada por completo 30 | swap - indica al navegador que utilice la fuente alternativa para mostrar el texto hasta que la fuente personalizada se haya cargado por completo 31 | fallback - es una mezcla de auto y swap 32 | optional -ocultará el texto, luego lo cargará con la fuente alternativa y finalmente aplicará la fuente personalizada 33 | */ 34 | @font-face { 35 | font-family: "Chalet"; 36 | src: url("../assets/Chalet.woff") format("woff"); 37 | font-display: swap; 38 | /* src: url("../assets/Chalet.woff") format("woff"), 39 | url("../assets/Chalet.woff2") format("woff2"); */ 40 | } 41 | 42 | .chalet { 43 | font-family: "Chalet", sans-serif; 44 | font-size: 2rem; 45 | } 46 | 47 | @font-face { 48 | font-family: "Pecita"; 49 | src: url("../assets/Pecita.woff") format("woff"); 50 | font-display: swap; 51 | } 52 | 53 | .pecita { 54 | font-family: "Pecita", cursive; 55 | font-size: 2rem; 56 | } 57 | 58 | .raleway { 59 | font-family: "Raleway", sans-serif; 60 | font-size: 2rem; 61 | } 62 | 63 | /* 64 | text-align 65 | text-decoration 66 | text-indent 67 | text-overflow 68 | overflow: hidden; 69 | white-space: nowrap; 70 | text-transform 71 | 72 | letter-spacing 73 | 74 | white-space 75 | 76 | word-break 77 | word-spacing 78 | writing-mode 79 | */ 80 | .text { 81 | font-size: 2rem; 82 | text-align: center; 83 | text-align: left; 84 | text-decoration: overline; 85 | text-decoration: none; 86 | text-indent: 3rem; 87 | text-transform: capitalize; 88 | text-transform: lowercase; 89 | text-transform: uppercase; 90 | text-transform: none; 91 | letter-spacing: 0.5rem; 92 | word-break: break-all; 93 | writing-mode: vertical-rl; 94 | writing-mode: vertical-lr; 95 | writing-mode: horizontal-tb; 96 | } 97 | 98 | .text a { 99 | text-decoration: none; 100 | } 101 | 102 | .text-overflow { 103 | background-color: blanchedalmond; 104 | border: thin solid black; 105 | padding: 1rem; 106 | width: 50%; 107 | font-size: 2rem; 108 | overflow: hidden; 109 | white-space: nowrap; 110 | text-overflow: ellipsis; 111 | } 112 | 113 | .white-space { 114 | white-space: pre; 115 | } 116 | 117 | .word-spacing { 118 | font-size: 2rem; 119 | word-spacing: 1rem; 120 | } 121 | 122 | .material-icons { 123 | font-family: "Material Icons"; 124 | font-weight: normal; 125 | font-style: normal; 126 | font-size: 24px; /* Preferred icon size */ 127 | display: inline-block; 128 | line-height: 1; 129 | text-transform: none; 130 | letter-spacing: normal; 131 | word-wrap: normal; 132 | white-space: nowrap; 133 | direction: ltr; 134 | 135 | /* Support for all WebKit browsers. */ 136 | -webkit-font-smoothing: antialiased; 137 | /* Support for Safari and Chrome. */ 138 | text-rendering: optimizeLegibility; 139 | 140 | /* Support for Firefox. */ 141 | -moz-osx-font-smoothing: grayscale; 142 | 143 | /* Support for IE. */ 144 | font-feature-settings: "liga"; 145 | } 146 | -------------------------------------------------------------------------------- /02-CursosCSS/css/forms.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 16px; 4 | } 5 | 6 | *, 7 | *::after, 8 | *::before { 9 | box-sizing: inherit; 10 | } 11 | 12 | .contact-form { 13 | --form-text-color: #666; 14 | --form-placeholder-color: #006999; 15 | --form-success-color: #4caf50; 16 | --form-error-color: #f44336; 17 | --form-bg-color: #eee; 18 | --form-border-color: #222; 19 | 20 | background-color: var(--form-bg-color); 21 | border: thin solid var(--form-border-color); 22 | margin-left: auto; 23 | margin-right: auto; 24 | padding: 2rem; 25 | width: 80%; 26 | } 27 | 28 | .contact-form > * { 29 | display: block; 30 | width: 100%; 31 | margin-bottom: 2rem; 32 | font-family: sans-serif; 33 | font-size: 1rem; 34 | padding: 0.5rem; 35 | border-radius: 0.25rem; 36 | color: var(--form-text-color); 37 | caret-color: var(--form-placeholder-color); 38 | } 39 | 40 | .contact-form > *::placeholder { 41 | color: var(--form-placeholder-color); 42 | } 43 | 44 | .contact-form > *[required]:invalid { 45 | border: thin solid var(--form-error-color); 46 | } 47 | 48 | .contact-form > *[required]:valid { 49 | border: thin solid var(--form-success-color); 50 | } 51 | 52 | .contact-form input[type="submit"] { 53 | margin-bottom: 0; 54 | margin-left: auto; 55 | margin-right: auto; 56 | width: 30%; 57 | background-color: var(--form-placeholder-color); 58 | font-weight: bold; 59 | font-size: 1.25rem; 60 | color: #fff; 61 | } 62 | 63 | .contact-form input[type="submit"]:hover { 64 | cursor: pointer; 65 | opacity: 0.75; 66 | } 67 | 68 | .contact-form textarea { 69 | resize: none; 70 | } 71 | -------------------------------------------------------------------------------- /02-CursosCSS/css/images.css: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | height: auto; 4 | } 5 | 6 | .card { 7 | border: medium solid black; 8 | width: 400px; 9 | height: 400px; 10 | } 11 | 12 | .card img { 13 | background-color: blanchedalmond; 14 | height: 300px; 15 | object-fit: fill; /* default */ 16 | object-fit: cover; 17 | object-fit: none; 18 | object-fit: contain; 19 | object-fit: scale-down; /* toma el valor que sea menor de los valores contain y none */ 20 | object-position: left top; 21 | object-position: right bottom; 22 | object-position: -50px center; 23 | object-position: 50% 50%; 24 | } 25 | -------------------------------------------------------------------------------- /02-CursosCSS/css/lists.css: -------------------------------------------------------------------------------- 1 | .list { 2 | list-style-type: disc; /* default */ 3 | list-style-type: square; 4 | list-style-type: circle; 5 | list-style-type: lower-roman; 6 | list-style-type: upper-roman; 7 | list-style-type: decimal; 8 | list-style-type: decimal-leading-zero; 9 | list-style-type: none; 10 | list-style-type: lower-greek; 11 | list-style-image: url("../assets/favicon.png"); 12 | list-style-image: url("../assets/cielo.png"); 13 | list-style-image: none; /* default */ 14 | } 15 | 16 | .list li { 17 | list-style-type: none; 18 | } 19 | 20 | .list li::before { 21 | content: ""; 22 | display: inline-block; 23 | width: 1rem; 24 | height: 1rem; 25 | background-image: url("../assets/favicon.png"); 26 | background-size: contain; 27 | background-repeat: no-repeat; 28 | background-position: center; 29 | } 30 | 31 | .list-2 li { 32 | background-color: coral; 33 | list-style-position: inside; 34 | list-style-position: outside; 35 | } 36 | 37 | .list-3 li { 38 | background-color: cornsilk; 39 | list-style: lower-latin url("../assets/cielo.png") outside; 40 | list-style: lower-latin inside; 41 | } 42 | 43 | .text-column-4 { 44 | list-style-position: inside; 45 | column-count: 4; 46 | column-gap: 1rem; 47 | column-rule: thin dotted red; 48 | column-width: 100px; /* tamaño mínimo de anchura de las columas */ 49 | } 50 | 51 | .text-column-3 { 52 | column-count: 3; 53 | column-gap: 1rem; 54 | column-rule: thin solid gray; 55 | column-width: 100px; /* tamaño mínimo de anchura de las columas */ 56 | } 57 | -------------------------------------------------------------------------------- /02-CursosCSS/css/motion.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-family: sans-serif; 4 | font-size: 16px; 5 | overflow-x: hidden; 6 | } 7 | 8 | *, 9 | *::after, 10 | *::before { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | } 17 | 18 | .box { 19 | border: thick solid #000; 20 | margin-left: auto; 21 | margin-right: auto; 22 | margin-bottom: 5rem; 23 | width: 200px; 24 | height: 200px; 25 | } 26 | 27 | .card { 28 | border: thick solid #000; 29 | margin-left: auto; 30 | margin-right: auto; 31 | margin-bottom: 5rem; 32 | width: 600px; 33 | height: 400px; 34 | } 35 | 36 | .card img { 37 | width: 100%; 38 | height: 100%; 39 | object-fit: cover; 40 | object-position: 0 50%; 41 | } 42 | 43 | /* 44 | Transiciones 45 | transition-property 46 | transition-duration 47 | transition-timing-function: none linear ease ease-in ease-out ease-in-out steps 48 | transition-delay 49 | transition: property duration timing-funciton delay 50 | 51 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties 52 | */ 53 | .transitions .box { 54 | background-color: magenta; 55 | border-color: green; 56 | transition-property: background-color; 57 | transition-duration: 500ms; 58 | transition-timing-function: ease; 59 | transition-delay: 0.5s; 60 | transition: border-color 2s linear 1s; 61 | transition: all 2s ease-in-out 250ms; 62 | transition: background-color 2s ease-in-out 250ms, 63 | border-color 2s ease-in-out 250ms, border-radius 2s ease-in-out 250ms; 64 | } 65 | 66 | .transitions .box:hover { 67 | background-color: cyan; 68 | border-color: red; 69 | border-radius: 2rem; 70 | /* border-style: dashed; */ 71 | } 72 | 73 | .transitions .card { 74 | transition: opacity 1s ease-out, border-color 3s steps(5), 75 | filter 2s ease-in 1s, box-shadow 1.5s linear 2s; 76 | } 77 | 78 | .transitions .card:hover { 79 | opacity: 0.75; 80 | border-color: orchid; 81 | filter: blur(0.15rem); 82 | box-shadow: 1rem 1rem 2rem 0.5rem #000; 83 | } 84 | 85 | .transitions .card img { 86 | transition: object-position 2s ease-in-out 3s; 87 | } 88 | 89 | .transitions .card img:hover { 90 | object-position: 100% 50%; 91 | } 92 | 93 | .transform-2d img { 94 | transition: transform 2s ease-in-out; 95 | } 96 | 97 | .transform-2d img:hover { 98 | transform: none; 99 | transform: translateX(4rem); 100 | transform: translateY(4rem); 101 | transform: translateY(-4rem); 102 | transform: translateZ(4rem); 103 | transform: translate(-4rem, 4rem); 104 | transform: translate(50%, 50%); 105 | transform: translate(-50%, -50%); 106 | transform: translate(-50%, 100px); 107 | transform: scaleX(2); 108 | transform: scaleY(0.5); 109 | transform: scaleZ(1.5); 110 | transform: scale(1.5, 1.5); 111 | transform: scale(-1, -1); 112 | transform: scale(-0.5, -0.5); 113 | transform: rotateX(60deg); 114 | transform: rotateX(90deg); 115 | transform: rotateY(60deg); 116 | transform: rotateY(90deg); 117 | transform: rotateZ(60deg); 118 | transform: rotateZ(-60deg); 119 | transform: rotateZ(360deg); 120 | transform: rotate(360deg); 121 | transform: rotate(-360deg); 122 | transform: skewX(20deg); 123 | transform: skewX(-20deg); 124 | transform: skewY(20deg); 125 | transform: skewY(-20deg); 126 | transform: skew(20deg, 20deg); 127 | /* 128 | matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) 129 | https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix() 130 | */ 131 | transform: matrix(1, 2, 2, 1, 20, 10); 132 | transform: translate(25%, -50%); 133 | transform: translate(25%, -50%) rotate(240deg) skew(10deg, 20deg) 134 | scale(-0.5, -0.5); 135 | } 136 | 137 | .transform-3d { 138 | perspective: 10rem; 139 | } 140 | 141 | .transform-3d img { 142 | transition: transform 2s ease-in-out; 143 | } 144 | 145 | .transform-3d img:hover { 146 | transform: translateZ(4rem); 147 | transform: perspective(1000px) translateZ(4rem); 148 | transform: perspective(100rem) translateZ(4rem); 149 | transform: perspective(10rem) translateZ(4rem); 150 | transform: perspective(1rem) translateZ(4rem); 151 | transform: perspective(10rem) translateZ(4rem); 152 | transform: perspective(10rem) translateZ(-4rem); 153 | transform: translateZ(4rem); 154 | transform: translateZ(-4rem); 155 | transform: translate3d(2rem, 50%, -3rem); 156 | transform: scaleZ(1.5); 157 | transform: scale3d(2, 0.5, 3); 158 | transform: rotateX(60deg); 159 | transform: rotateX(90deg); 160 | transform: rotateY(60deg); 161 | transform: rotateY(-90deg); 162 | transform: rotate3d(1, 1, 1, 45deg); 163 | transform: rotate3d(1, 0.5, 0, -45deg); 164 | transform: rotate3d(-1, 2.5, -2, 60deg); 165 | /* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d() */ 166 | transform: matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1); 167 | transform: rotate3d(-1, 2.5, -2, 60deg); 168 | transform: rotate3d(-1, 2.5, -2, 60deg) translate3d(2rem, 50%, -3rem); 169 | transform: rotate3d(-1, 2.5, -2, 60deg) translate3d(2rem, 50%, -3rem) 170 | scale3d(2, 0.5, 3); 171 | } 172 | 173 | .transform-origin img { 174 | transition: transform 2s ease-in-out; 175 | /* transform-origin: x y z; */ 176 | transform-origin: 50% 50% 0; 177 | transform-origin: 0 0; 178 | transform-origin: 0; 179 | transform-origin: top left; 180 | transform-origin: top right; 181 | transform-origin: top center; 182 | transform-origin: bottom center; 183 | transform-origin: bottom left; 184 | transform-origin: bottom right; 185 | transform-origin: center right; 186 | transform-origin: center left; 187 | transform-origin: center center; 188 | transform-origin: -2rem -3rem; 189 | transform-origin: 2rem 3rem; 190 | transform-origin: 2rem 75%; 191 | transform-origin: 25% 75%; 192 | transform-origin: -5% -5%; 193 | transform-origin: 30% 90%; 194 | } 195 | 196 | .transform-origin img:hover { 197 | transform: rotate(360deg); 198 | } 199 | 200 | .flip-card-1, 201 | .flip-card-2 { 202 | border: thick solid #000; 203 | margin-left: auto; 204 | margin-right: auto; 205 | margin-bottom: 5rem; 206 | width: 600px; 207 | height: 400px; 208 | 209 | position: relative; 210 | cursor: pointer; 211 | transition: transform 1s ease-in-out; 212 | perspective: 10rem; 213 | transform-style: flat; 214 | transform-style: preserve-3d; 215 | } 216 | 217 | .flip-card-2 { 218 | transform-origin: center right; 219 | } 220 | 221 | .flip-card-1:hover { 222 | transform: rotateY(180deg); 223 | } 224 | 225 | .flip-card-2:hover { 226 | transform: translateX(-100%) rotateY(-180deg); 227 | } 228 | 229 | .flip-card-1 img, 230 | .flip-card-2 img { 231 | width: 100%; 232 | height: 100%; 233 | object-fit: cover; 234 | object-position: 0 50%; 235 | } 236 | 237 | .flip-face { 238 | position: absolute; 239 | width: 100%; 240 | height: 100%; 241 | backface-visibility: visible; 242 | backface-visibility: hidden; 243 | } 244 | 245 | .flip-front { 246 | transform: rotateY(0deg); 247 | } 248 | 249 | .flip-back { 250 | transform: rotateY(180deg); 251 | } 252 | 253 | @keyframes myAwesomeAnimation { 254 | from { 255 | opacity: 0; 256 | transform: translateX(0); 257 | } 258 | 259 | to { 260 | opacity: 1; 261 | transform: translateX(100%); 262 | } 263 | } 264 | 265 | .my-animation { 266 | /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */ 267 | animation-name: myAwesomeAnimation; 268 | animation-duration: 3s; 269 | animation-duration: 2s; 270 | /* https://cubic-bezier.com/ */ 271 | animation-timing-function: cubic-bezier(1, 0, 0, 1); 272 | animation-timing-function: cubic-bezier(0.33, 0.92, 0.92, 0.36); 273 | animation-timing-function: ease-in-out; 274 | animation-delay: 1500ms; 275 | animation-delay: 0; 276 | animation-iteration-count: 3; 277 | animation-iteration-count: infinite; 278 | animation-iteration-count: 1; 279 | animation-direction: reverse; 280 | animation-direction: alternate; 281 | animation-direction: alternate-reverse; 282 | animation-direction: normal; 283 | animation-fill-mode: none; 284 | /* Al final de la animación se queda con los estilos finales de la animación */ 285 | animation-fill-mode: forwards; 286 | /* Al inicio de la animación se queda con los estilos iniciales de la animación */ 287 | animation-fill-mode: backwards; 288 | /* both aplica al mismo tiempo forwards y backwards */ 289 | animation-fill-mode: both; 290 | animation-play-state: paused; 291 | animation-play-state: running; 292 | animation: myAwesomeAnimation 1s; 293 | animation: myAwesomeAnimation 1.5s ease 250ms 7 alternate both running; 294 | } 295 | 296 | @keyframes myAwesomeAnimation2 { 297 | 0% { 298 | opacity: 0; 299 | transform: translateX(0); 300 | } 301 | 302 | 50% { 303 | opacity: 0.5; 304 | transform: translateX(-50%); 305 | } 306 | 307 | 75% { 308 | transform: translateX(-75%); 309 | } 310 | 311 | 100% { 312 | opacity: 1; 313 | transform: translateX(100%); 314 | } 315 | } 316 | 317 | .my-animation-2 { 318 | animation: myAwesomeAnimation2 2s; 319 | animation: myAwesomeAnimation2 5s; 320 | animation: myAwesomeAnimation2 1s; 321 | animation: myAwesomeAnimation2 6s; 322 | } 323 | 324 | @keyframes multipleAnimation1 { 325 | 0% { 326 | opacity: 1; 327 | } 328 | 329 | 50% { 330 | opacity: 0; 331 | } 332 | 333 | 100% { 334 | opacity: 1; 335 | } 336 | } 337 | 338 | @keyframes multipleAnimation2 { 339 | 0% { 340 | transform: translateY(0); 341 | } 342 | 343 | 50% { 344 | transform: translateY(-100%); 345 | } 346 | 347 | 100% { 348 | transform: translateY(0); 349 | } 350 | } 351 | 352 | .animation-multiple { 353 | animation: multipleAnimation1 2s infinite; 354 | animation: multipleAnimation2 2s infinite; 355 | animation: multipleAnimation1 2s infinite, multipleAnimation2 1s 3 ease-in-out; 356 | } 357 | 358 | .motion-examples { 359 | text-align: center; 360 | } 361 | 362 | @keyframes fadeIn { 363 | 0% { 364 | opacity: 0; 365 | } 366 | 367 | 100% { 368 | opacity: 1; 369 | } 370 | } 371 | 372 | .fade-in { 373 | font-size: 5vw; 374 | animation: fadeIn 2s linear 2s infinite alternate both; 375 | } 376 | 377 | @keyframes fadeOut { 378 | 0% { 379 | opacity: 1; 380 | } 381 | 382 | 100% { 383 | opacity: 0; 384 | } 385 | } 386 | 387 | .fade-out { 388 | font-size: 5vw; 389 | animation: fadeOut 2s linear 2s infinite alternate both; 390 | } 391 | 392 | @keyframes shake { 393 | 10%, 394 | 90% { 395 | transform: translate(-1px, 0); 396 | } 397 | 398 | 20%, 399 | 80% { 400 | transform: translate(2px, 0); 401 | } 402 | 403 | 30%, 404 | 50%, 405 | 70% { 406 | transform: translate(-4px, 0); 407 | } 408 | 409 | 40%, 410 | 60% { 411 | transform: translate(4px, 0); 412 | } 413 | } 414 | 415 | .shake { 416 | font-size: 5vw; 417 | cursor: pointer; 418 | display: inline-block; 419 | } 420 | 421 | .shake:hover { 422 | animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 423 | transform: translate(0, 0); 424 | } 425 | 426 | @keyframes pulse { 427 | 0% { 428 | transform: scale(1.1); 429 | } 430 | 431 | 50% { 432 | transform: scale(0.8); 433 | } 434 | 435 | 100% { 436 | transform: scale(1); 437 | } 438 | } 439 | 440 | .pulse { 441 | font-size: 5vw; 442 | animation: pulse 1s linear infinite; 443 | } 444 | 445 | @keyframes heartColor { 446 | 10% { 447 | background-color: #d00; 448 | } 449 | } 450 | 451 | .heart { 452 | position: relative; 453 | margin-left: auto; 454 | margin-right: auto; 455 | width: 10vw; 456 | height: 10vw; 457 | animation: pulse 1s infinite; 458 | } 459 | 460 | .heart::after, 461 | .heart::before { 462 | position: absolute; 463 | content: ""; 464 | left: 5vw; 465 | top: 0; 466 | width: 5vw; 467 | height: 8vw; 468 | background-color: #a00; 469 | transform: rotate(-45deg); 470 | transform-origin: 0 100%; 471 | border-radius: 5vw 5vw 0 0; 472 | animation: heartColor 1s infinite; 473 | } 474 | 475 | .heart::after { 476 | left: 0; 477 | transform: rotate(45deg); 478 | transform-origin: 100% 100%; 479 | } 480 | 481 | @keyframes spinner { 482 | 0% { 483 | transform: rotate(0deg); 484 | } 485 | 486 | 100% { 487 | transform: rotate(360deg); 488 | } 489 | } 490 | 491 | .spinner { 492 | width: 5vw; 493 | height: 5vw; 494 | margin-left: auto; 495 | margin-right: auto; 496 | border-radius: 50%; 497 | border: 0.5vw solid rgba(0, 0, 0, 0.1); 498 | border-top-color: #09f; 499 | animation: spinner 1s ease-out infinite; 500 | } 501 | 502 | .btn { 503 | position: relative; 504 | border: none; 505 | border-radius: 0.25rem; 506 | padding: 0.2rem; 507 | width: 15rem; 508 | height: 2.5rem; 509 | font-size: 1.25rem; 510 | font-weight: bold; 511 | cursor: pointer; 512 | overflow: hidden; 513 | box-shadow: 0.25rem 0.25rem 0.5rem 0.25rem rgba(0, 0, 0, 0.15); 514 | } 515 | 516 | .anim-bottom::after { 517 | content: ""; 518 | position: absolute; 519 | bottom: 0; 520 | width: 0; 521 | height: 0.25rem; 522 | background-color: #d00; 523 | transition: width 0.5s ease, left 0.5s ease, right 0.5s ease; 524 | } 525 | 526 | .anim-bottom:hover::after { 527 | width: 100%; 528 | } 529 | 530 | .to-left::after { 531 | left: 0; 532 | } 533 | 534 | .to-center::after { 535 | left: 50%; 536 | } 537 | 538 | .to-center:hover::after { 539 | left: 0; 540 | } 541 | 542 | .to-right::after { 543 | right: 0; 544 | } 545 | 546 | .anim-bg-gradient { 547 | background-image: linear-gradient(to right, pink, violet, orange, orangered); 548 | background-size: 300% 100%; 549 | transition: background-position 0.5s ease-in-out; 550 | } 551 | 552 | .anim-bg-gradient:hover { 553 | background-position: 100% 0; 554 | } 555 | 556 | .tabs-menu { 557 | position: relative; 558 | margin-left: auto; 559 | margin-right: auto; 560 | padding: 1rem; 561 | border-radius: 1rem; 562 | width: 70%; 563 | height: 3rem; 564 | display: flex; 565 | justify-content: space-between; 566 | align-items: center; 567 | background-color: #ddd; 568 | } 569 | 570 | .tabs-menu input[type="radio"] { 571 | display: none; 572 | } 573 | 574 | .tabs-menu label { 575 | position: relative; 576 | z-index: 1; 577 | width: calc(100% / 4 - 0.5rem); 578 | text-align: center; 579 | cursor: pointer; 580 | } 581 | 582 | .tabs-menu label:hover { 583 | color: #fff; 584 | } 585 | 586 | .tabs-menu input[type="radio"]:checked + label { 587 | color: #fff; 588 | } 589 | 590 | .tab-bg-hover { 591 | position: absolute; 592 | width: calc(100% / 4 - 0.5rem); 593 | height: 2rem; 594 | border-radius: 0.5rem; 595 | background-image: linear-gradient(90deg, #a00, #d00); 596 | transition: transform 300ms ease-in-out; 597 | } 598 | 599 | #tab-1:checked ~ .tab-bg-hover { 600 | transform: translateX(0); 601 | } 602 | 603 | #tab-2:checked ~ .tab-bg-hover { 604 | transform: translateX(100%); 605 | } 606 | 607 | #tab-3:checked ~ .tab-bg-hover { 608 | transform: translateX(200%); 609 | } 610 | 611 | #tab-4:checked ~ .tab-bg-hover { 612 | transform: translateX(300%); 613 | } 614 | 615 | .off-canvas-btn { 616 | position: fixed; 617 | bottom: 1rem; 618 | right: 1rem; 619 | z-index: 999; 620 | width: 3rem; 621 | height: 3rem; 622 | cursor: pointer; 623 | /* opacity: 0.25; */ 624 | opacity: 0; 625 | } 626 | 627 | .off-canvas-burger { 628 | position: fixed; 629 | bottom: 1rem; 630 | right: 1rem; 631 | z-index: 998; 632 | width: 3rem; 633 | height: 0.6rem; 634 | border-radius: 0.3rem; 635 | background-color: #d00; 636 | transform: rotate(0deg) translate(0, -1.2rem); 637 | transform-origin: top left; 638 | transition: transform 500ms ease, background-color 500ms ease; 639 | } 640 | 641 | .off-canvas-burger::before, 642 | .off-canvas-burger::after { 643 | content: ""; 644 | display: block; 645 | width: 100%; 646 | height: 0.6rem; 647 | border-radius: 0.3rem; 648 | background-color: #d00; 649 | transition: transform 500ms ease; 650 | } 651 | 652 | .off-canvas-burger::before { 653 | transform: rotate(0deg) translate(0, -0.9rem); 654 | /* background-color: blue; */ 655 | } 656 | 657 | .off-canvas-burger::after { 658 | transform: rotate(0deg) translate(0, 0.3rem); 659 | /* background-color: green; */ 660 | } 661 | 662 | .off-canvas-btn:checked + .off-canvas-burger { 663 | background-color: transparent; 664 | } 665 | 666 | .off-canvas-btn:checked + .off-canvas-burger::before { 667 | transform: rotate(45deg) translate(0, 0); 668 | } 669 | 670 | .off-canvas-btn:checked + .off-canvas-burger::after { 671 | transform: rotate(-45deg) translate(0.4rem, -0.5rem); 672 | } 673 | 674 | .off-canvas-menu { 675 | position: fixed; 676 | top: 0; 677 | left: 0; 678 | bottom: 0; 679 | right: 0; 680 | z-index: 997; 681 | display: flex; 682 | justify-content: center; 683 | align-items: center; 684 | background-color: #0008; 685 | transition: transform 500ms ease-in-out; 686 | transform: translate(0, -100%); 687 | transform: translate(0, 100%); 688 | transform: translate(100%, 0); 689 | transform: translate(-100%, 0); 690 | } 691 | 692 | .off-canvas-btn:checked ~ .off-canvas-menu { 693 | transform: translate(0, 0); 694 | } 695 | 696 | .off-canvas-menu-container { 697 | width: 100%; 698 | height: 100vh; 699 | display: flex; 700 | flex-direction: column; 701 | justify-content: center; 702 | } 703 | 704 | .off-canvas-link { 705 | border-bottom: thin solid #d00; 706 | padding: 2rem; 707 | font-size: 1.5rem; 708 | text-align: center; 709 | text-decoration: none; 710 | color: #fff; 711 | transition: background-color 300ms ease; 712 | } 713 | 714 | .off-canvas-link:first-child { 715 | border-top: thin solid #d00; 716 | } 717 | 718 | .off-canvas-link:hover { 719 | background-color: #d005; 720 | } 721 | 722 | .modal { 723 | position: fixed; 724 | top: 0; 725 | left: 0; 726 | bottom: 0; 727 | right: 0; 728 | z-index: 997; 729 | display: flex; 730 | justify-content: center; 731 | align-items: center; 732 | background-color: #0008; 733 | opacity: 0; 734 | pointer-events: none; 735 | transition: opacity 500ms ease-in-out; 736 | } 737 | 738 | .modal:target { 739 | opacity: 1; 740 | pointer-events: auto; 741 | } 742 | 743 | .modal-container { 744 | position: relative; 745 | border: thick double #d00; 746 | border-radius: 1rem; 747 | padding: 2rem; 748 | width: 70%; 749 | height: 70vh; 750 | display: flex; 751 | flex-direction: column; 752 | text-align: left; 753 | overflow: hidden; 754 | background-color: #fff; 755 | } 756 | 757 | .modal-close { 758 | position: absolute; 759 | top: 1rem; 760 | right: 1rem; 761 | width: 3rem; 762 | height: 3rem; 763 | border-radius: 50%; 764 | font-size: 2rem; 765 | font-weight: bold; 766 | text-align: center; 767 | text-decoration: none; 768 | line-height: 3rem; 769 | color: #fff; 770 | background-color: #d00; 771 | transition: background-color 300ms linear, transform 300ms ease-in-out; 772 | } 773 | 774 | .modal-close:hover { 775 | background-color: #a00; 776 | transform: scale(1.2); 777 | } 778 | 779 | @keyframes introStarWars { 780 | 0% { 781 | transform: perspective(100vh) rotateX(15deg) translateY(100%); 782 | } 783 | 784 | 100% { 785 | transform: perspective(100vh) rotateX(25deg) translateY(-200%); 786 | } 787 | } 788 | 789 | .star-wars { 790 | margin-left: auto; 791 | margin-right: auto; 792 | width: 100%; 793 | height: 100vh; 794 | overflow: hidden; 795 | color: #ffb13a; 796 | background-image: url("../assets/stars.gif"); 797 | } 798 | 799 | .star-wars-container { 800 | margin-left: auto; 801 | margin-right: auto; 802 | width: 80%; 803 | text-align: justify; 804 | letter-spacing: 0.1rem; 805 | animation: introStarWars 20s linear infinite; 806 | } 807 | 808 | .star-wars h2, 809 | .star-wars h3 { 810 | font-size: 5vw; 811 | text-align: center; 812 | } 813 | 814 | .star-wars p { 815 | font-size: 3vw; 816 | line-height: 4rem; 817 | } 818 | -------------------------------------------------------------------------------- /02-CursosCSS/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type="button"], 199 | [type="reset"], 200 | [type="submit"] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type="button"]::-moz-focus-inner, 210 | [type="reset"]::-moz-focus-inner, 211 | [type="submit"]::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type="button"]:-moz-focusring, 222 | [type="reset"]:-moz-focusring, 223 | [type="submit"]:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type="checkbox"], 273 | [type="radio"] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type="number"]::-webkit-inner-spin-button, 283 | [type="number"]::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type="search"] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type="search"]::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /02-CursosCSS/css/otro-hoja.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | border-color: greenyellow; 3 | border-style: solid; 4 | text-align: center; 5 | } 6 | -------------------------------------------------------------------------------- /02-CursosCSS/css/positions-examples.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | /* padding-top: 50px; */ 4 | } 5 | 6 | .header { 7 | background-color: mistyrose; 8 | width: 100%; 9 | height: 50px; 10 | } 11 | 12 | .fixed-top { 13 | position: fixed; 14 | top: 0; 15 | } 16 | 17 | .sticky-top { 18 | position: sticky; 19 | top: 0; 20 | } 21 | 22 | .hero-image { 23 | background-color: palegoldenrod; 24 | width: 100%; 25 | height: 100vh; 26 | } 27 | 28 | .slide { 29 | background-color: paleturquoise; 30 | width: 100%; 31 | height: 100vh; 32 | } 33 | 34 | .slide:nth-child(odd) { 35 | background-color: palevioletred; 36 | } 37 | 38 | .slide-title { 39 | background-color: palegreen; 40 | padding: 16px; 41 | text-align: center; 42 | position: sticky; 43 | top: 50px; 44 | margin-top: 0; 45 | margin-bottom: 0; 46 | } 47 | 48 | .modal-window { 49 | background-color: black; 50 | color: white; 51 | /* position: absolute; */ 52 | position: fixed; 53 | top: 0; 54 | bottom: 0; 55 | left: 0; 56 | right: 0; 57 | opacity: 0.5; 58 | display: none; 59 | } 60 | 61 | .modal-window:target { 62 | display: block; 63 | } 64 | 65 | .box { 66 | background-color: sandybrown; 67 | padding: 20px; 68 | margin-top: -30px; 69 | margin-left: -30px; 70 | padding-right: -30px; 71 | } 72 | -------------------------------------------------------------------------------- /02-CursosCSS/css/positions.css: -------------------------------------------------------------------------------- 1 | /* 2 | Posicionamiento CSS 3 | 4 | La propiedades FLOAT y POSITION nos permiten modificar la posición natural de cualquier elemento del documento HTML. 5 | 6 | El navegador coloca cada elemento teniendo en cuenta el orden en el que aparece en el documento y su tipo de visualización dependiendo si es un elemento de línea o de bloque. 7 | 8 | Con FLOAT y POSITION podemos modificar este comportamiento. 9 | 10 | Elementos Flotantes 11 | - float: Convierte un elemento en flotante desplazándolo hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba. 12 | - clear: Limpia la flotación (left, right, both) 13 | 14 | Tipos de Posicionamiento: 15 | - static (default) 16 | - relative 17 | - absolute 18 | - fixed 19 | - sticky 20 | 21 | Para mover los elementos posicionados se activan las propiedades: 22 | - top (vertical - eje Y) 23 | - bottom (vertical - eje Y) 24 | - left (horizontal - eje X) 25 | - right (horizontal - eje X) 26 | - z-index (profundidad - eje Z) 27 | 28 | Las propiedades top y left van a tener preferencia por sobre bottom y right respectivamente. 29 | 30 | Estás 5 propiedades no funcionan con el valor de static. 31 | */ 32 | 33 | /* static: Es el valor por defecto, significa que el elemento respeta el flujo del documento HTML, por lo que no se puede mover ni posicionar */ 34 | .static { 35 | background-color: yellow; 36 | position: static; 37 | top: 10px; 38 | left: 10px; 39 | } 40 | 41 | /* relative: El elemento conserva sus dimensiones y posición original en el flujo del documento. Si se mueve toma como referencia su posición original */ 42 | .relative { 43 | background-color: turquoise; 44 | position: relative; 45 | width: 300px; 46 | height: 50px; 47 | /* top: 50px; 48 | left: 50px; */ 49 | bottom: 50px; 50 | right: 50px; 51 | top: -30px; 52 | left: -10px; 53 | top: 300px; 54 | left: 50px; 55 | } 56 | 57 | /* absolute: El elemento pierde sus dimensiones y posición original en el flujo del documento. Si se mueve puede tomar como referencia 2 elementos: 58 | 1) El primer ancestro con posicionamiento relativo 59 | 2) Si no encuentra un ancestro relativo, se mueve respecto del documento HTML */ 60 | .absolute { 61 | background-color: tomato; 62 | position: absolute; 63 | width: 200px; 64 | height: 50px; 65 | /* top: 0; 66 | left: 0; */ 67 | /* top: 100px; 68 | left: 100px; */ 69 | right: 0; 70 | bottom: 0; 71 | } 72 | 73 | .relative-parent { 74 | background-color: khaki; 75 | position: relative; 76 | width: 600px; 77 | height: 50px; 78 | top: 50px; 79 | left: 50px; 80 | } 81 | 82 | .absolute-child { 83 | background-color: lightcoral; 84 | position: absolute; 85 | /* left: 0; 86 | top: 0; */ 87 | /* bottom: 0; 88 | right: 0; */ 89 | top: -50px; 90 | left: -30px; 91 | } 92 | 93 | /* fixed: El elemento pierde sus dimensiones y posición original en el flujo del documento. Si se mueve toma como referencia el documento HTML y queda fijo en la posición, cuando el scroll se mueva, el elemento no lo hará, queda FIJO */ 94 | .fixed { 95 | background-color: lightgreen; 96 | position: fixed; 97 | width: 300px; 98 | height: 100px; 99 | /* right: 20px; 100 | bottom: 10px; */ 101 | top: 30px; 102 | left: 400px; 103 | } 104 | 105 | /* sticky: es un combinación de posicionamiento relative y fixed, para este posicionamiento las propiedades de top, left, bottom y right no mueven el elemento, sirven como un punto de referencia, mientras no lleguen a ese valor el elemento se comporta como relative, cuando llega se convierte en fixed 106 | 107 | Para que este comportamiento funcione el elemento sticky debe ser hijo directo del body o su elemento contenedor debe tener dimensiones definidas y sólo será sticky dentro de las dimensiones de su contenedor padre. */ 108 | .sticky { 109 | background-color: lightskyblue; 110 | position: sticky; 111 | top: 50px; 112 | } 113 | 114 | .sticky-parent { 115 | border: thin dashed black; 116 | height: 600px; 117 | } 118 | 119 | .sticky-child { 120 | background-color: lightslategray; 121 | position: sticky; 122 | top: 75px; 123 | } 124 | 125 | /* z-index: propiedad que permite controlar la profundidad de los elementos posicionados, su valor por defecto es auto, acepta número positivos, negativos y cero. 126 | 127 | A mayor valor el elemento esta más al frente, a menor valor más al fondo. 128 | 129 | Un elemento padre nunca podrá estar sobre sus elementos hijos, sin embargo los elementos hijos si pueden dándoles un valor negativo y que el elemento padre no tenga definido valor de z-index */ 130 | .z-index-1, 131 | .z-index-2 { 132 | background-color: mediumaquamarine; 133 | border: thin solid black; 134 | position: relative; 135 | width: 200px; 136 | height: 200px; 137 | } 138 | 139 | .z-index-1 { 140 | z-index: 1; 141 | z-index: 0; 142 | } 143 | 144 | .z-index-2 { 145 | top: -200px; 146 | left: 100px; 147 | z-index: 2; 148 | z-index: -1; 149 | } 150 | 151 | .z-index-parent { 152 | background-color: mediumorchid; 153 | width: 300px; 154 | height: 300px; 155 | position: relative; 156 | /* z-index: 2; */ 157 | } 158 | 159 | .z-index-child { 160 | background-color: mediumvioletred; 161 | position: relative; 162 | width: 150px; 163 | height: 150px; 164 | top: -75px; 165 | left: 75px; 166 | z-index: -1; 167 | } 168 | -------------------------------------------------------------------------------- /02-CursosCSS/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | font: inherit; 92 | vertical-align: baseline; 93 | } 94 | /* HTML5 display-role reset for older browsers */ 95 | article, 96 | aside, 97 | details, 98 | figcaption, 99 | figure, 100 | footer, 101 | header, 102 | hgroup, 103 | menu, 104 | nav, 105 | section { 106 | display: block; 107 | } 108 | body { 109 | line-height: 1; 110 | } 111 | ol, 112 | ul { 113 | list-style: none; 114 | } 115 | blockquote, 116 | q { 117 | quotes: none; 118 | } 119 | blockquote:before, 120 | blockquote:after, 121 | q:before, 122 | q:after { 123 | content: ""; 124 | content: none; 125 | } 126 | table { 127 | border-collapse: collapse; 128 | border-spacing: 0; 129 | } 130 | -------------------------------------------------------------------------------- /02-CursosCSS/css/scroll-one-page.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-family: sans-serif; 4 | font-size: 16px; 5 | scroll-behavior: smooth; 6 | } 7 | 8 | *, 9 | *::after, 10 | *::before { 11 | box-sizing: inherit; 12 | } 13 | 14 | body, 15 | h1, 16 | h2 { 17 | margin: 0; 18 | } 19 | 20 | img { 21 | max-width: 50%; 22 | height: auto; 23 | } 24 | 25 | [id] { 26 | scroll-margin-top: 7.8ex; 27 | } 28 | 29 | .header { 30 | position: sticky; 31 | top: 0; 32 | padding: 0.25rem; 33 | text-align: center; 34 | background-color: #000; 35 | color: #fff; 36 | } 37 | 38 | .header a { 39 | margin: 0 1rem; 40 | color: #00c4d6; 41 | } 42 | 43 | .header a:hover { 44 | color: #e94bb4; 45 | } 46 | 47 | .slide { 48 | width: 100%; 49 | min-height: 100vh; 50 | padding: 2rem; 51 | color: #d9e8f0; 52 | background-color: #1e2345; 53 | } 54 | 55 | .slide:nth-child(even) { 56 | background-color: #108eb4; 57 | } 58 | -------------------------------------------------------------------------------- /02-CursosCSS/css/scroll-snap-slides.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-family: sans-serif; 4 | font-size: 16px; 5 | } 6 | 7 | *, 8 | *::after, 9 | *::before { 10 | box-sizing: inherit; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | } 16 | 17 | .slides { 18 | width: 100%; 19 | height: 100vh; 20 | overflow-y: scroll; 21 | /* scroll-snap-type: [x | y | inline | block | both] [mandatory | proximity]; */ 22 | scroll-snap-type: none; 23 | scroll-snap-type: block mandatory; 24 | scroll-snap-type: y mandatory; 25 | scroll-snap-type: y proximity; 26 | scroll-snap-type: both mandatory; 27 | } 28 | 29 | .slide { 30 | width: 100%; 31 | height: inherit; 32 | background-color: #1e2345; 33 | 34 | scroll-snap-align: start; 35 | scroll-snap-align: none; 36 | scroll-snap-align: end; 37 | scroll-snap-align: center; 38 | } 39 | 40 | .slide:nth-child(even) { 41 | background-color: #108eb4; 42 | } 43 | 44 | .slide-container { 45 | width: 80%; 46 | height: inherit; 47 | margin: 0 auto; 48 | display: flex; 49 | flex-direction: column; 50 | justify-content: center; 51 | align-items: center; 52 | font-size: 3vw; 53 | color: #d9e8f0; 54 | } 55 | 56 | .carousel { 57 | border: thick solid #d938f0; 58 | display: flex; 59 | width: 50%; 60 | height: 50vh; 61 | overflow-x: hidden; 62 | } 63 | 64 | .carousel-container { 65 | width: 100%; 66 | display: grid; 67 | grid-template-columns: repeat(5, 100%); 68 | overflow-x: scroll; 69 | overflow-y: hidden; 70 | scroll-snap-type: x mandatory; 71 | scroll-snap-type: inline mandatory; 72 | scroll-snap-type: both proximity; 73 | } 74 | 75 | .carousel-slide { 76 | display: flex; 77 | flex-direction: column; 78 | justify-content: center; 79 | align-items: center; 80 | background-color: #108eb4; 81 | scroll-snap-align: none; 82 | scroll-snap-align: start; 83 | scroll-snap-align: end; 84 | scroll-snap-align: center; 85 | } 86 | 87 | .carousel-slide:nth-child(even) { 88 | background-color: #1e2345; 89 | } 90 | 91 | .gradient-text { 92 | background-image: linear-gradient(45deg, magenta, yellow); 93 | -ms-background-clip: text; 94 | -moz-background-clip: text; 95 | -webkit-background-clip: text; 96 | background-clip: text; 97 | -ms-text-fill-color: transparent; 98 | -moz-text-fill-color: transparent; 99 | -webkit-text-fill-color: transparent; 100 | text-fill-color: transparent; 101 | } 102 | -------------------------------------------------------------------------------- /02-CursosCSS/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Comentario en CSS 3 | 4 | Regla CSS consta de 2 partes 5 | 1) el selector 6 | 2) bloque de declaraciones: { 7 | atributo: valor; 8 | atributo-de-mas-dos-palabras: otro-valor; 9 | } 10 | */ 11 | 12 | /* Son mala práctica por que son bloqueantes a la hora de que el navegador lee esta instrucción */ 13 | @import url("otro-hoja.css"); 14 | 15 | h1 { 16 | color: orangered; 17 | background-color: black; 18 | } 19 | 20 | /* 21 | Links de referencia y documentación 22 | https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada 23 | https://www.w3.org/html/logo/ 24 | https://www.w3.org/standards/webdesign/htmlcss.html 25 | https://www.w3.org/TR/css-2020/ 26 | https://developer.mozilla.org/es/docs/Web/CSS 27 | https://cssreference.io/ 28 | https://caniuse.com/ 29 | https://codeguide.co/ 30 | */ 31 | 32 | /* 33 | Selectores Básicos 34 | 1) Etiquetas - son elementos html 35 | 2) Identificadores - atributo id - # 36 | 3) Clases - atributo class - . 37 | */ 38 | 39 | p { 40 | color: midnightblue; 41 | } 42 | 43 | /* Dar estilos con Id se considera un AntiPatrón */ 44 | #parrafo-dos { 45 | background-color: skyblue; 46 | } 47 | 48 | /* Dar estilos con clases nos permite reutilizar nuestro código CSS */ 49 | .bg-skyblue { 50 | background-color: skyblue; 51 | } 52 | 53 | .bg-steelblue { 54 | background-color: steelblue; 55 | } 56 | 57 | .text-20 { 58 | font-size: 20px; 59 | } 60 | 61 | .text-32 { 62 | font-size: 32px; 63 | } 64 | 65 | .text-white { 66 | color: white; 67 | } 68 | 69 | .hijos-directos > li { 70 | background-color: thistle; 71 | } 72 | 73 | .hijos-descendientes b { 74 | background-color: thistle; 75 | } 76 | 77 | /* Los selectores de hermanos van a aplicar a los elementos que son hermanos y que estén por debajo del elemento de referencia */ 78 | .hermanos-general ~ li { 79 | background-color: thistle; 80 | } 81 | 82 | .hermanos-adyacentes + li { 83 | background-color: thistle; 84 | } 85 | 86 | /* Selectores de atributos */ 87 | .selectores-atributos a[href] { 88 | color: orangered; 89 | } 90 | 91 | .selectores-atributos a[target="_blank"] { 92 | font-weight: bold; 93 | } 94 | 95 | /* El comodín del * aplica el estilo si contiene el texto en cuestión en cualquier parte */ 96 | .selectores-atributos a[href*="jonmircha"] { 97 | font-size: 24px; 98 | } 99 | 100 | /* El comodín del ^ aplica el estilo si contiene el texto en cuestión al inicio */ 101 | .selectores-atributos a[href^="http://"] 102 | { 103 | text-decoration: none; 104 | } 105 | 106 | /* El comodín del $ aplica el estilo si contiene el texto en cuestión al final */ 107 | .selectores-atributos a[href$=".com"] { 108 | background-color: black; 109 | } 110 | 111 | /* El comodín del ~ aplica el estilo si contiene el texto en cuestión en una lista separada por espacios */ 112 | .selectores-atributos a[class~="cursos"] { 113 | background-color: midnightblue; 114 | } 115 | 116 | /* El comodín del | aplica el estilo si contiene el texto en cuestión en una lista separada por espacios y que despues del texto en cuestión venga un guión medio - */ 117 | .selectores-atributos a[class|="menu"] { 118 | font-style: italic; 119 | } 120 | 121 | /* Selector Universal */ 122 | * { 123 | font-family: sans-serif; 124 | } 125 | 126 | .selector-universal * { 127 | font-size: 24px; 128 | } 129 | 130 | /* 131 | Pseudoclases - Dan estilos dependiendo del contexto, posición o estado del elemento 132 | https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes 133 | */ 134 | 135 | .form-pseudoclases *:required { 136 | border-color: yellow; 137 | } 138 | 139 | .form-pseudoclases *:valid { 140 | border-color: green; 141 | } 142 | 143 | .form-pseudoclases *:invalid { 144 | border-color: red; 145 | } 146 | 147 | .form-pseudoclases *:focus { 148 | background-color: skyblue; 149 | } 150 | 151 | .form-pseudoclases *:disabled { 152 | background-color: pink; 153 | } 154 | 155 | .menu-pseudoclases a:visited { 156 | color: olive; 157 | } 158 | 159 | .menu-pseudoclases a:hover { 160 | color: orange; 161 | } 162 | 163 | .p-pseudoclases:hover { 164 | font-size: 20px; 165 | } 166 | 167 | #temario-css:target { 168 | background-color: lightgreen; 169 | } 170 | 171 | .lista-pseudoclases li:first-child { 172 | color: green; 173 | } 174 | 175 | .lista-pseudoclases li:last-child { 176 | color: violet; 177 | } 178 | 179 | .lista-pseudoclases li:nth-child(3) { 180 | color: navy; 181 | } 182 | 183 | .lista-pseudoclases li:nth-child(4n) { 184 | font-size: 20px; 185 | } 186 | 187 | .lista-pseudoclases li:nth-child(3n + 1) { 188 | font-weight: bold; 189 | } 190 | 191 | .lista-pseudoclases li:nth-child(even) { 192 | background-color: yellow; 193 | } 194 | 195 | .lista-pseudoclases li:nth-child(odd) { 196 | background-color: orange; 197 | } 198 | 199 | .articulo-pseudoclases p:first-of-type { 200 | background-color: pink; 201 | } 202 | 203 | .articulo-pseudoclases p:last-of-type { 204 | background-color: violet; 205 | } 206 | 207 | .articulo-pseudoclases p:nth-of-type(3) { 208 | background-color: fuchsia; 209 | } 210 | 211 | .articulo-pseudoclases *:not(p) { 212 | background-color: beige; 213 | } 214 | 215 | /* 216 | Pseudoelementos - Dan estilos a partes específicas de un elemento, se usa el :: para diferenciarlos de las pseudoclases 217 | https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos 218 | */ 219 | 220 | .saga-geminis::before { 221 | content: "🤼‍♂️"; 222 | } 223 | 224 | .saga-geminis::after { 225 | content: "♊"; 226 | } 227 | 228 | .saga-precio::before { 229 | content: "$"; 230 | font-weight: bold; 231 | } 232 | 233 | .saga-precio::after { 234 | content: "USD"; 235 | font-weight: bold; 236 | } 237 | 238 | .p-pseudoelementos::first-letter { 239 | font-weight: bold; 240 | font-size: 32px; 241 | } 242 | 243 | .p-pseudoelementos::first-line { 244 | color: coral; 245 | } 246 | 247 | .p-pseudoelementos::selection { 248 | color: greenyellow; 249 | background-color: black; 250 | } 251 | 252 | .input-pseudoelementos::placeholder { 253 | color: green; 254 | } 255 | 256 | /* Agrupar Selectores */ 257 | .form-agrupar-selectores input[type="text"], 258 | .form-agrupar-selectores input[type="email"], 259 | .form-agrupar-selectores textarea { 260 | border-color: yellow; 261 | border-width: 2px; 262 | border-style: dashed; 263 | background-color: black; 264 | font-size: 20px; 265 | display: block; 266 | width: 300px; 267 | } 268 | 269 | /* 270 | El Algoritmo de CSS: Es la forma en que el navegador aplica los estilos al documento HTML. Es vital entender este concepto para que entiendas como se aplican y en algunas ocasiones se sobreescriben las reglas CSS. 271 | 1) La Cascada. 272 | 2) La Especificidad. 273 | 3) La Herencia. 274 | 275 | La Cascada es el mecanismo en que el navegador aplica los estilos. Y toma en cuenta lo siguiente en este orden: 276 | 1) El Origen del Código: 277 | - El User Agent (los estilos por defecto del navegador) 278 | - Personalizaciones del usuario. 279 | - Los estilos del autor. 280 | 2) La Especificidad del Selector 281 | 3) Orden de Aparición 282 | 283 | La Especificidad es el peso que tiene un selector cuando hay conflicto de estilos. Se calcula de la siguiente forma: 284 | Etiquetas y pseudoelementos -------------- 0,0,0,1 285 | Clases, atributos y pseudoclases ------------0,0,1,0 286 | Identificadores -------------------------------0,1,0,0 287 | Estilos en línea--------------------------------1,0,0,0 288 | !important ------------------Rompe la especificidad 289 | 290 | La Herencia, es la capacidad de un selector de obtener (heredar) los valores de sus ancestros más cercanos, para aplicarla se usa el valor inherit, si queremos evitarla podemos asignar otro valor o inicializar la propiedad en cuestión con el valor initial 291 | 292 | https://web.dev/learn/css/inheritance/#which-properties-are-inheritable 293 | */ 294 | 295 | blockquote#cita-marco.cita-marco { 296 | background-color: lightsteelblue; 297 | } 298 | 299 | blockquote { 300 | background-color: burlywood; 301 | } 302 | 303 | #cita-marco { 304 | background-color: lightgreen; 305 | } 306 | 307 | blockquote.cita-marco { 308 | background-color: tomato; 309 | } 310 | 311 | .cita-marco { 312 | background-color: cornflowerblue; 313 | } 314 | 315 | .cita-marco { 316 | background-color: mediumaquamarine !important; 317 | } 318 | 319 | blockquote#cita-marco { 320 | background-color: lightsalmon; 321 | } 322 | 323 | .cita-marco { 324 | background-color: moccasin !important; 325 | background-color: darkorange !important; 326 | font-size: 32px; 327 | border-style: dotted; 328 | border-color: red; 329 | } 330 | 331 | .cita-marco cite { 332 | background-color: pink; 333 | background-color: inherit; 334 | font-size: 24px; 335 | font-size: initial; 336 | border-style: inherit; 337 | border-color: inherit; 338 | } 339 | 340 | /* 341 | https://autoprefixer.github.io/ 342 | https://caniuse.com/ 343 | 344 | Prefijos de los navegadores 345 | -webkit-user-select: none; 346 | -moz-user-select: none; 347 | -ms-user-select: none; 348 | user-select: none; 349 | */ 350 | -------------------------------------------------------------------------------- /02-CursosCSS/css/tables.css: -------------------------------------------------------------------------------- 1 | .table { 2 | font-size: 3rem; 3 | border-collapse: collapse; 4 | border-collapse: separate; /* default */ 5 | empty-cells: hide; 6 | empty-cells: show; /* default */ 7 | } 8 | 9 | table, 10 | td, 11 | th { 12 | border: medium solid black; 13 | border-spacing: 0; 14 | border-spacing: 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /02-CursosCSS/css/units.css: -------------------------------------------------------------------------------- 1 | /* 2 | Unidades de Medida 3 | 1) Absolutas (Su valor no cambia, son unidades del mundo real) 4 | pc, cm, mm, in, Q 5 | pt (1/72in) 6 | px (1/96in) 7 | 2) Relativas (Su valor es relativo a un contexto) 8 | em, rem, ex, ch - al tamaño de la fuente 9 | em - basada en la anchura de la "m" de la fuente del elemento 10 | rem - basada en la anchura de la "m" de la fuente del elemento raíz (html) 11 | ex - basada en la altura de la "x" de la fuente del elemento 12 | ch - basada en la anchura del "0" de la fuente del elemento 13 | % - al tamaño del contenedor 14 | vw, vh, vmin, vmax - al tamaño del viewport 15 | vw - ancho del viewport van de 1 a 100 16 | vh - alto del viewport van de 1 a 100 17 | vmax - entre vw y vh toma el que tenga mayor valor 18 | vmin - entre vw y vh toma el que tenga menor valor 19 | 20 | Conversiones entre unidades - https://pxtoem.com/ 21 | */ 22 | html { 23 | box-sizing: border-box; 24 | font-size: 20px; 25 | font-size: 32px; 26 | font-size: 16px; 27 | background-color: black; 28 | } 29 | 30 | body { 31 | background-color: blanchedalmond; 32 | /* margin: 0; */ 33 | } 34 | 35 | *, 36 | *::after, 37 | *::before { 38 | box-sizing: inherit; 39 | } 40 | 41 | .pixels { 42 | background-color: cadetblue; 43 | width: 500px; 44 | height: 400px; 45 | padding: 20px; 46 | font-size: 32px; 47 | border: 5px solid rebeccapurple; 48 | } 49 | 50 | .ems { 51 | background-color: cadetblue; 52 | font-size: 24px; 53 | padding: 1em 0.5em; 54 | border: 5px solid rebeccapurple; 55 | } 56 | 57 | .em-child { 58 | background-color: salmon; 59 | border: thick solid beige; 60 | margin: 0.5em; 61 | padding: 1em; 62 | font-size: 2em; 63 | } 64 | 65 | .rems { 66 | background-color: cadetblue; 67 | font-size: 24px; 68 | padding: 1rem 0.5rem; 69 | border: 5px solid rebeccapurple; 70 | } 71 | 72 | .rem-child { 73 | background-color: salmon; 74 | border: thick solid beige; 75 | margin: 0.5rem; 76 | padding: 1rem; 77 | font-size: 2rem; 78 | } 79 | 80 | .exs { 81 | background-color: cadetblue; 82 | font-size: 24px; 83 | padding: 1ex 0.5ex; 84 | border: 5px solid rebeccapurple; 85 | } 86 | 87 | .ex-child { 88 | background-color: salmon; 89 | border: thick solid beige; 90 | margin: 0.5ex; 91 | padding: 1ex; 92 | font-size: 2ex; 93 | } 94 | 95 | .chs { 96 | background-color: cadetblue; 97 | width: 10ch; 98 | } 99 | 100 | .percentages { 101 | background-color: darkkhaki; 102 | padding: 5%; 103 | margin: 20% 10%; 104 | width: 80%; 105 | font-size: 100%; 106 | height: 100%; 107 | } 108 | 109 | .height-parent { 110 | background-color: brown; 111 | width: 500px; 112 | height: 500px; 113 | } 114 | 115 | .height-child { 116 | background-color: coral; 117 | width: 50%; 118 | height: 50%; 119 | } 120 | 121 | .viewport { 122 | background-color: darkcyan; 123 | width: 50vw; 124 | /* Recuerda que la etiqueta body tiene margenes por defecto y recuerda que las barras de scroll del navegador también forman parte del viewport */ 125 | width: 100%; 126 | width: 100vw; 127 | height: 50vh; 128 | height: 100vh; 129 | font-size: 5vw; 130 | padding: 2vh 2vw; 131 | } 132 | 133 | .vmin, 134 | .vmax { 135 | background-color: darksalmon; 136 | border: thick solid cyan; 137 | width: 50vmax; 138 | height: 50vmin; 139 | } 140 | -------------------------------------------------------------------------------- /02-CursosCSS/css/variables-functions.css: -------------------------------------------------------------------------------- 1 | :root { 2 | color: darkgreen; 3 | --default-bg-color: skyblue; 4 | } 5 | 6 | html { 7 | color: red; 8 | box-sizing: border-box; 9 | } 10 | 11 | *, 12 | *::after, 13 | *::before { 14 | box-sizing: inherit; 15 | } 16 | 17 | .custom-props-1 { 18 | --primary-color: gray; 19 | --font-size: 32px; 20 | background-color: var(--primary-color); 21 | } 22 | 23 | .custom-props-2 { 24 | background-color: var(--default-bg-color); 25 | border: thin solid var(--border-color); 26 | padding: 1rem; 27 | } 28 | 29 | .custom-props-3 { 30 | font-size: var(--font-size); 31 | border: thin solid var(--border-color); 32 | } 33 | 34 | .title-props { 35 | --primary-color: navy; 36 | color: var(--primary-color, orange); 37 | background-color: var(--default-bg-color); 38 | } 39 | 40 | .ch-10 { 41 | --padding-size: 3ch; 42 | --num-ch: 10ch; 43 | background-color: var(--default-bg-color); 44 | font-size: 2rem; 45 | padding: var(--padding-size); 46 | width: calc(var(--num-ch) + var(--padding-size) * 2); 47 | } 48 | 49 | .min-max { 50 | background-color: var(--default-bg-color); 51 | margin-top: 1rem; 52 | width: min(300px, 20vw, 20rem); 53 | height: max(200px, 25vh); 54 | } 55 | 56 | h1 { 57 | font-size: clamp(2rem, 1rem + 3vw, 3rem); 58 | } 59 | -------------------------------------------------------------------------------- /02-CursosCSS/css/visual-effects.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-family: sans-serif; 4 | font-size: 16px; 5 | } 6 | 7 | *, 8 | *::after, 9 | *::before { 10 | box-sizing: inherit; 11 | } 12 | 13 | .box { 14 | border: thick solid #000; 15 | margin-left: auto; 16 | margin-right: auto; 17 | margin-bottom: 5rem; 18 | width: 200px; 19 | height: 200px; 20 | } 21 | 22 | .shadows { 23 | color: navy; 24 | font-size: 2rem; 25 | text-align: center; 26 | /* box-shadow: mov-x mov-y blur-radius spread-blur color inset/outset; */ 27 | box-shadow: 1rem 1rem 1rem 1rem; 28 | box-shadow: -1rem -1rem 1rem 1rem; 29 | box-shadow: 1rem 1rem 1rem 1rem #0005; 30 | box-shadow: 1rem 1rem 1rem 1rem #f00 inset; 31 | box-shadow: 1rem 1rem 2rem 0.5rem #0007; 32 | /* text-shadow: mov-x mov-y blur-radius color; */ 33 | text-shadow: -1rem -1rem 0.5rem hotpink; 34 | } 35 | 36 | .shadows-multiple { 37 | font-size: 2rem; 38 | text-align: center; 39 | box-shadow: 1rem 1rem 1rem 1rem #0005, 1rem 1rem 1rem 1rem #f00 inset, 40 | -0.5rem -0.5rem 0.5rem 2rem hotpink; 41 | text-shadow: -1rem -1rem 0.5rem navy, 1rem 1rem 0.5rem greenyellow; 42 | } 43 | 44 | .drop-shadow { 45 | width: 600px; 46 | height: auto; 47 | } 48 | 49 | .drop-shadow img { 50 | max-width: 100%; 51 | height: auto; 52 | /* filter: drop-shadow(mov-x mov-y blur-radius color); */ 53 | box-shadow: 1rem 1rem 1rem 1rem #f00; 54 | filter: drop-shadow(1rem 1rem 1rem orangered); 55 | filter: drop-shadow(1rem 1rem 1rem steelblue); 56 | } 57 | 58 | .linear-gradient { 59 | background-image: linear-gradient(red, green); 60 | background-image: linear-gradient(red, green, blue); 61 | background-image: linear-gradient(0deg, red, green, blue); 62 | background-image: linear-gradient(20deg, red, green, blue); 63 | background-image: linear-gradient(45deg, red, green, blue); 64 | background-image: linear-gradient(90deg, red, green, blue); 65 | background-image: linear-gradient(180deg, red, green, blue); 66 | background-image: linear-gradient(270deg, red, green, blue); 67 | background-image: linear-gradient(360deg, red, green, blue); 68 | background-image: linear-gradient(to right, red, green, blue); 69 | background-image: linear-gradient(to top, red, green, blue); 70 | background-image: linear-gradient(to bottom, red, green, blue); 71 | background-image: linear-gradient(to left, red, green, blue); 72 | background-image: linear-gradient(to top left, red, green, blue); 73 | background-image: linear-gradient(to top right, red, green, blue); 74 | background-image: linear-gradient(to bottom left, red, green, blue); 75 | background-image: linear-gradient(to bottom right, red, green, blue); 76 | background-image: linear-gradient(90deg, red 30%, green 60%, blue); 77 | background-image: linear-gradient(90deg, green 33%, white 34% 67%, red 68%); 78 | } 79 | 80 | .radial-gradient { 81 | background-image: radial-gradient(cyan, magenta); 82 | background-image: radial-gradient(cyan, magenta, yellow); 83 | background-image: radial-gradient(circle 4rem, cyan, magenta, yellow); 84 | background-image: radial-gradient(circle 4rem, cyan 30%, magenta 80%, yellow); 85 | background-image: radial-gradient( 86 | circle 100px, 87 | cyan 30%, 88 | magenta 60%, 89 | yellow 90% 90 | ); 91 | background-image: radial-gradient( 92 | circle 100px at top, 93 | cyan 30%, 94 | magenta 60%, 95 | yellow 90% 96 | ); 97 | background-image: radial-gradient( 98 | circle 100px at bottom, 99 | cyan 30%, 100 | magenta 60%, 101 | yellow 90% 102 | ); 103 | background-image: radial-gradient( 104 | circle 100px at left, 105 | cyan 30%, 106 | magenta 60%, 107 | yellow 90% 108 | ); 109 | background-image: radial-gradient( 110 | circle 100px at right, 111 | cyan 30%, 112 | magenta 60%, 113 | yellow 90% 114 | ); 115 | background-image: radial-gradient( 116 | circle 100px at center, 117 | cyan 30%, 118 | magenta 60%, 119 | yellow 90% 120 | ); 121 | background-image: radial-gradient( 122 | circle 100px at top left, 123 | cyan 30%, 124 | magenta 60%, 125 | yellow 90% 126 | ); 127 | background-image: radial-gradient( 128 | circle 100px at top right, 129 | cyan 30%, 130 | magenta 60%, 131 | yellow 90% 132 | ); 133 | background-image: radial-gradient( 134 | circle 100px at bottom left, 135 | cyan 30%, 136 | magenta 60%, 137 | yellow 90% 138 | ); 139 | background-image: radial-gradient( 140 | circle 100px at bottom right, 141 | cyan 30%, 142 | magenta 60%, 143 | yellow 90% 144 | ); 145 | background-image: radial-gradient( 146 | circle 100px, 147 | cyan 30%, 148 | magenta 60%, 149 | yellow 90% 150 | ); 151 | background-image: radial-gradient( 152 | ellipse 50px 100px, 153 | cyan 30%, 154 | magenta 60%, 155 | yellow 90% 156 | ); 157 | background-image: radial-gradient(circle 100px, red 50%, white 50%); 158 | } 159 | 160 | .conic-gradient { 161 | background-image: conic-gradient(red, green); 162 | background-image: conic-gradient(red, green, blue); 163 | background-image: conic-gradient(red 0% 50%, green 60%, blue 80%); 164 | background-image: conic-gradient( 165 | red 0deg 90deg, 166 | green 120deg 240deg, 167 | blue 270deg 168 | ); 169 | background-image: conic-gradient( 170 | from 90deg, 171 | red 0deg 90deg, 172 | green 120deg 240deg, 173 | blue 270deg 174 | ); 175 | background-image: conic-gradient( 176 | from 180deg, 177 | red 0deg 90deg, 178 | green 120deg 240deg, 179 | blue 270deg 180 | ); 181 | background-image: conic-gradient( 182 | from 270deg, 183 | red 0deg 90deg, 184 | green 120deg 240deg, 185 | blue 270deg 186 | ); 187 | background-image: conic-gradient( 188 | from 90deg, 189 | red 0deg 120deg, 190 | white 120deg 240deg, 191 | blue 240deg 192 | ); 193 | } 194 | 195 | .repeat-gradient-linear { 196 | background-image: repeating-linear-gradient( 197 | red 0 10px, 198 | green 10px 20px, 199 | blue 20px 30px 200 | ); 201 | background-image: repeating-linear-gradient( 202 | 45deg, 203 | red 0 10px, 204 | green 10px 20px, 205 | blue 20px 30px 206 | ); 207 | background-image: repeating-linear-gradient( 208 | 90deg, 209 | red 0 10px, 210 | green 10px 20px, 211 | blue 20px 30px 212 | ); 213 | } 214 | 215 | .repeat-gradient-radial { 216 | background-image: repeating-radial-gradient( 217 | circle 4rem, 218 | cyan 0 10px, 219 | magenta 10px 20px, 220 | yellow 20px 30px 221 | ); 222 | } 223 | 224 | .repeat-gradient-conic { 225 | background-image: repeating-conic-gradient( 226 | red 0 8%, 227 | yellow 8% 16%, 228 | black 16% 24% 229 | ); 230 | } 231 | 232 | .chart-gradient { 233 | background-image: conic-gradient(cyan 0% 50%, magenta 50% 80%, yellow 80%); 234 | border-radius: 50%; 235 | } 236 | 237 | .donut-gradient { 238 | background-image: radial-gradient(white 30%, black 31%, transparent 33%), 239 | conic-gradient(cyan 0% 50%, magenta 50% 80%, yellow 80%); 240 | border-radius: 50%; 241 | } 242 | 243 | .card { 244 | border: thick solid #000; 245 | margin-left: auto; 246 | margin-right: auto; 247 | margin-bottom: 5rem; 248 | width: 600px; 249 | height: 400px; 250 | } 251 | 252 | .card img { 253 | width: 100%; 254 | height: 100%; 255 | object-fit: cover; 256 | object-position: 0 50%; 257 | } 258 | 259 | .filter { 260 | /* 261 | filter: blur(1rem); 262 | filter: blur(0.25rem); 263 | filter: blur(0.15rem); 264 | filter: brightness(1); 265 | filter: brightness(0.75); 266 | filter: brightness(0.5); 267 | filter: brightness(0.25); 268 | filter: brightness(0); 269 | filter: brightness(2); 270 | filter: brightness(4); 271 | filter: contrast(0); 272 | filter: contrast(0.25); 273 | filter: contrast(0.5); 274 | filter: contrast(0.75); 275 | filter: contrast(1); 276 | filter: contrast(2); 277 | filter: contrast(4); 278 | filter: grayscale(0); 279 | filter: grayscale(0.25); 280 | filter: grayscale(0.5); 281 | filter: grayscale(0.75); 282 | filter: grayscale(1); 283 | filter: sepia(0); 284 | filter: sepia(0.25); 285 | filter: sepia(0.5); 286 | filter: sepia(0.75); 287 | filter: sepia(1); 288 | filter: hue-rotate(0deg); 289 | filter: hue-rotate(30deg); 290 | filter: hue-rotate(60deg); 291 | filter: hue-rotate(90deg); 292 | filter: hue-rotate(120deg); 293 | filter: hue-rotate(150deg); 294 | filter: hue-rotate(180deg); 295 | filter: hue-rotate(210deg); 296 | filter: hue-rotate(240deg); 297 | filter: hue-rotate(300deg); 298 | filter: hue-rotate(330deg); 299 | filter: invert(0); 300 | filter: invert(1); 301 | filter: opacity(0); 302 | filter: opacity(0.25); 303 | filter: opacity(0.5); 304 | filter: opacity(0.75); 305 | filter: opacity(1); 306 | filter: saturate(0); 307 | filter: saturate(0.25); 308 | filter: saturate(0.5); 309 | filter: saturate(1); 310 | filter: saturate(2); 311 | filter: saturate(4); 312 | filter: drop-shadow(1rem 1rem 1rem steelblue); 313 | */ 314 | filter: invert(1); 315 | } 316 | 317 | .filters-multiple { 318 | filter: blur(0.1rem) hue-rotate(270deg) opacity(0.75) invert(1); 319 | } 320 | 321 | .relative { 322 | position: relative; 323 | } 324 | 325 | .absolute { 326 | position: absolute; 327 | top: 0; 328 | left: 0; 329 | } 330 | 331 | .backdrop-filter, 332 | .backdrop-filter-multiple { 333 | position: absolute; 334 | top: 0; 335 | left: 0; 336 | width: 100%; 337 | height: 100%; 338 | display: flex; 339 | justify-content: center; 340 | align-items: center; 341 | text-align: center; 342 | } 343 | 344 | .backdrop-filter h4 { 345 | border-radius: 1rem; 346 | padding: 2rem; 347 | font-size: 3rem; 348 | color: #fff; 349 | color: #000; 350 | background-color: rgba(255, 102, 255, 0.5); 351 | background-color: rgba(255, 255, 255, 0.5); 352 | /* 353 | backdrop-filter: grayscale(1); 354 | backdrop-filter: sepia(1); 355 | backdrop-filter: opacity(0.25); 356 | backdrop-filter: hue-rotate(180deg); 357 | */ 358 | backdrop-filter: blur(0.5rem); 359 | } 360 | 361 | .backdrop-filter-multiple h4 { 362 | border-radius: 1rem; 363 | padding: 2rem; 364 | font-size: 3rem; 365 | color: #fff; 366 | background-color: rgba(255, 102, 255, 0.5); 367 | backdrop-filter: blur(1rem) hue-rotate(240deg) opacity(0.75) invert(1); 368 | } 369 | 370 | .dark-mode { 371 | background-color: #fff; 372 | color: #000; 373 | filter: invert(1); 374 | } 375 | 376 | .dark-mode img { 377 | filter: invert(1); 378 | } 379 | 380 | .blend-modes img { 381 | /* 382 | mix-blend-mode: normal; 383 | mix-blend-mode: color; 384 | mix-blend-mode: color-dodge; 385 | mix-blend-mode: color-burn; 386 | mix-blend-mode: screen; 387 | mix-blend-mode: multiply; 388 | mix-blend-mode: saturation; 389 | mix-blend-mode: luminosity; 390 | mix-blend-mode: hue; 391 | mix-blend-mode: exclusion; 392 | mix-blend-mode: difference; 393 | mix-blend-mode: hard-light; 394 | mix-blend-mode: soft-light; 395 | mix-blend-mode: lighten; 396 | mix-blend-mode: darken; 397 | mix-blend-mode: overlay; 398 | */ 399 | mix-blend-mode: darken; 400 | } 401 | 402 | .bg-blend-modes { 403 | background-image: url("../assets/puesta-sol.jpg"), 404 | url("../assets/BuenosDias.jpg"); 405 | background-size: cover; 406 | /* 407 | background-blend-mode: normal; 408 | background-blend-mode: color; 409 | background-blend-mode: color-dodge; 410 | background-blend-mode: color-burn; 411 | background-blend-mode: screen; 412 | background-blend-mode: multiply; 413 | background-blend-mode: saturation; 414 | background-blend-mode: luminosity; 415 | background-blend-mode: hue; 416 | background-blend-mode: exclusion; 417 | background-blend-mode: difference; 418 | background-blend-mode: hard-light; 419 | background-blend-mode: soft-light; 420 | background-blend-mode: lighten; 421 | background-blend-mode: darken; 422 | background-blend-mode: overlay; 423 | */ 424 | background-blend-mode: multiply; 425 | } 426 | 427 | .clip-path { 428 | /* 429 | clip-path: circle(); 430 | clip-path: circle(2rem); 431 | clip-path: circle(100px); 432 | clip-path: circle(100px at top); 433 | clip-path: circle(100px at left); 434 | clip-path: circle(100px at right); 435 | clip-path: circle(100px at right); 436 | clip-path: circle(100px at bottom); 437 | clip-path: circle(100px at left bottom); 438 | clip-path: circle(100px at right bottom); 439 | clip-path: circle(100px at left top); 440 | clip-path: circle(100px at right top); 441 | clip-path: circle(100px at 0 0); 442 | clip-path: circle(100px at 30%); 443 | clip-path: circle(100px at 20% 60%); 444 | clip-path: ellipse(); 445 | clip-path: ellipse(1rem 2rem); 446 | clip-path: ellipse(2rem 1rem); 447 | clip-path: ellipse(100px 50px); 448 | clip-path: ellipse(100px 50px at left); 449 | clip-path: ellipse(100px 50px at right); 450 | clip-path: ellipse(100px 50px at top); 451 | clip-path: ellipse(100px 50px at bottom); 452 | clip-path: ellipse(100px 50px at left bottom); 453 | clip-path: ellipse(100px 50px at right bottom); 454 | clip-path: ellipse(100px 50px at left top); 455 | clip-path: ellipse(100px 50px at right top); 456 | clip-path: ellipse(100px 50px at 0 0); 457 | clip-path: ellipse(100px 50px at 300px 50px); 458 | clip-path: ellipse(100px 50px at 18% 60%); 459 | clip-path: inset(2rem); 460 | clip-path: inset(4rem); 461 | clip-path: inset(2rem 1rem); 462 | clip-path: inset(3rem 2rem 1rem); 463 | clip-path: inset(3rem 2rem 1rem 0.5rem); 464 | clip-path: inset(1rem round 1rem); 465 | clip-path: inset(1rem round 1rem 2rem); 466 | clip-path: inset(1rem round 1rem 2rem 3rem); 467 | clip-path: inset(1rem round 1rem 2rem 3rem 4rem); 468 | clip-path: polygon(0 0, 100% 0, 50% 100%); 469 | clip-path: polygon( 470 | 17% 8%, 471 | 51% 10%, 472 | 90% 22%, 473 | 74% 48%, 474 | 82% 87%, 475 | 47% 87%, 476 | 27% 65%, 477 | 11% 38%, 478 | 8% 62% 479 | ); 480 | */ 481 | clip-path: polygon( 482 | 50% 0%, 483 | 61% 35%, 484 | 98% 35%, 485 | 68% 57%, 486 | 79% 91%, 487 | 50% 70%, 488 | 21% 91%, 489 | 32% 57%, 490 | 2% 35%, 491 | 39% 35% 492 | ); 493 | } 494 | 495 | .shapes { 496 | border: thick solid black; 497 | padding: 1rem; 498 | margin: 0 auto 5rem; 499 | max-width: 800px; 500 | } 501 | 502 | .shapes img { 503 | border-radius: 50%; 504 | width: 200px; 505 | height: 200px; 506 | object-fit: cover; 507 | object-position: 0 50%; 508 | } 509 | 510 | .float-left { 511 | float: left; 512 | } 513 | 514 | .float-right { 515 | float: right; 516 | } 517 | 518 | .shape-1 { 519 | margin: 4rem 2rem 4rem 0; 520 | /* shape-outside: circle(); 521 | shape-outside: circle(5rem); 522 | shape-outside: circle(); 523 | shape-outside: ellipse(); 524 | shape-outside: polygon( 525 | 50% 0%, 526 | 61% 35%, 527 | 98% 35%, 528 | 68% 57%, 529 | 79% 91%, 530 | 50% 70%, 531 | 21% 91%, 532 | 32% 57%, 533 | 2% 35%, 534 | 39% 35% 535 | ); */ 536 | shape-outside: circle(); 537 | } 538 | 539 | .shape-2 { 540 | margin: 4rem 0 4rem 2rem; 541 | shape-outside: ellipse(); 542 | } 543 | 544 | .shape-3 { 545 | margin: 2rem 8rem 0 0; 546 | shape-outside: polygon( 547 | 1% 19%, 548 | 25% 4%, 549 | 52% 4%, 550 | 59% 16%, 551 | 69% 37%, 552 | 66% 53%, 553 | 63% 67%, 554 | 72% 77%, 555 | 83% 84%, 556 | 98% 99%, 557 | 1% 99% 558 | ); 559 | } 560 | -------------------------------------------------------------------------------- /02-CursosCSS/fonts-texts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Estilos de Fuentes y Textos 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 |

Estilos de Fuentes y Textos

22 |

Estilos de Fuentes Tipográficas

23 |

24 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni consequuntur explicabo cumque deleniti enim dolores, 25 | atque quis laborum sit adipisci obcaecati doloribus minima neque deserunt tempora beatae ab asperiores nam. 26 |

27 |

28 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit unde esse atque iusto consequatur tempora dolorum, 29 | quia facere dolores architecto quae modi animi, dolore asperiores odio consequuntur neque deleniti eaque? 30 |

31 |

32 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto enim temporibus ad rem voluptatem nemo natus 33 | dolorem dolor impedit a. Aperiam tenetur alias sit deserunt ut iusto consequuntur sunt perferendis. 34 |

35 |

36 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit explicabo, quae quasi, quia odio, consequatur quas 37 | veritatis maxime molestias nulla voluptates ratione numquam nobis. Animi numquam incidunt saepe impedit totam. 38 |

39 |

Estilos para Textos

40 |

41 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat aut nemo labore necessitatibus ea dolorem 42 | molestiae impedit ratione libero assumenda voluptas quos, nostrum aliquam provident esse odit, non, aspernatur 43 | deleniti? 44 | Enlace 45 |

46 |

47 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate architecto eveniet nobis fugit suscipit 48 | quibusdam totam recusandae esse aliquam aut amet quasi similique qui, accusamus atque dolorum voluptate! Dicta, 49 | quidem? 50 |

51 |

52 | import React from "react"; 53 | import Title from "./Title"; 54 | 55 | function App { 56 | return Title; 57 | } 58 |

59 |

60 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, corporis. Soluta aut, error voluptate, eligendi 61 | impedit at atque dignissimos numquam aliquid aspernatur nisi tempora nesciunt itaque! Deserunt doloribus fugiat 62 | sequi? 63 |

64 |

Tipografías de Íconos Vectoriales

65 |

Material Icons

66 |
67 | 68 | info 69 | 70 | 71 | face 72 | 73 | 74 | favorite 75 | 76 |
77 |

Bootstrap Icons

78 |
79 | 80 | 81 | 82 | 83 |
84 |

FontAwesome

85 |
86 | 87 | 88 | 89 |
90 | ☝️ 91 |





























92 | 93 | 94 | -------------------------------------------------------------------------------- /02-CursosCSS/forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Formularios en CSS 9 | 10 | 11 | 12 | 13 |

Formularios en CSS

14 |
15 | 17 | 19 | 20 | 21 |
22 | ☝️ 23 |





























24 | 25 | 26 | -------------------------------------------------------------------------------- /02-CursosCSS/images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Imágenes en CSS 9 | 10 | 11 | 12 | 13 |

Imágenes en CSS

14 |

Imágenes Responsivas

15 | kEnAi y la puesta del sol 16 | kEnAi 17 |

Imágenes con tamaños específicos

18 |
19 | kEnAi y la puesta del sol 20 |

Puesta de Sol

21 |
22 | ☝️ 23 |





























24 | 25 | 26 | -------------------------------------------------------------------------------- /02-CursosCSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Curso de CSS 9 | 10 | 11 | 12 | 21 | 22 | 23 | 24 |
25 |

Aprendiendo CSS

26 |

Cascading Style Sheets - Hojas de Estilo en Cascada

27 |

Temario del Curso

28 | 55 |
56 |
57 |
58 |

Selectores Básicos

59 |

60 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut laboriosam unde soluta repellat neque nobis ipsa 61 | optio deleniti quis magnam praesentium omnis, distinctio animi, vero nostrum ipsum veritatis officia sed. 62 |

63 |

64 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum est fugit deleniti veritatis pariatur repudiandae 65 | suscipit tempore, voluptas maiores adipisci dolorem doloribus quasi delectus molestiae esse minima excepturi nulla 66 | consequatur! 67 |

68 |

69 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea qui, minima hic inventore non doloribus assumenda 70 | sapiente, iure unde nulla illo velit delectus, asperiores accusantium et! Ullam error atque modi? 71 |

72 |

73 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero sed veniam aliquam eligendi. Recusandae quibusdam 74 | quasi veniam numquam, sed praesentium esse, eos nobis, hic ratione illo aut quia. Ab, magni. 75 |

76 |

77 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae odit est unde dolor neque natus, libero, quo 78 | suscipit officia aliquid, minus quis ad deserunt tempora vel quae? Quibusdam, tempore deleniti? 79 |

80 | ☝️ 81 |
82 |
83 |
84 |

Selectores Avanzados

85 |

Selectores de hijos

86 |

Selector de hijos directos

87 | 93 |

Selector de hijos descendientes

94 | 100 |

Selectores de hermanos

101 |

Selector de hermanos (en general)

102 | 108 |

Selector de hermanos adyacente

109 | 115 |

Selectores de Atributos

116 | 127 |

Selector Universal (*)

128 | 134 | ☝️ 135 |
136 |
137 |
138 |

Pseudoclases

139 |
140 | 141 |
142 | 143 |
144 | 145 | 146 |
147 | 153 |

154 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam sint quaerat architecto iste commodi beatae 155 | enim repellendus tenetur, rerum, animi repellat at placeat pariatur odio. Unde autem blanditiis alias hic. 156 |

157 |
    158 |
  1. Mú de Aries
    2. 159 |
  2. Aldebarán de Tauro
    3. 160 |
  3. Saga & Kanon de Géminis
    4. 161 |
  4. Death Mask de Cáncer
    5. 162 |
  5. Aioria de Leo
    6. 163 |
  6. Shaka de Virgo
    7. 164 |
  7. Dohko de Libra
    8. 165 |
  8. Milo de Escorpión
    9. 166 |
  9. Aioros de Sagitario
    10. 167 |
  10. Shura de Capricornio
    11. 168 |
  11. Camus de Acuario
    12. 169 |
  12. Afordita de Piscis
    13. 170 |
171 |
172 |
Esto es una header
173 |

Esto es un p

174 |
Esto es una div
175 |

Esto es un p

176 |
Esto es una section
177 |

Esto es un p

178 |
Esto es un div
179 |

Esto es un p

180 |
Esto es un footer
181 |
182 | ☝️ 183 |
184 |
185 |
186 |

Pseudoelementos

187 |

188 | Bandai Myth Cloth Ex Saga de Géminis 500 189 |

190 |

191 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem unde quam necessitatibus amet facere, et ab 192 | asperiores cum at, harum earum neque hic. Reprehenderit ea voluptatum saepe adipisci numquam sapiente! 193 |

194 | 195 |
196 | ☝️ 197 |
198 |
199 |
200 |

Agrupar Selectores

201 |
202 | 203 | 204 | 205 | 206 |
207 | ☝️ 208 |
209 |
210 |
211 |

El Algoritmo de CSS

212 |
    213 |
  1. La Cáscada
    2. 214 |
  2. La Especificidad
    3. 215 |
  3. La Herencia
    4. 216 |
217 |
218 | Sé tolerante con los demás y estricto contigo mismo - Marco Aurelio 219 |
220 | ☝️ 221 |
222 |
223 |

Reseteo y Normalización de Estilos

224 | ☝️ 225 |
226 |
227 |
228 |

Prefijos de los Navegadores

229 | 234 | ☝️ 235 |
236 |
237 | ☝️ 238 |





























239 | 240 | 241 | -------------------------------------------------------------------------------- /02-CursosCSS/lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Listas en CSS 9 | 10 | 11 | 12 | 13 |

Listas en CSS

14 | 20 | 28 | 34 |

Texto en Columnas

35 |
    36 |
  1. Mú de Aries
    2. 37 |
  2. Aldebarán de Tauro
    3. 38 |
  3. Saga & Kanon de Géminis
    4. 39 |
  4. Death Mask de Cáncer
    5. 40 |
  5. Aioria de Leo
    6. 41 |
  6. Shaka de Virgo
    7. 42 |
  7. Dohko de Libra
    8. 43 |
  8. Milo de Escorpión
    9. 44 |
  9. Aioros de Sagitario
    10. 45 |
  10. Shura de Capricornio
    11. 46 |
  11. Camus de Acuario
    12. 47 |
  12. Afordita de Piscis
    13. 48 |
49 |
50 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quaerat dolorum quibusdam sint repellendus 51 | voluptas quia inventore facilis at sed eaque expedita aut tenetur harum omnis, debitis sunt ut animi.

52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quaerat dolorum quibusdam sint repellendus 53 | voluptas quia inventore facilis at sed eaque expedita aut tenetur harum omnis, debitis sunt ut animi.

54 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quaerat dolorum quibusdam sint repellendus 55 | voluptas quia inventore facilis at sed eaque expedita aut tenetur harum omnis, debitis sunt ut animi.

56 |
57 | ☝️ 58 |





























59 | 60 | 61 | -------------------------------------------------------------------------------- /02-CursosCSS/motion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Movimiento en CSS 9 | 10 | 11 | 12 | 13 |

Movimiento en CSS

14 |
15 |
16 |

Transiciones

17 |
18 |
19 | Puesta de Sol 20 |
21 |
22 |
23 |
24 |

Transformaciones

25 |

Transformaciones en 2D

26 |
27 | Puesta de Sol 28 |
29 |

Transformaciones en 3D

30 |
31 | Puesta de Sol 32 |
33 |

Origen de la Transformación

34 |
35 | Puesta de Sol 36 |
37 |

Flip Cards

38 |
39 |
40 | Puesta de Sol 41 |
42 |
43 | Buenos Días 44 |
45 |
46 |
47 |
48 | Puesta de Sol 49 |
50 |
51 | Buenos Días 52 |
53 |
54 |
55 |
56 |
57 |

Animaciones

58 |
59 | Puesta de Sol 60 |
61 |
62 | Puesta de Sol 63 |
64 |
65 | Puesta de Sol 66 |
67 |
68 |
69 |
70 |

Ejemplos de efectos de Moviemiento en CSS

71 |

FadeIn / FadeOut

72 |
🧔🏻
73 |
🧔🏻
74 |

Sacudir

75 |
☕
76 |

Pulsaciones

77 |
❤️
78 |
🦊 kEnAi 🦊
79 |

Dibujando y animando con CSS

80 |

Corazón

81 |
Eres el CSS de mi HTML
82 |
83 |

Spinner / Loader

84 | 85 |

Botones Animados

86 | 87 | 88 | 89 | 90 |

Menú de Pestañas (Tabs)

91 | 102 |

Menu Off Canvas

103 | 104 | 105 | 114 |

Ventana Modal

115 | Abrir Modal 116 | 134 |

Star Wars Intro

135 |
136 |
137 |

Episode III

138 |

REVENGE OF THE SITH

139 |

140 | War! The Republic is crumbling 141 | under attacks by the ruthless 142 | Sith Lord, Count Dooku. 143 | There are heroes on both sides. 144 | Evil is everywhere. 145 |

146 |

147 | In a stunning move, the 148 | fiendish droid leader, General 149 | Grievous, has swept into the 150 | Republic capital and kidnapped 151 | Chancellor Palpatine, leader of 152 | the Galactic Senate. 153 |

154 |

155 | As the Separatist Droid Army 156 | attempts to flee the besieged 157 | capital with their valuable 158 | hostage, two Jedi Knights lead a 159 | desperate mission to rescue the 160 | captive Chancellor.... 161 |

162 |
163 |
164 |
165 | ☝️ 166 |





























167 | 168 | 169 | -------------------------------------------------------------------------------- /02-CursosCSS/positions-examples.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ejercicios de Posicionamiento CSS 9 | 10 | 11 | 12 | 13 |
14 |
15 |
Contenido de la Cabecera
16 |
17 |

Ejercicios de Posicionamiento CSS

18 |

Cabecera Fija VS Cabecera Pegajosa

19 |

Efecto sticky tipo slides

20 |

Efecto de Ventana Modal / Menú Móvil

21 |

Márgenes Negativos

22 |
23 |
24 |

Título de la Sección

25 |
26 |

27 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 28 | ipsum neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 29 | officiis, quidem eos! 30 |

31 |

32 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 33 | ipsum 34 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 35 | officiis, 36 | quidem eos! 37 |

38 |

39 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 40 | ipsum 41 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 42 | officiis, 43 | quidem eos! 44 |

45 |

46 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 47 | ipsum 48 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 49 | officiis, 50 | quidem eos! 51 |

52 |

53 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 54 | ipsum 55 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 56 | officiis, 57 | quidem eos! 58 |

59 |

60 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 61 | ipsum 62 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 63 | officiis, 64 | quidem eos! 65 |

66 |

67 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 68 | ipsum 69 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 70 | officiis, 71 | quidem eos! 72 |

73 |

74 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 75 | ipsum 76 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 77 | officiis, 78 | quidem eos! 79 |

80 |

81 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 82 | ipsum 83 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 84 | officiis, 85 | quidem eos! 86 |

87 |

88 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 89 | ipsum 90 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 91 | officiis, 92 | quidem eos! 93 |

94 |
95 |
96 |
97 |

Título de la Sección

98 |
99 |

100 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 101 | ipsum 102 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 103 | officiis, 104 | quidem eos! 105 |

106 |

107 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 108 | ipsum 109 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 110 | officiis, 111 | quidem eos! 112 |

113 |

114 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 115 | ipsum 116 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 117 | officiis, 118 | quidem eos! 119 |

120 |

121 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 122 | ipsum 123 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 124 | officiis, 125 | quidem eos! 126 |

127 |

128 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 129 | ipsum 130 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 131 | officiis, 132 | quidem eos! 133 |

134 |

135 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 136 | ipsum 137 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 138 | officiis, 139 | quidem eos! 140 |

141 |

142 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 143 | ipsum 144 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 145 | officiis, 146 | quidem eos! 147 |

148 |

149 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 150 | ipsum 151 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 152 | officiis, 153 | quidem eos! 154 |

155 |

156 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 157 | ipsum 158 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 159 | officiis, 160 | quidem eos! 161 |

162 |

163 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 164 | ipsum 165 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 166 | officiis, 167 | quidem eos! 168 |

169 |
170 |
171 |
172 |

Título de la Sección

173 |
174 |

175 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 176 | ipsum 177 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 178 | officiis, 179 | quidem eos! 180 |

181 |

182 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 183 | ipsum 184 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 185 | officiis, 186 | quidem eos! 187 |

188 |

189 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 190 | ipsum 191 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 192 | officiis, 193 | quidem eos! 194 |

195 |

196 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 197 | ipsum 198 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 199 | officiis, 200 | quidem eos! 201 |

202 |

203 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 204 | ipsum 205 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 206 | officiis, 207 | quidem eos! 208 |

209 |

210 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 211 | ipsum 212 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 213 | officiis, 214 | quidem eos! 215 |

216 |

217 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 218 | ipsum 219 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 220 | officiis, 221 | quidem eos! 222 |

223 |

224 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 225 | ipsum 226 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 227 | officiis, 228 | quidem eos! 229 |

230 |

231 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 232 | ipsum 233 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 234 | officiis, 235 | quidem eos! 236 |

237 |

238 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 239 | ipsum 240 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 241 | officiis, 242 | quidem eos! 243 |

244 |
245 |
246 |
247 |

Título de la Sección

248 |
249 |

250 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 251 | ipsum 252 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 253 | officiis, 254 | quidem eos! 255 |

256 |

257 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 258 | ipsum 259 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 260 | officiis, 261 | quidem eos! 262 |

263 |

264 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 265 | ipsum 266 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 267 | officiis, 268 | quidem eos! 269 |

270 |

271 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 272 | ipsum 273 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 274 | officiis, 275 | quidem eos! 276 |

277 |

278 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 279 | ipsum 280 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 281 | officiis, 282 | quidem eos! 283 |

284 |

285 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 286 | ipsum 287 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 288 | officiis, 289 | quidem eos! 290 |

291 |

292 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 293 | ipsum 294 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 295 | officiis, 296 | quidem eos! 297 |

298 |

299 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 300 | ipsum 301 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 302 | officiis, 303 | quidem eos! 304 |

305 |

306 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 307 | ipsum 308 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 309 | officiis, 310 | quidem eos! 311 |

312 |

313 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, mollitia blanditiis. Provident totam 314 | ipsum 315 | neque eum, cumque accusantium quam nemo dignissimos obcaecati expedita esse dolorum aperiam voluptates 316 | officiis, 317 | quidem eos! 318 |

319 |
320 |
321 | 346 | Abrir Modal 347 |
348 |
349 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi ratione explicabo ipsam, commodi dolorem veniam magni 350 | repellat maxime maiores laborum quidem, voluptate accusantium nihil consectetur quod dolor id sit quis. 351 |
352 | ☝️ 353 |





























354 |





























355 | 356 | 357 | -------------------------------------------------------------------------------- /02-CursosCSS/positions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Posicionamiento en CSS 9 | 10 | 11 | 12 | 13 |

Posicionamiento en CSS

14 |
Caja Estática
15 |
Caja Relativa
16 |
Caja Absoluta
17 |
18 |
19 | Caja Absoluta con Ancestro Relativo 20 |
21 |
22 |
Caja Fija
23 |
Caja Pegajosa
24 |
25 |
Caja Pegajosa como hijo
26 |
27 |
Probando z-index caja 1
28 |
Probando z-index caja 2
29 |
30 |
Hijo z-index
31 |
32 | ☝️ 33 |





























34 |





























35 | 36 | 37 | -------------------------------------------------------------------------------- /02-CursosCSS/scroll-one-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Efectos con Scroll (Sitio One Page) 9 | 10 | 11 | 12 | 13 |
14 |

Efectos con Scroll (Sitio One Page)

15 | 23 |
24 |
25 |

Sección 1

26 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus pariatur est officiis, magnam sapiente qui 27 | tempora possimus optio repudiandae consectetur facere quam autem molestias recusandae natus quaerat sit tempore! 28 | Quisquam?

29 | Puesta de Sol 30 |
31 |
32 |

Sección 2

33 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus pariatur est officiis, magnam sapiente qui 34 | tempora possimus optio repudiandae consectetur facere quam autem molestias recusandae natus quaerat sit tempore! 35 | Quisquam?

36 | Puesta de Sol 37 |
38 |
39 |

Sección 3

40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus pariatur est officiis, magnam sapiente qui 41 | tempora possimus optio repudiandae consectetur facere quam autem molestias recusandae natus quaerat sit tempore! 42 | Quisquam?

43 | Puesta de Sol 44 |
45 |
46 |

Sección 4

47 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus pariatur est officiis, magnam sapiente qui 48 | tempora possimus optio repudiandae consectetur facere quam autem molestias recusandae natus quaerat sit tempore! 49 | Quisquam?

50 | Puesta de Sol 51 |
52 |
53 |

Sección 5

54 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus pariatur est officiis, magnam sapiente qui 55 | tempora possimus optio repudiandae consectetur facere quam autem molestias recusandae natus quaerat sit tempore! 56 | Quisquam?

57 | Puesta de Sol 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /02-CursosCSS/scroll-snap-slides.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ajuste del Scroll (Slides) 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |

Ajuste del Scroll (Slides)

17 |
18 |
19 |
20 |
21 |

Slide 1

22 |
23 |
24 |
25 |
26 |

Slide 2

27 |
28 |
29 |
30 |
31 |

Slide 3

32 |
33 |
34 |
35 |
36 |

Slide 4

37 |
38 |
39 |
40 |
41 |

Slide 5

42 |
43 |
44 |
45 |
46 | ☝️ 47 |
48 |
49 |
50 |
51 |

Slide 2

52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur velit maxime 53 | aliquam natus numquam fugit 54 | blanditiis, officiis eveniet, sequi doloribus architecto aliquid magnam recusandae. Itaque, laboriosam. Autem 55 | laudantium pariatur quas.

56 |
57 |
58 |
59 |
60 |

Slide 3

61 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio possimus debitis totam 62 | voluptates facilis, 63 | voluptate ipsam doloribus corporis, nemo, soluta magni optio excepturi! Sed quidem nam tenetur adipisci, alias 64 | quod!

65 |
66 |
67 |
68 |
69 |

Slide 4

70 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore praesentium facere numquam deserunt impedit 71 | animi inventore id eos. Rerum laboriosam sunt quam ipsam aliquam id nihil cum commodi nisi nobis!

72 |
73 |
74 |
75 |
76 |

Slide 5

77 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas possimus ipsam magnam magni provident cum 78 | necessitatibus quo accusamus, doloremque est quos tenetur? Error exercitationem facere cumque velit, eius enim 79 | placeat.

80 |
81 |
82 |
83 | 84 | 85 | -------------------------------------------------------------------------------- /02-CursosCSS/tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tablas en CSS 9 | 10 | 11 | 12 | 13 |

Tablas en CSS

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
ABC
123
456
79
36 | ☝️ 37 |





























38 | 39 | 40 | -------------------------------------------------------------------------------- /02-CursosCSS/units.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Unidades de Medida en CSS 9 | 10 | 11 | 12 | 13 |

Unidades de Medida en CSS

14 |

Pixeles

15 |
16 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam voluptate sed porro dicta atque in dolor a doloremque, 17 | corporis ipsum numquam possimus ratione id modi dolores nostrum earum itaque cupiditate. 18 |
19 |

EMs

20 |
21 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam voluptate sed porro dicta atque in dolor a doloremque, 22 | corporis ipsum numquam possimus ratione id modi dolores nostrum earum itaque cupiditate. 23 |
24 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium quasi voluptatibus ea tempore consectetur 25 | ratione alias qui animi, esse quod possimus doloribus odio eaque voluptates facere nemo omnis dignissimos in! 26 |
27 |
28 |

REMs (Root em)

29 |
30 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam voluptate sed porro dicta atque in dolor a doloremque, 31 | corporis ipsum numquam possimus ratione id modi dolores nostrum earum itaque cupiditate. 32 |
33 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium quasi voluptatibus ea tempore consectetur 34 | ratione alias qui animi, esse quod possimus doloribus odio eaque voluptates facere nemo omnis dignissimos in! 35 |
36 |
37 |

EXs

38 |
39 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam voluptate sed porro dicta atque in dolor a doloremque, 40 | corporis ipsum numquam possimus ratione id modi dolores nostrum earum itaque cupiditate. 41 |
42 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium quasi voluptatibus ea tempore consectetur 43 | ratione alias qui animi, esse quod possimus doloribus odio eaque voluptates facere nemo omnis dignissimos in! 44 |
45 |
46 |

CHs

47 |
48 | 1234567890 49 |
50 |
51 | qwertyasdfg 52 |
53 |
54 | 12we.,6y{}B 55 |
56 |

Porcentajes (%)

57 |
58 | Caja de Bloque 59 |
60 |
61 |
62 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel voluptates distinctio quo numquam amet 63 | laudantium, consequatur ratione dolorum dicta rem omnis assumenda qui provident vitae modi illum magnam quos. 64 |
65 |
66 | 69 |

Viewport Units

70 |
71 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex explicabo sint ipsam tempore fugiat distinctio, iusto 72 | repellat pariatur porro facilis! Ex deserunt aut non consequatur, accusamus modi odio laborum expedita. 73 |
74 |
75 |
76 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex explicabo sint ipsam tempore fugiat distinctio, iusto 77 | repellat pariatur porro facilis! Ex deserunt aut non consequatur, accusamus modi odio laborum expedita. 78 |
79 |
80 |
81 | Caja vmax 82 |
83 |
84 | Caja vmin 85 |
86 | ☝️ 87 |





























88 | 89 | 90 | -------------------------------------------------------------------------------- /02-CursosCSS/variables-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Variables y Funciones en CSS 9 | 10 | 11 | 12 | 13 |

Variables y Funciones en CSS

14 |

Custom Properties (Variables CSS)

15 |
16 |
17 |
18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex ullam id deserunt minima fugit eligendi corrupti, 19 | quia inventore iure suscipit. Quam voluptatem obcaecati debitis voluptate, id ex reiciendis corrupti. 20 |
21 |
22 |
23 |

Funciones en CSS

24 | 31 |
32 | 1234567890 33 |
34 |
35 | Funciones min() & max() 36 |
37 | ☝️ 38 |





























39 | 40 | 41 | -------------------------------------------------------------------------------- /02-CursosCSS/visual-effects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Efectos Visuales en CSS 9 | 10 | 11 | 12 | 13 |

Efectos Visuales en CSS

14 |
15 |

Sombras

16 |
17 |

Sombras

18 |
19 |
20 |

Sombras

21 |
22 |
23 | Niño y Árbol 24 |
25 |
26 |

Degradados

27 |

Lineal

28 |
29 |

Radial

30 |
31 |

Cónico

32 |
33 |

Repetir Degradados

34 |
35 |
36 |
37 |

Gráficas con Degradados

38 |
39 |
40 |
41 |

Filtros

42 |

Filtros

43 |
44 | Puesta de Sol 45 |
46 |

Filtros Múltiples

47 |
48 | Puesta de Sol 49 |
50 |

Filtros a Fondos

51 |
52 | Puesta de Sol 53 |
54 |

Puesta de Sol

55 |
56 |
57 |

Filtros Múltiples a Fondos

58 |
59 | Puesta de Sol 60 |
61 |

Puesta de Sol

62 |
63 |
64 |

Modo Dark/Light con Filtros

65 |
66 | Puesta de Sol 67 |
68 |
69 | kEnAi 70 |
71 |
72 |

Modos de Mezcla

73 |

Sobre imágenes (img)

74 |
75 | Puesta de Sol 76 | Buenos Días 77 |
78 |

Sobre imágenes de fondo (background-image)

79 |
80 |
81 |

Máscaras

82 |
83 | Puesta de Sol 84 |
85 |
86 |

Formas

87 |
88 |

Ejemplos de Formas y siluetas entre textos e imágenes

89 | Puesta de Sol 90 |

91 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eveniet inventore atque voluptatum corporis libero 92 | voluptates, at eaque ipsa possimus! Esse ex enim qui vero quia suscipit deserunt, beatae fugiat. 93 |

94 |

95 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea obcaecati eius nisi cupiditate. Minus quia odio 96 | nesciunt aut facilis iure magni, nihil, est, non eius error repudiandae quae dolorum at? 97 |

98 |

99 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus assumenda quod sequi odit vel exercitationem, 100 | vitae id itaque fugiat quibusdam aspernatur illum officia nostrum est et similique recusandae! Dolor, officia? 101 |

102 |

103 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga quas provident aliquid quis illo necessitatibus 104 | laborum culpa. Nihil dolore ex velit sequi fuga! Suscipit laborum et ipsa odit sapiente vero. 105 |

106 | Puesta de Sol 107 |

108 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eveniet inventore atque voluptatum corporis libero 109 | voluptates, at eaque ipsa possimus! Esse ex enim qui vero quia suscipit deserunt, beatae fugiat. 110 |

111 |

112 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea obcaecati eius nisi cupiditate. Minus quia odio 113 | nesciunt 114 | aut facilis iure magni, nihil, est, non eius error repudiandae quae dolorum at? 115 |

116 |

117 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus assumenda quod sequi odit vel exercitationem, 118 | vitae 119 | id itaque fugiat quibusdam aspernatur illum officia nostrum est et similique recusandae! Dolor, officia? 120 |

121 |

122 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga quas provident aliquid quis illo necessitatibus 123 | laborum 124 | culpa. Nihil dolore ex velit sequi fuga! Suscipit laborum et ipsa odit sapiente vero. 125 |

126 | Puesta de Sol 127 |

128 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eveniet inventore atque voluptatum corporis libero 129 | voluptates, at eaque ipsa possimus! Esse ex enim qui vero quia suscipit deserunt, beatae fugiat. 130 |

131 |

132 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea obcaecati eius nisi cupiditate. Minus quia odio 133 | nesciunt 134 | aut facilis iure magni, nihil, est, non eius error repudiandae quae dolorum at? 135 |

136 |

137 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus assumenda quod sequi odit vel exercitationem, 138 | vitae 139 | id itaque fugiat quibusdam aspernatur illum officia nostrum est et similique recusandae! Dolor, officia? 140 |

141 |

142 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga quas provident aliquid quis illo necessitatibus 143 | laborum 144 | culpa. Nihil dolore ex velit sequi fuga! Suscipit laborum et ipsa odit sapiente vero. 145 |

146 |
147 | ☝️ 148 |





























149 | 150 | 151 | -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/assets/kenai.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/assets/kenai.mp4 -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/css/grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | Grids 3 | 4 | 12 / 1 = 12 5 | 12 / 2 = 6 6 | 12 / 3 = 4 7 | 12 / 4 = 3 8 | 12 / 6 = 2 9 | 12 / 12 = 1 10 | 11 | 5 + 7 = 12 12 | 2 + 5 + 5 = 12 13 | 4 + 2 + 3 +3 =12 14 | 15 | 12 ----> 100% 16 | ?col ----> ???% 17 | 18 | Grid System Aretsanal con Flexbox a 12 columnas 19 | 20 | Tamaños (Mediaqueries) 21 | xs - extrasmall - 0 - 479px - 480res 22 | sm - small - 480px (30em) - 767px - 800res 23 | md - medium - 768px (48em) - 991px - 1024res 24 | lg - large - 992px (62em) - 1199px - 1280res 25 | xl - extralarge -+1200px (75em) - >1281res 26 | */ 27 | 28 | html { 29 | box-sizing: border-box; 30 | font-size: 16px; 31 | } 32 | 33 | *, 34 | *::after, 35 | *::before { 36 | box-sizing: inherit; 37 | } 38 | 39 | .row { 40 | display: flex; 41 | flex-wrap: wrap; 42 | } 43 | 44 | .row > [class^="col"] { 45 | border: thin solid gray; 46 | padding: 1rem; 47 | } 48 | 49 | .col-1 { 50 | width: 8.333333333333333%; 51 | } 52 | 53 | .col-2 { 54 | width: 16.66666666666667%; 55 | } 56 | 57 | .col-3 { 58 | width: 25%; 59 | } 60 | 61 | .col-4 { 62 | width: 33.33333333333333%; 63 | } 64 | 65 | .col-5 { 66 | width: 41.66666666666667%; 67 | } 68 | 69 | .col-6 { 70 | width: 50%; 71 | } 72 | 73 | .col-7 { 74 | width: 58.33333333333333%; 75 | } 76 | 77 | .col-8 { 78 | width: 66.66666666666667%; 79 | } 80 | 81 | .col-9 { 82 | width: 75%; 83 | } 84 | 85 | .col-10 { 86 | width: 83.33333333333333%; 87 | } 88 | 89 | .col-11 { 90 | width: 91.66666666666667%; 91 | } 92 | 93 | .col-12 { 94 | width: 100%; 95 | } 96 | 97 | @media screen and (min-width: 30em) { 98 | .col-sm-1 { 99 | width: 8.333333333333333%; 100 | } 101 | 102 | .col-sm-2 { 103 | width: 16.66666666666667%; 104 | } 105 | 106 | .col-sm-3 { 107 | width: 25%; 108 | } 109 | 110 | .col-sm-4 { 111 | width: 33.33333333333333%; 112 | } 113 | 114 | .col-sm-5 { 115 | width: 41.66666666666667%; 116 | } 117 | 118 | .col-sm-6 { 119 | width: 50%; 120 | } 121 | 122 | .col-sm-7 { 123 | width: 58.33333333333333%; 124 | } 125 | 126 | .col-sm-8 { 127 | width: 66.66666666666667%; 128 | } 129 | 130 | .col-sm-9 { 131 | width: 75%; 132 | } 133 | 134 | .col-sm-10 { 135 | width: 83.33333333333333%; 136 | } 137 | 138 | .col-sm-11 { 139 | width: 91.66666666666667%; 140 | } 141 | 142 | .col-sm-12 { 143 | width: 100%; 144 | } 145 | } 146 | 147 | @media screen and (min-width: 48em) { 148 | .col-md-1 { 149 | width: 8.333333333333333%; 150 | } 151 | 152 | .col-md-2 { 153 | width: 16.66666666666667%; 154 | } 155 | 156 | .col-md-3 { 157 | width: 25%; 158 | } 159 | 160 | .col-md-4 { 161 | width: 33.33333333333333%; 162 | } 163 | 164 | .col-md-5 { 165 | width: 41.66666666666667%; 166 | } 167 | 168 | .col-md-6 { 169 | width: 50%; 170 | } 171 | 172 | .col-md-7 { 173 | width: 58.33333333333333%; 174 | } 175 | 176 | .col-md-8 { 177 | width: 66.66666666666667%; 178 | } 179 | 180 | .col-md-9 { 181 | width: 75%; 182 | } 183 | 184 | .col-md-10 { 185 | width: 83.33333333333333%; 186 | } 187 | 188 | .col-md-11 { 189 | width: 91.66666666666667%; 190 | } 191 | 192 | .col-md-12 { 193 | width: 100%; 194 | } 195 | } 196 | 197 | @media screen and (min-width: 62em) { 198 | .col-lg-1 { 199 | width: 8.333333333333333%; 200 | } 201 | 202 | .col-lg-2 { 203 | width: 16.66666666666667%; 204 | } 205 | 206 | .col-lg-3 { 207 | width: 25%; 208 | } 209 | 210 | .col-lg-4 { 211 | width: 33.33333333333333%; 212 | } 213 | 214 | .col-lg-5 { 215 | width: 41.66666666666667%; 216 | } 217 | 218 | .col-lg-6 { 219 | width: 50%; 220 | } 221 | 222 | .col-lg-7 { 223 | width: 58.33333333333333%; 224 | } 225 | 226 | .col-lg-8 { 227 | width: 66.66666666666667%; 228 | } 229 | 230 | .col-lg-9 { 231 | width: 75%; 232 | } 233 | 234 | .col-lg-10 { 235 | width: 83.33333333333333%; 236 | } 237 | 238 | .col-lg-11 { 239 | width: 91.66666666666667%; 240 | } 241 | 242 | .col-lg-12 { 243 | width: 100%; 244 | } 245 | } 246 | 247 | @media screen and (min-width: 75em) { 248 | .col-xl-1 { 249 | width: 8.333333333333333%; 250 | } 251 | 252 | .col-xl-2 { 253 | width: 16.66666666666667%; 254 | } 255 | 256 | .col-xl-3 { 257 | width: 25%; 258 | } 259 | 260 | .col-xl-4 { 261 | width: 33.33333333333333%; 262 | } 263 | 264 | .col-xl-5 { 265 | width: 41.66666666666667%; 266 | } 267 | 268 | .col-xl-6 { 269 | width: 50%; 270 | } 271 | 272 | .col-xl-7 { 273 | width: 58.33333333333333%; 274 | } 275 | 276 | .col-xl-8 { 277 | width: 66.66666666666667%; 278 | } 279 | 280 | .col-xl-9 { 281 | width: 75%; 282 | } 283 | 284 | .col-xl-10 { 285 | width: 83.33333333333333%; 286 | } 287 | 288 | .col-xl-11 { 289 | width: 91.66666666666667%; 290 | } 291 | 292 | .col-xl-12 { 293 | width: 100%; 294 | } 295 | } 296 | -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/css/init.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --html-color: #e44d26; 3 | --css-color: #1572b6; 4 | } 5 | 6 | html { 7 | box-sizing: border-box; 8 | font-size: 16px; 9 | font-family: sans-serif; 10 | line-height: 1.6; 11 | scroll-behavior: smooth; 12 | } 13 | 14 | *, 15 | *::after, 16 | *::before { 17 | box-sizing: inherit; 18 | } 19 | 20 | a { 21 | color: var(--css-color); 22 | transition: color 0.3s ease-out, opacity 0.3s ease-in; 23 | } 24 | 25 | a:hover { 26 | color: var(--html-color); 27 | opacity: 0.75; 28 | } 29 | 30 | hr { 31 | border: thin solid var(--html-color); 32 | margin: 20vh auto; 33 | width: 50%; 34 | } 35 | 36 | table { 37 | width: 100%; 38 | border-collapse: collapse; 39 | } 40 | 41 | th, 42 | td { 43 | border: thin solid grey; 44 | padding: 0.5rem; 45 | } 46 | 47 | [id] { 48 | scroll-margin-top: 2ex; 49 | } 50 | 51 | .top-btn { 52 | position: fixed; 53 | bottom: 1.5rem; 54 | right: 1.5rem; 55 | display: inline-block; 56 | width: 3rem; 57 | height: 3rem; 58 | font-size: 3rem; 59 | text-decoration: none; 60 | } 61 | 62 | .top-btn svg { 63 | width: inherit; 64 | height: inherit; 65 | font-size: inherit; 66 | } 67 | 68 | .container { 69 | max-width: 1200px; 70 | margin-left: auto; 71 | margin-right: auto; 72 | } 73 | 74 | .full-screen { 75 | width: 100%; 76 | min-height: 100vh; 77 | } 78 | 79 | .w-75 { 80 | max-width: 75%; 81 | } 82 | 83 | @media screen and (min-width: 768px) { 84 | .grid-1-2 { 85 | display: grid; 86 | grid-template-columns: 50% 50%; 87 | } 88 | 89 | .grid-1-2 > * { 90 | padding: 1rem; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/css/print.css: -------------------------------------------------------------------------------- 1 | @page { 2 | size: A4; 3 | } 4 | 5 | body { 6 | font-size: 12pt; 7 | font-family: serif; 8 | background-color: #000; 9 | color: #fff; 10 | } 11 | -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/css/style.css: -------------------------------------------------------------------------------- 1 | [class^="box"] { 2 | margin: 3rem auto; 3 | background-color: orangered; 4 | } 5 | 6 | .box { 7 | width: 300px; 8 | height: 300px; 9 | } 10 | 11 | .box-flexible { 12 | width: 50%; 13 | height: 20vh; 14 | } 15 | 16 | .box-flexible-2 { 17 | max-width: 960px; 18 | min-width: 280px; 19 | max-height: 480px; 20 | min-height: 280px; 21 | } 22 | 23 | .box-flexible-3 { 24 | max-width: 960px; 25 | min-width: 280px; 26 | max-height: 480px; 27 | min-height: 280px; 28 | width: 300px; 29 | height: 300px; 30 | } 31 | 32 | .box-flexible-4 { 33 | max-width: 960px; 34 | min-width: 280px; 35 | max-height: 480px; 36 | min-height: 280px; 37 | width: 50%; 38 | height: 20vh; 39 | } 40 | 41 | img, 42 | iframe, 43 | video { 44 | max-width: 100%; 45 | height: auto; 46 | } 47 | 48 | .responsive-media { 49 | position: relative; 50 | max-width: 100%; 51 | height: 0; 52 | /* 53 | Formato widescreen 16:9 54 | 16 ---> 100% 55 | 9 ---> 56.25% 56 | */ 57 | padding-bottom: 56.25%; 58 | } 59 | 60 | .responsive-media > * { 61 | position: absolute; 62 | width: 100%; 63 | height: 100%; 64 | } 65 | 66 | .aspect-ratio-16-9 { 67 | background-color: rebeccapurple; 68 | aspect-ratio: 16 / 9; 69 | } 70 | 71 | .aspect-ratio-1-1 { 72 | aspect-ratio: 1 / 1; 73 | } 74 | 75 | @media print { 76 | @page { 77 | size: A5 landscape; 78 | } 79 | 80 | body { 81 | font-size: 10pt; 82 | font-family: sans-serif; 83 | background-color: #000; 84 | color: greenyellow; 85 | } 86 | } 87 | 88 | @media screen and (prefers-reduced-motion: reduce) { 89 | html { 90 | scroll-behavior: auto; 91 | scroll-behavior: smooth; 92 | } 93 | } 94 | 95 | @media screen and (prefers-reduced-motion: no-preference) { 96 | html { 97 | scroll-behavior: auto; 98 | scroll-behavior: smooth; 99 | } 100 | } 101 | 102 | @media screen and (prefers-color-scheme: dark) { 103 | html { 104 | background-color: black; 105 | color: teal; 106 | } 107 | } 108 | 109 | @media screen and (prefers-color-scheme: light) { 110 | html { 111 | background-color: white; 112 | color: darkblue; 113 | } 114 | } 115 | 116 | @media screen and (prefers-color-scheme: no-preference) { 117 | html { 118 | background-color: white; 119 | color: darkred; 120 | } 121 | } 122 | 123 | @media screen and (prefers-color-scheme: dark) { 124 | html { 125 | background-color: white; 126 | color: black; 127 | } 128 | } 129 | 130 | /* En Mobile First se usa min-width que significa lo mínimo, del valor que des, hacia arriba */ 131 | @media screen and (min-width: 480px) { 132 | html { 133 | background-color: lightpink; 134 | } 135 | } 136 | 137 | /* En Desktop First se usa max-width que significa lo máximo, del valor que des, hacia abajo */ 138 | @media screen and (max-width: 1024px) { 139 | html { 140 | background-color: lightgreen; 141 | } 142 | } 143 | 144 | @media screen and (min-width: 1200px) { 145 | html { 146 | background-color: white; 147 | } 148 | } 149 | 150 | @supports (grid-template-columns: subgrid) { 151 | html { 152 | background-color: black; 153 | color: greenyellow; 154 | } 155 | } 156 | 157 | @supports not (grid-template-columns: subgrid) { 158 | html { 159 | background-color: darkolivegreen; 160 | color: white; 161 | } 162 | } 163 | 164 | @supports (display: grid) and (grid-template-columns: subgrid) { 165 | html { 166 | background-color: darkslateblue; 167 | color: lightseagreen; 168 | } 169 | } 170 | 171 | @supports (display: grid) or (grid-template-columns: subgrid) { 172 | html { 173 | background-color: white; 174 | color: black; 175 | } 176 | } 177 | 178 | .card { 179 | border: thin solid #000; 180 | margin-left: auto; 181 | margin-right: auto; 182 | max-width: 800px; 183 | contain: layout inline-size style; 184 | } 185 | 186 | .card-image { 187 | max-width: 100%; 188 | height: auto; 189 | object-fit: cover; 190 | object-position: 0 50%; 191 | } 192 | 193 | .card-content { 194 | padding: 1rem; 195 | } 196 | 197 | /* chrome://flags/ */ 198 | @container (min-width: 600px) { 199 | .card-container { 200 | display: flex; 201 | } 202 | 203 | .card-container > * { 204 | width: 50%; 205 | flex-basis: 50%; 206 | } 207 | } 208 | 209 | .fluid-grid { 210 | display: grid; 211 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 212 | } 213 | 214 | .fluid-item { 215 | border: thin solid gray; 216 | padding: 1rem; 217 | } 218 | 219 | /* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ 220 | 221 | :root { 222 | --step--2: clamp(0.91rem, 0.89rem + 0.1vw, 0.96rem); 223 | --step--1: clamp(1.09rem, 1.05rem + 0.21vw, 1.2rem); 224 | --step-0: clamp(1.31rem, 1.24rem + 0.37vw, 1.5rem); 225 | --step-1: clamp(1.58rem, 1.46rem + 0.59vw, 1.88rem); 226 | --step-2: clamp(1.89rem, 1.71rem + 0.89vw, 2.34rem); 227 | --step-3: clamp(2.27rem, 2.01rem + 1.29vw, 2.93rem); 228 | --step-4: clamp(2.72rem, 2.36rem + 1.83vw, 3.66rem); 229 | --step-5: clamp(3.27rem, 2.75rem + 2.56vw, 4.58rem); 230 | } 231 | 232 | .step--2 { 233 | font-size: var(--step--2); 234 | } 235 | 236 | .step--1 { 237 | font-size: var(--step--1); 238 | } 239 | 240 | .step-0 { 241 | font-size: var(--step-0); 242 | } 243 | 244 | .step-1 { 245 | font-size: var(--step-1); 246 | } 247 | 248 | .step-2 { 249 | font-size: var(--step-2); 250 | } 251 | 252 | .step-3 { 253 | font-size: var(--step-3); 254 | } 255 | 256 | .step-4 { 257 | font-size: var(--step-4); 258 | } 259 | 260 | .step-5 { 261 | font-size: var(--step-5); 262 | } 263 | 264 | body { 265 | /* 266 | 14 = tamaño de letra más pequeño 267 | 18 = tamaño de letra más grande 268 | 300 = tamaño de viewport más pequeño 269 | 1400 = tamaño de viewport más grande 270 | */ 271 | /* font-size: calc(14px + (18 -14) * ((100vw - 300px) / (1400 - 300))); */ 272 | /* font-size: calc(12px + (24 -12) * ((100vw - 200px) / (1600 - 200))); */ 273 | } 274 | 275 | .box-fluid { 276 | width: clamp(400px, 60vw, 600px); 277 | height: clamp(200px, 30vh, 300px); 278 | } 279 | -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/butterfly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/butterfly.jpg -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/butterfly.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/butterfly.webp -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/html5-3d-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/html5-3d-1200.png -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/html5-3d-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/html5-3d-600.png -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/html5-3d-900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/html5-3d-900.png -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/kitten-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/kitten-large.png -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/kitten-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/kitten-medium.png -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/kitten-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/kitten-small.png -------------------------------------------------------------------------------- /03-ResponsiveArquitecturaCSS/img/puesta-sol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/03-ResponsiveArquitecturaCSS/img/puesta-sol.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cursos _HTML_ & _CSS_ 2 | 3 | En este repositorio encontrarás los recursos para seguir los Curso de _HTML_ & _CSS_ de [Jonathan MirCha](https://jonmircha.com/cursos). 4 | 5 | ## Cursos de la serie 6 | 7 | 1. [🟠 Fundamentos de _HTML_](https://www.youtube.com/watch?v=-oK6zL01fNM) 8 | 1. [🔵 Fundamentos de _CSS_](https://www.youtube.com/watch?v=K3xmRF8ab1o) 9 | 1. [🔵 Unidades y Estilos _CSS_](https://www.youtube.com/watch?v=p_lT7AgpEMU) 10 | 1. [🔵 Efectos Visuales y Movimiento en _CSS_](https://www.youtube.com/watch?v=mVhoGXkDbMw) 11 | 1. [🔴 Responsive y Arquitectura _CSS_](https://www.youtube.com/watch?v=udGrXWeJp1Y) 12 | 13 | ## Mis Redes Sociales 14 | 15 | - 🔔 Suscríbete al canal https://youtube.com/jonmircha?sub_confirmation=1 🤓 16 | - 👉 Visita mi sitio web https://jonmircha.com/ 💻 17 | - 🌮 ¿Me invítas un taco? https://www.paypal.me/jonmircha 18 | -------------------------------------------------------------------------------- /responsive-arquitectura.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonmircha/youtube-html-css/4e4e4baec68a152b16ac9a781e57e329c0ef91d8/responsive-arquitectura.zip --------------------------------------------------------------------------------