Los últimos tutoriales de desarrollo web
 

W3.CSS imágenes


Visualización de imágenes

Redondeado:

Auroras boreales

Circulo:

Bosque

Limita:

Montañas

Texto:

Naturaleza
Naturaleza

imagen redondeada

Noruega

La clase W3 ronda añade esquinas redondeadas a una imagen:

Ejemplo

<img src="img_fjords.jpg" class="w3-round" alt="Norway">
Inténtalo tú mismo "

imagen círculo

Noruega

La clase W3-círculo da forma a una imagen para hacer un círculo:

Ejemplo

<img src="fjords.jpg" class="w3-circle" alt="Norway">
Inténtalo tú mismo "

imagen confinada

Noruega

La clase W3-frontera agrega bordes alrededor de la imagen:

Ejemplo

<img src="fjords.jpg" class="w3-border w3-padding" alt="Norway">
Inténtalo tú mismo "

imagen Hoverable

Noruega

La clase W3-asomar-opacidad añade transparencia a la imagen en el ratón por encima:

Ejemplo

<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">
Inténtalo tú mismo "

Imagen como una tarjeta

Envolver cualquiera de las W3-tarjeta- clases * de todo el elemento <img> para que se muestre como una tarjeta (añadir sombras):

Luces

Persona

Simon

El jefe de todos los jefes


Ejemplo

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Person">
</div>
Inténtalo tú mismo "

imagen del texto

Coloque el texto en una imagen con las clases de pantalla y el W3-:

Luces

Arriba a la izquierda

Parte superior derecha

abajo a la izquierda

Abajo a la derecha

Medio

Ejemplo

<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights">
  <div class="w3-display-topleft w3-container">Top Left</div>
  <div class="w3-display-topright w3-container">Top Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom Left</div>
  <div class="w3-display-bottomright w3-container">Bottom Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
</div>
Inténtalo tú mismo "

La construcción de un álbum de fotos

En este ejemplo se utiliza el sistema de cuadrícula de respuesta W3.CSS para crear un álbum de fotos que se ve bien en todos los dispositivos. Usted aprenderá más sobre esto más adelante.

verano 2015

5 Terre

Monterosso

Vernazza

manarola

Corniglia

Riomaggiore


Ejemplo

<div class="w3-third">
  <div class="w3-card-2">
    <img src="img_monterosso.png" style="width:100%">
    <div class="w3-container">
      <h4>Monterosso</h4>
    </div>
  </div>
</div>
Inténtalo tú mismo "