Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Objetos en diseño web responsive con CSS

El principal cambio de conceptualización que ha traído el diseño web responsive ha sido sin duda la sustitución del pixel por unidades relativas. Es cierto, antes ligabamos todos los elementos del diseño (tamaño de tipografía, contenedores, imágenes, márgenes…) a una unidad fija. El pixel. Pero con el responsive todo es distinto. Trabajamos con unidades relativas: porcentajes: %, em, rem, vh,… y las imágenes por supuesto no son una excepción.

Añadiendo la siguiente clase a una imagen la convertimos en responsive:


/* imágenes responsive
------------------------------- */
.respon-img {
  max-width : 100%;
  height    : auto;
  margin    : 0;
}

Envolviendo un objeto (vídeo, ...) en un elemento div con esta clase:


/* Objetos responsive: videos, mapas, páginas, etc...
------------------------------------------------------ */
.respon-16_9 {
  position       : relative;
  height         : 0;
  max-width      : 100%;
  overflow       : hidden;  
}
.respon-16_9 { padding-bottom : 56.25%; }
.respon-4_3  { padding-bottom : 75%;    }

.respon-16_9 iframe,
.respon-16_9 object,
.respon-16_9 embed,
.respon-16_9 video {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}
/* ---
  NOTA: para mapa Google-Maps envolver iframe en caja respon-16_9
  y ésta a su vez en caja con ancho fijo o full
--- */

Envolviendo una imagen colocada en HTML para que sea full-width:


/* imágenes full-width desde HTML
------------------------------------------------- */
.full-box {
  position       : relative;
  height         : 0;
  padding-bottom : 25%; /* alto */
  overflow       : hidden;
  margin         : 0 auto;
}
.full-img {
  width             : 100%;
  background-size   : cover;
  background-repeat : no-repeat;
}
/* ---
  NOTA: para mapa Google-Maps dejar alto suficiente relativo al padding
  envolver iframe en caja full-box y añadir clase full-img a iframe
--- */

Distintos tipos de fondos para un Website:


body {
  max-width        : 100vw;
  min-height       : 100vh;
  position         : relative;
  background-color : var(--color1f);
}
body::after {
  content    : "";
  width      : 100%;
  min-height : 100%;
  position   : absolute;
  top        : 0;
  left       : 0;
  opacity    : 1;
  z-index    : -1;

  /* Fondo con imagen Textura */
  background : url(bg1.jpg);

  /* Fondo con imagen Full-Width */
    /* background: url(../img/3.jpg) no-repeat center fixed; */
    /* background-size: cover; */
    /* opacity: 0.3;   */

  /* Fondo con Gradiente */
    /* background: radial-gradient(steelblue, black); */
    /* background: linear-gradient(180deg,steelblue, black); */
}

Etiquetas: CSS3

Imprimir

En línea...

Hay 5 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png6.png3.png1.png6.png
Hoy ........17
Ayer .......15
Mes ........244

Jueves, 24 Agosto 2017