MÓDULO 6 - Códigos; HTML, CSS, Latex, MathJax y JavaScript - Anki Macrocurso

◁ Lección anterior | Próxima lección ▷

Selectores (CSS)

Si quieres poner varios, se separan por comas (,), pero no siempre. .nightMode y .light siempre primeros.

• .nightMode
• .night
• .light
• .front
• .back

Replay button / Botón de reproducir

/Tamaño del botón de reproducción/

.replay-button svg {
width: 45px;
height: 45px;

/Color de relleno del botón de reproducción/

.replay-button svg circle {
fill: white;
}

/Color de la flecha y perímetro botón de reproducción/
.replay-button svg path {
stroke: black;
fill: red;
}

Visto en la lecciones anterioeres

Fuentes (font)

Texto (text)

Fondo (background)

.card{
background-image: url("paper.gif");
}

Imagen (selector + propiedades)

Selector: img

Ejemplo:

img {

border: 1px solid \#ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
height: 222px;
margin: px;
box-shadow: 0 22px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
opacity: 0.5;
filter: grayscale(100%);
}

• Filtros para las imágenes:
  • filter: … ;
    • blur(4px) / brightness(250%) / contrast(180%) / grayscale(100%) / invert(100%) / saturate(7) / sepia(100%) / drop-shadow(8px 8px 10px green)

Bordes (border)

• border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
• border-color: Color del borde.
• border-radius: Permite crear esquinas redondeadas para un elemento. En px

border-style (Diferentes estilos para el borde (sólido, puntos…). Valores:

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border

Márgenes

margin: ;

margin-top / margin-right / margin-bottom / margin-left (Tamaño del margen superior, derecho, inferior e izquierdo). En píxeles (px)

Relleno

padding: ;

padding-top / padding -right / padding -bottom / padding -left (Tamaño del relleno superior, derecho, inferior e izquierdo). En píxeles (px)

margin: para definir la distancia que debe existir entre los elementos HMTL

padding: para definir la distancia que debe existir alrededor de un elemento dentro del propio elemento

!important

No recomendado para el desarrollo de CSS a buen nivel, pero a nosotros nos sirve.

La regla !important en CSS se usa para añadir más importancia o prioridad a un valor que de normal. Si utilizar la regla !important , se sobrescribirá todos los estilos previos para esa propiedad específica de un elemento.

.container {
background: #bc8aff !important;
padding: 25px;
}

En CSS, el último selector es el que tiene prioridad frente al mismo selector con otras propiedades.

.container {
background: #bc8aff;
padding: 25px;
}

.container {
background: #000;
padding: 25px;
}

En este ejemplo, el selector .container será negro (#000) porque es el último.
Si queremos que sea el primer selector el que especifique el color de fondo del selector .container, podríamos añadir después de background: orange; la regla !important.

.container {
background: #bc8aff !important;
padding: 25px;
}

Otras soluciones al uso de !important: como dijimos en la lección de CSS básico, cuanto más específico sea un selector, mayor prioridad tendrá este a la hora de producir cambios en un elemento. Por ello, en vez de utilizar !important, para este ejemplo, podríamos hacer más específico el selector que queremos que modifique el elemento en cuestión. Así, nos ahorramos el utilizar esta regla y minimizamos los errores que nos puedan surgir.

#wrapper .row .column .container {
background: #ccc; /*gray*/
padding: 25px;
}

.column .container {
background: #bc8aff; /*purple*/
padding: 25px;
}

Gradientes

Los gradientes en CSS te permiten desplegar transiciones entre dos o más colores que tu elijas. Podemos elegir entre dos tipos de gradientes:

• Gradientes lineares (van de arriba hacia abajo, de derecha a izq, en diagonal, etc)
  • Gradiente linear – Diagonal
    • background-image: linear-gradient(to bottom right, red, yellow);
  • Gradiente linear con ángulo que quereamos (deg=degrees = grados)
    • background-image: linear-gradient(0deg, red, yellow);
  • Gradiente linear - Varios colores
    • background-image: linear-gradient(red, yellow, green);
• Gradientes radiales (definidos por su centro)
  • Radial gradient (centro, periferia)
    background-image: radial-gradient(red, yellow).

Sombras

Shadow en inglés.

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;  
}

Tooltip

Un tooltip se usa frecuentemente para mostrar información extra sobre algo cuando nosotros movemos nuestro cursor y lo ponemos encima de un elemento. Su selector de CSS es tooltip{}

.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 background-color: black;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
top: 150%;
 left: 50%;
 margin-left: -60px;
 / Fade in tooltip - takes 2 second to go from 0% to 100% opac: /
 opacity: 0;
 transition: opacity 2s;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
}

