• Barajar
    Activar
    Desactivar
  • Alphabetizar
    Activar
    Desactivar
  • Frente Primero
    Activar
    Desactivar
  • Ambos lados
    Activar
    Desactivar
  • Leer
    Activar
    Desactivar
Leyendo...
Frente

Cómo estudiar sus tarjetas

Teclas de Derecha/Izquierda: Navegar entre tarjetas.tecla derechatecla izquierda

Teclas Arriba/Abajo: Colvea la carta entre frente y dorso.tecla abajotecla arriba

Tecla H: Muestra pista (3er lado).tecla h

Tecla N: Lea el texto en voz.tecla n

image

Boton play

image

Boton play

image

Progreso

1/6

Click para voltear

Rango de Cartas a estudiar

a través

6 Cartas en este set

  • Frente
  • Atrás
  • 3er lado (pista)
Establecer un imagen con bordes redondeados
img {
border-radius: 8px;
}

img {
border-radius: 50%;
}
Crear un thumbnail de una imagen
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
height: auto;
}

<img src="paris.jpg" alt="Paris">
Como crear una imagen RESPONSIVE
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>

<h2>Responsive Image</h2>

<p>Responsive images will automatically adjust to fit the size of the screen.</p>
<p>Resize the browser window to see the effect:</p>

<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">

</body>
</html>
Centrar una imagen
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>

<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="paris.jpg" alt="Paris" style="width:50%">

</body>
</html>
Como hacer una imagen transparente
img {
opacity: 0.5;
}
Posición del texto en una imagen (posición relativa y absoluta)
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}

img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Add some text to an image in the top left corner:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>

</body>
</html>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>