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

Distintos fondos de una página web

Fondos con colores sólidos o semitransparentes (sin comentarios)
Fondos con textura obtenida de una imagen que se repite
Fondos con una imagen que rellena todo el espacio de la página web.
Fondo con distintos tipos de degradados: radiales, lineales, etc...
Fondos con patrón creado con propiedades CSS


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

  /* Fondo con imagen como 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); */
}

Descomentando cada tipo y comentando los demás se obtienen los distintos fondos, tal y como indico. Además si variamos el color y la opacidad de la propiedad background-color del elemento body obtenemos multitud de tonalidades y efectos.


  /* Fondo con Patrón CSS 
     colocar la clase del patrón que queramos
     de fondo en la etiqueta body de HTML */

/* Patterns = patrones //////////////////////////
================================================= */
/* --------------------------------- Carbon fibre */
.patron1 {
  background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:#282828;
  background-size:16px 16px;
}
/* ------------------------------ Blueprint grid  */
.patron2 {
  background-color:#269;
  background-image: linear-gradient(white 2px, transparent 2px),
  linear-gradient(90deg, white 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
}

Los fondos con patrón son clases que hay que añadir a la etiqueta body de la hoja HTML. Evidentemente, comentaremos la líneas no necesarias de los elementos body y body::after anteriores.

Clases genéricas para separaciones y anchos


/* Separaciones /////////////////////////////////
================================================= */
.mar-T     { margin-top     : var(--espacio); }
.mar-R     { margin-right   : var(--espacio); }
.mar-B     { margin-bottom  : var(--espacio); }
.mar-L     { margin-left    : var(--espacio); }
.margen    { margin         : calc(var(--espacio) * 1); }
.margenL   { margin         : calc(var(--espacio) * 2); }
.margenXL  { margin         : calc(var(--espacio) * 3); }
.margenXXL { margin         : calc(var(--espacio) * 4); }

.pad-T     { padding-top    : var(--espacio); }
.pad-R     { padding-right  : var(--espacio); }
.pad-B     { padding-bottom : var(--espacio); }
.pad-L     { padding-left   : var(--espacio); }
.relleno   { padding        : calc(var(--espacio) * 1); }
.rellenoL  { padding        : calc(var(--espacio) * 2); }
.rellenoXL { padding        : calc(var(--espacio) * 3); }
.rellenoXXL{ padding        : calc(var(--espacio) * 4); }

/* Anchos y altos ///////////////////////////////
================================================= */
.ancho-full,.ancho-fijo {
  max-width    : 100vw;
  margin-left  : auto;
  margin-right : auto;
}
.ancho-fijo { width: 96%; }

Clases genéricas para modelos de diseño Box-Model


/* ##############################################
      DISEÑO RESPONSIVE MOBILE
################################################# */

/* Cajas Flotantes (con floats) /////////////////
================================================= */
.caja-flota { 
  overflow : hidden;
  height   : 1%;
}

div[class*="col"] { margin-top: var(--espacio); }

/* Cajas Flexibles (con flex) ///////////////////
================================================= */
.caja-flex {
  display         : flex;
  flex-direction  : row;
  flex-wrap       : wrap;
  justify-content : flex-end;
}
.item-dim { 
  max-width   : 300px;
  padding     : 10px;
  line-height : 0;
}

Clases genéricas para Posiciones y colores


/* Posiciones ///////////////////////////////////
================================================= */
/* para textos */
.centro { text-align: center;  }
.justi  { text-align: justify; }
.dcho   { text-align: right; }

/* para imágenes */
.centra { margin : 0 auto; display: block; }
.izda   { float  : left;  margin: 5px 10px 5px 0;  }
.dcha   { float  : right; margin: 5px 0 5px 10px;  }

/* Colores //////////////////////////////////////
================================================= */
/* para fondos */
.bg-1   { background-color: var(--color1f); }
.bg-2   { background-color: var(--color2f); }
.bg-3   { background-color: var(--color3f); }

/* para textos */
.tx-co1 { color: var(--color1t); }
.tx-co2 { color: var(--color2t); }
.tx-co3 { color: var(--color3t); }

Clases para elementos responsive


/* Elementos responsive /////////////////////////
================================================= */
/* imágenes responsive
------------------------------- */
.respon-img {
  max-width : 100%;
  height    : auto;
  margin    : 0;
}
/* 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
--- */

/* Objetos responsive: videos, mapas, páginas, onDrive, Drive,...
----------------------------------------------------------------- */
.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
--- */

Degradados, filtros, tamaños y fuentes


/* Degradados ///////////////////////////////////
================================================= */
.degradado1 {
  background:
  linear-gradient(limegreen,transparent),
  linear-gradient(90deg,skyblue,transparent),
  linear-gradient(-90deg,coral,transparent);
  background-blend-mode: screen;
}

/* Filtros //////////////////////////////////////
================================================= */
.gris               { -webkit-filter: grayscale(1); filter: grayscale(1); }
.sepia              { -webkit-filter: sepia(1); filter: sepia(1); }
.gris-m:hover img   { -webkit-filter: grayscale(1) opacity(.5);  }
.sepia-m:hover img  { -webkit-filter: sepia(1) opacity(.5);  }
.gris-con:hover img { -webkit-filter: grayscale(1) contrast(10) opacity(.2); }

/* Efectos //////////////////////////////////////
================================================= */
.sombra  { box-shadow: 0 0 5px 5px hsla(0, 0%, 0%, 0.2); }
.redondo { border-radius: 10px; }
.transpa { opacity: 0.6; }

/* Textos: tamaños y fuentes ////////////////////
================================================= */
.tx-tam1 { font-size: 1em; }
.tx-tam2 { font-size: 2em; }
.tx-tam3 { font-size: 3em; }

.tx-fam1 { font-family: sans-serif; }
.tx-fam2 { font-family: sans-serif; }
.tx-fam3 { font-family: sans-serif; }

Clases para efectos especiales


/* Efectos de imagen ////////////////////////////
================================================= */
/* ································ velo-inferior */
.velo-inf              { position: relative; }
.velo-inf:hover        { cursor: pointer; }
.velo-inf:hover::after { height: 100%; }
.velo-inf::after {
  content          : "";
  width            : 100%;
  height           : 0;
  position         : absolute;
  bottom           : 0;
  left             : 0;
  background-color : hsla(0, 100%, 50%, 0.4);
  transition       : all 0.75s ease-in;
}
/* ·································· velo-centro */
.velo-cen              { position: relative; }
.velo-cen:hover        { cursor: pointer; }
.velo-cen:hover::after { width: 100%; height: 100%; top: 0; left: 0; }
.velo-cen::after {
  content          : "";
  width            : 0;
  height           : 0;
  position         : absolute;
  top              : 50%;
  left             : 50%;
  background-color : hsla(60, 100%, 50%, 0.4);
  transition       : all 0.75s ease-in;
  border-radius    : 2%;
}
/* ································ velo-diagonal */
.velo-dia              { position: relative; }
.velo-dia:hover        { cursor: pointer; }
.velo-dia:hover::after { width: 100%; height: 100%;}
.velo-dia::after {
  content          : "";
  width            : 0;
  height           : 0;
  position         : absolute;
  top              : 0;
  left             : 0;
  background-color : hsla(30, 100%, 50%, 0.4);
  transition       : all 0.75s ease-in;
  border-radius    : 2%;
}
/* ········································· Zoom */
.zoom:hover { 
  cursor     : pointer;
  transform  : scale(1.1);
  box-shadow : 0 0 10px 10px hsla(0, 0%, 0%, 0.5);
}

Encabezados responsive


/* Encabezados HTML */
h1 { font-size: 200%;}
h2 { font-size: 150%;}
h3 { font-size: 130%;}
h4 { font-size: 110%;}
h5 { font-size: 100%;}
h6 { font-size:  90%;}
h1,h2,h3,h4,h5,h6,p { 
  margin-top : 0; margin-right : 0; margin-bottom : 0; margin-left : 0;
  padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
}

Banners


/* Banners
------------------------------------------------------------------ */
.banner1 { 
  height: calc(var(--altoBanner) * 3);
  background: url('../banner/banner1.jpg') no-repeat center center;
  background-size : cover;
}
.banner2 { 
  height: calc(var(--altoBanner) * 3);
  background: url('../banner/banner2.jpg') no-repeat center center;
  background-size : cover;
}
.banner3 { 
  height: calc(var(--altoBanner) * 3);
  background: url('../banner/banner3.jpg') no-repeat center center;
  background-size : cover;
}

Media queries


/* ==============================================
      RESPONSIVE DESKTOP ////////////////////////
================================================= */
@media all and (min-width: 768px) {

  html { font-size: 125%; }

  div[class*="col"] {
    float        : left;
    margin-top   : 0;
    margin-right : var(--espacio);
  }

  .ancho-fijo {
    max-width    : var(--anchoSite);
    margin-left  : auto;
    margin-right : auto;
  }

  div[class*="ini"] { margin-left: calc(var(--espacio) / 2); }
  div[class*="fin"] { margin-right: 0%; }

  .col--1_5 { width: calc(100% * (1 / 5) - var(--espacio)); }
  .col--2_5 { width: calc(100% * (2 / 5) - var(--espacio)); }
  .col--3_5 { width: calc(100% * (3 / 5) - var(--espacio)); }
  .col--4_5 { width: calc(100% * (4 / 5) - var(--espacio)); }

  .col--1_4 { width: calc(100% * (1 / 4) - var(--espacio)); }
  .col--2_4 { width: calc(100% * (1 / 2) - var(--espacio)); }
  .col--3_4 { width: calc(100% * (3 / 4) - var(--espacio)); }

  .col--1_3 { width: calc(100% * (1 / 3) - var(--espacio)); }
  .col--2_3 { width: calc(100% * (2 / 3) - var(--espacio)); }

  nav.caja-flex { flex-direction: row; }
}
/* === END - RESPONSIVE DESKTOP ======================= */

Imprimir

Web de ejemplo con objetos responsive

Publicado en Publicación

Utilizando imágenes, videos y cualquier otro objeto para que sea responsive en cualquier lugar de la página.

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