HTML

<div class="tooltip">Hover over me
<span class="tooltiptext">Texto</span>
</div>

Botones

Introducción

CSS

.button {
 background-color: #4CAF50;
 border: none;
 color: white;
 padding: 20px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
border-radius: 12px;
}

HTML

<button class="button button3">Botón</button>

Otro ejemplo:

{{Anverso}} (CSS de tooltip añadido)

<button class="button button3"><div class="tooltip">Hover over me
<span class="tooltiptext">Texto</span>
</div></button>

Sombra

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

Botón para ventana emergente

<button onclick="alert('Texto de la ventana emergente')">Clica este botón</button>

Botón para notificación

<div id="notification" style="display: none; position: fixed; bottom: 10px; right: 10px; background-color: #4CAF50; color: white; padding: 15px; border-radius: 5px;">

¡Bien hecho!

</div>

<script>
function showNotification() {
var notification = document.getElementById('notification');
notification.style.display = 'block';
setTimeout(function() {
notification.style.display = 'none';
}, 3000);
}
</script>

<button onclick="showNotification()">Mostrar notificación</button>

Cambiar entre modo claro-oscuro

<button class="switch-button" onclick="toggleMode()">Toggle Light/Dark Mode</button>

<script>
// Cargar el modo preferido al iniciar
window.onload = function() {
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
} else {
document.body.classList.add('light-mode');
}
};

// Función para alternar entre modos
function toggleMode() {
if (document.body.classList.contains('dark-mode')) {
document.body.classList.remove('dark-mode');
document.body.classList.add('light-mode');
localStorage.setItem('theme', 'light');
} else {
document.body.classList.remove('light-mode');
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
}
}
</script>

/* Estilos generales */
body {
font-family: Arial, sans-serif;
transition: background-color 0.5s, color 0.5s;
}

/* Modo Claro */
body.light-mode {
background-color: #ffffff;
color: #000000;
}

/* Modo Oscuro */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}  

/* Estilos para el botón del interruptor */

.switch-button {
position: center;
top: 10px;
right: 10px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s, color 0.3s;
}

.switch-button:hover {
background-color: #45a049;
}

Enlaces

<a href="enlace">Texto a enlazar</a>

Sinergia:

Campo de enlace + botón

<button><a href="enlace">Texto a enlazar</a></button>

Animaciones

Cuando especifica estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente del estilo actual al nuevo estilo en determinados momentos.

Para que una animación funcione, debe vincular la animación a un elemento.

El siguiente ejemplo vincula la animación "ejemplo" al elemento <div>. La animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento <div> de "rojo" a "amarillo":

div {
 width: 100px;
 height: 100px;
 background-color: red;
 animation-name: example;
 animation-duration: 4s;
}

@keyframes example {
 from {background-color: red;}
 to {background-color: yellow;}
}

Tenemos que dar un valor en s a animation-duration: s; sino no existirá animación, pues predeterminadamente el valor es 0s.

/ The element to apply the animation to /div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s;  
}

@keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;}  
}

Dentro de div, propiedad animation-delay: 2s;. Crea un retraso de 2s es decir hasta dentro de 2s la animación no sucede. animation-iteration-count: infinite;, por si quieres que la animación sea infinita

Transiciones

.ejemplo1{
width: 100px;
height: 50px;
background: red;
transition: width 2s;
}

.ejemplo1:hover {
width: 300px;
}

<div class="ejemplo">Hola</div>

Borde en texto (stroke)

Selector: .stroke CSS

.stroke {
color: red ; / color de las letras/
-webkit-text-stroke: 2px red; / color del borde/
text-shadow: -1px -1px 1px #000, 2px 2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000;
}

HTML:

<div class= “stroke”> … </div>

{{clickable:Tags}} (poner tags de la nota pero si clicas te lleva al explorador, se crea con el addon pertinente).

◁ Lección anterior | Próxima lección ▷

MÓDULO 6 - Códigos; HTML, CSS, Latex, MathJax y JavaScript - Anki Macrocurso