From bb393c6e7349af7da65806aa1743545734228227 Mon Sep 17 00:00:00 2001
From: devfzn <dev_fzn@proton.me>
Date: Thu, 13 Apr 2023 18:59:51 -0400
Subject: [PATCH] HTML5 y CSS3 pt. 4: Avanzando en CSS 05
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Uso de: opacity, box-shadow, text-shadow.
Selección de colores RGB y RGBA.
---
 004_primeras_paginas/README.md                | 23 +++++++++++++++++--
 .../html_css_parte4/style.css                 | 12 +++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md
index 7c1dd31..50a396c 100644
--- a/004_primeras_paginas/README.md
+++ b/004_primeras_paginas/README.md
@@ -324,10 +324,17 @@ utilizar [style.css](./html_css_parte4/style.css).
     - [Monserrat](https://fonts.google.com/specimen/Montserrat)
     - [Noto Sans Symbols 2](https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2)
     - [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music)
+
 </details>
 
-- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L237).
-- [Video](./html_css_parte4/index.html#L73) incrustado y [estilo](./html_css_parte4/style.css#L287).
+- [Mapa](./html_css_parte4/index.html#L52) incrustado (embedded) y
+[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
 
@@ -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)
+
diff --git a/004_primeras_paginas/html_css_parte4/style.css b/004_primeras_paginas/html_css_parte4/style.css
index 99fc6f7..d3e29f8 100644
--- a/004_primeras_paginas/html_css_parte4/style.css
+++ b/004_primeras_paginas/html_css_parte4/style.css
@@ -194,6 +194,8 @@ p.test {
     font-size: 2em;
     margin: 0 0 1em;
     clear:left;
+    /* color: rgba(0,0,0,0.3); RGB y opacidad */
+    text-shadow: 2px 2px 4px #cd4f39;
 }
 
 /* Alterando estilos con psudo-clases
@@ -252,6 +254,7 @@ p:first-line {
 .diferencias {
     padding: 3em 0;
     background: #888888;
+    /* box-shadow: inset 0 0 30px red; sombra interna*/
 }
 
 .contenido-diferenciales {
@@ -281,7 +284,14 @@ p:first-line {
 }
 
 .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 {