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 ======================= */