logo0
3con14 - TIC II
Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  
Hacer

Tareas

Leer

Artículos teóricos

  • Inicio

Clases CSS para distintos propósitos

Publicado en Publicación

Cuando creamos un Website desde cero es necesario pensar antes el diseño que queremos realizar y los distintos efectos que vamos a implementar. Todo esto supone crear una/s hojas CSS genéricas y optimizadas que nos permitan trabajar en nuestro Website de manera más cómoda.

Aquí os propongo una serie de clases genéricas para distintos propósitos. Creando una hoja CSS ordenada y bien comentada nos resultará sumamente fácil cambiar radicalmente el aspecto de cualquier página de nuestro Sitio sin más que añadir clases a las distintas "cajas" (div) que coloquemos.

Antes de comenzar a escribir reglas CSS vamos a declarar algunas variables genéricas que nos serán útiles a lo largo de la hoja, de esta forma con cambiar el valor de éstas aquí cambiará su valor en cualquier lugar donde las estemos utilizando:


/* Variables generales //////////////////////////
================================================= */
:root {
  --anchoSite  : 1280px;
  --espacio    : 2%;
  --altoBanner : 15vw;
  
  --color1f  : hsla(0, 0%, 100%, 1);
  --color2f  : hsla(0, 0%, 0%, 0.4);
  --color3f  : hsla(30, 50%, 25%, 0.4);

  --color1t  : hsla(0, 0%, 20%, 1);
  --color2t  : hsla(0, 0%, 80%, 1);
  --color3t  : hsla(30, 50%, 25%, 1);
}

 

 

Imprimir

Objetos en diseño web responsive con CSS

Publicado en Publicación

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); */
}

Imprimir

Más artículos...

En línea...

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

Prácticas...

aulav

Útiles...

imprescindibles Firefox Chrome Safari Opera IExplorer Adobe Reader 7zip Flash Java Filehippo Ninite

Visitas...

2.png8.png1.png1.png9.png
Hoy ........26
Ayer .......16
Mes ........458
Jueves, 20 Febrero 2020