HTML5 y CSS3 pt. 4: Avanzando en CSS 05

Uso de: opacity, box-shadow, text-shadow.
Selección de colores RGB y RGBA.
This commit is contained in:
devfzn 2023-04-13 18:59:51 -04:00
parent 17d1a78e5f
commit bb393c6e73
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
2 changed files with 32 additions and 3 deletions

View File

@ -324,10 +324,17 @@ utilizar [style.css](./html_css_parte4/style.css).
- [Monserrat](https://fonts.google.com/specimen/Montserrat) - [Monserrat](https://fonts.google.com/specimen/Montserrat)
- [Noto Sans Symbols 2](https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2) - [Noto Sans Symbols 2](https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2)
- [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music) - [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music)
</details> </details>
- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L237). - [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y
- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L287). [estilo](./html_css_parte4/style.css#L239).
- [Video](./html_css_parte4/index.html#L73) incrustado y
[estilo](./html_css_parte4/style.css#L297).
> [CSS Background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) -
developer.mozilla.org.
> Juegos para [practicar](https://flexboxfroggy.com/)/aprender css.
#### Selectores avanzados CSS #### Selectores avanzados CSS
@ -364,3 +371,15 @@ de aquellos que tengan el id `mision`.
} }
``` ```
#### Opacidad
- Selector de color RGB: `color: rgb(0,0,0)`
- Selector de color RGB y opacidad: `color: rgba(0,0,0,0.3)`
#### Sombras
- [box-shadow](./html_css_parte4/style.css#L289)
- [text-shadow](./html_css_parte4/style.css#L198)
- Mozilla Box-shadow
[generator](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator)

View File

@ -194,6 +194,8 @@ p.test {
font-size: 2em; font-size: 2em;
margin: 0 0 1em; margin: 0 0 1em;
clear:left; clear:left;
/* color: rgba(0,0,0,0.3); RGB y opacidad */
text-shadow: 2px 2px 4px #cd4f39;
} }
/* Alterando estilos con psudo-clases /* Alterando estilos con psudo-clases
@ -252,6 +254,7 @@ p:first-line {
.diferencias { .diferencias {
padding: 3em 0; padding: 3em 0;
background: #888888; background: #888888;
/* box-shadow: inset 0 0 30px red; sombra interna*/
} }
.contenido-diferenciales { .contenido-diferenciales {
@ -281,7 +284,14 @@ p:first-line {
} }
.imagen-diferenciales { .imagen-diferenciales {
width: 60%; width: 50%;
margin-left: 3em;
box-shadow: 10px 10px 20px #046dfc; /* Es posible agregar + sombras separadas por ',' */
}
.imagen-diferenciales:hover {
opacity: 0.75;
transition: 330ms;
} }
.video { .video {