HTML5 y CSS3 pt. 4: Avanzando en CSS 05

Uso de: opacity, box-shadow, text-shadow.
Selección de colores RGB y RGBA.

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)
+

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 {