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

Galería lightbox modal y responsive, solo con CSS

Hasta ahora hemos visto que con CSS podemos dar estilo a casi cualquier elemento. En esta ocasión vamos a ver como crear una galería lighbox responsive sin utilizar javascript y con apenas unas líneas de código CSS.

Vista galería:

lightbox1

Vista modal, al pulsar sobre una imagen:

lightbox2

código

Elementos HTML


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Galería lightbox responsive solo con CSS">
    <meta name="author" content="(cc) 3con14" />
    <title>Galería</title>
    <link rel="stylesheet" href="/css/normalize.css">    
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<main>
  <h3>Galería de imágenes lightbox <br>responsive solo con CSS</h3>

  <div class="galeria">
    <div class="item"><a href="#img1"><img src="/img/1p.png"></a></div>
    <div class="item"><a href="#img2"><img src="/img/2p.png"></a></div>
    <div class="item"><a href="#img3"><img src="/img/3p.png"></a></div>
    <div class="item"><a href="#img4"><img src="/img/4p.png"></a></div>
  </div>
  
  <div class="modal" id="img1">
    <div class="imagen">
      <a class="ant" href="#img4"></a>
      <a href="#" title="cerrar"></a><img src="/i2017bto2/img/1g.jpg">
      <a class="sig" href="#img2"></a>
    </div>
  </div>

  <div class="modal" id="img2">
    <div class="imagen">
      <a class="ant" href="#img1"></a>
      <a href="#" title="cerrar"></a><img src="/img/2g.jpg">
      <a class="sig" href="#img3"></a>
    </div>
  </div>

  <div class="modal" id="img3">
    <div class="imagen">
      <a class="ant" href="#img2"></a>
      <a href="#" title="cerrar"></a><img src="/img/3g.jpg">
      <a class="sig" href="#img4"></a>
    </div>
  </div>

  <div class="modal" id="img4">
    <div class="imagen">
      <a class="ant" href="#img3"></a>
      <a href="#" title="cerrar"></a><img src="/img/4g.jpg">
      <a class="sig" href="#img1"></a>
    </div>
  </div>

</main>
</body>
</html>

Reglas CSS


:root { --separa: 4px; }
* { 
  box-sizing: border-box;
  transition: all 0.3s;
}
html {
  font       : 16px sans-serif;
  background : steelblue;
}
h3 { text-align: center; margin: 2em; }
main {
  max-width: 800px;
  width: 98%;
  min-height: 96vh;
  margin: 2vh auto;
}
.galeria {
  max-width       : 100%;
  line-height     : 0;
  padding         : var(--separa);
  padding-right   : 0;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : space-around;
}
.item {
  padding: var(--separa);
  width: 180px;
}
.item img {
  max-width : 100%;
  height    : auto;
  opacity   : 0.4;
  outline   : 3px solid #fff;
}
.item img:hover {
  opacity : 1;
  cursor  : pointer;
}
.modal {
  display: none;
}
.modal:target {
  display          : block;
  position         : fixed;
  top              : 0;
  left             : 0;
  width            : 100vw;
  height           : 100%;
  display          : flex;
  background-color : rgba(0,0,0,0.6);
}
.imagen {
  margin          : auto;
  width           : 100%;
  display         : flex;
  justify-content : center;
  align-items     : center;
}
@keyframes zoom {
  0%   { opacity: 0.2; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1);}
}
.imagen a { margin: 0 4px; }
.imagen img {
  max-width : 100%;
  width     : 80vw;
  height    : auto;
  border    : 8px solid #fff;
  animation : zoom 0.5s ease-in-out;
  position  : relative;
}
.imagen a:nth-child(2)::after {
  content       : "X";
  width         : 40px; height: 40px;
  line-height   : 40px;
  text-align    : center;
  font-size     : 2em;
  border-radius : 50%;
  border        : 2px solid hsla(0, 0%, 0%, 0.3);
  background    : hsla(0, 0%, 0%, 0.5);
  color         : hsla(0, 100%, 50%, 0.5);
  position      : absolute;
  top           : 1vh;left: 1vw;
  z-index       : 1;
}
.imagen a:nth-child(2):hover::after {
  border        : 2px solid hsla(0, 0%, 100%, 0.6);
}
.imagen a:nth-child(2) {
  margin : 0;
  height : 100%;
}
.ant,.sig {
  width  : 0px; height: 0px;
  border : 20px solid transparent;
}
.ant { border-right: 20px solid hsla(0, 100%, 100%, 0.8); }
.sig { border-left: 20px solid hsla(0, 100%, 100%, 0.8); }
.ant:hover { border-right: 20px solid hsla(0, 100%, 50%, 0.8); }
.sig:hover { border-left: 20px solid hsla(0, 100%, 50%, 0.8); }

 

Imprimir

Slider manual y responsive, solo con CSS

Un sencillo "Slider" manual responsive utilizando sólo CSS y sin emplear javascript ni ningón otro framework.

Vista SLIDER:

slider1

código

Elementos HTML


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Slider manual solo con CSS" />
    <title>Slider</title>
    <link rel="stylesheet" href="/css/normalize.css">    
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<main>

  <div class="slider">

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton1" checked>
      <label for="boton1"></label>
      <img src="/img/1g.jpg">
    </div>

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton2">
      <label for="boton2"></label>
      <img src="/img/2g.jpg">
    </div>

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton3">
      <label for="boton3"></label>
      <img src="/img/3g.jpg">
    </div>

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton4">
      <label for="boton4"></label>
      <img src="/img/4g.jpg">
    </div>

  </div>

</main>
</body>
</html>

Reglas CSS


:root {
  --ancho: 500px;
}
* { 
  margin: 0; padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background-color: tan;
  display: flex;
}
main {
  max-width: 800px;
  width: 96%;
  min-height: 500px;
  margin: auto;
  background-color: rgba(255,0,0,0.1);
}

.slider {
  max-width: var(--ancho);
  height: calc(var(--ancho) / 1.78);
  margin: 5% auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  background-color: #333;
}
.slider input[type="radio"] {
  display: none;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s ease-in;
  outline: 1px solid transparent;
}

.slider input[type="radio"]:checked ~ img {
    transform: scale(1);
    opacity: 1;
}
.slider input[type="radio"] + label {
  position: relative;
  z-index: 100;
  margin: 10px;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #000;
  background-color: hsla(0, 0%, 100%, 1);
}
.slider input[type="radio"]:checked + label {
  box-shadow: 0 0 0 2px #000,
              0 0 0 2px #fff inset;
  background-color: hsla(0, 100%, 50%, 1);
}
label:hover {
  cursor: pointer;
}

 

Imprimir

Elementos que se "resisten" a CSS

Con CSS podemos dar estilo a prácticamente cualquier elemento de nuestra web. Y digo prácticamente porque hay algunos elementos "rebeldes" que se nos resisten. Entre ellos se encuentran las checkbox (casillas de verificación), los radio (botones de opción) y los select (elementos desplegables y listas).

Puede que en algunos diseños el estilo "por defecto" de uno de estos elementos quede bien integrado, pero en la mayoría de los casos no. Por eso la tendencia ha sido crear este tipo de controles con elementos div o span, perdiendo por el camino la semántica, la accesibilidad y teniendo que recurrir a javascript para darles la funcionalidad que tienen por defecto.

Aquí vamos a ver una forma de conseguir dar estilo a un boton radio, manteniendo los aspectos básicos de este elemento y sin tener que recurrir a javascript, porque CSS3 es suficiente para suplir lo que debería ser un estándar, poder dar estilo a todos y cada uno de los elementos de HTML.

radio botones

Elementos HTML


<div class="container">
  <form action="#" method="post">
    <label for="radio1">
      <input id="radio1" name="grupo1" type="radio" />
      <span>Opción #1</span> 
    </label>
    
    <label for="radio2">
      <input id="radio2" name="grupo1" type="radio" />
      <span>Opción #2</span> 
    </label>  

    <label for="radio3">
      <input id="radio3" name="grupo1" type="radio" />
      <span>Opción #3</span> 
    </label>  
  </form>    
</div>

Reglas CSS


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100vh; }
body { background: steelblue; }
.container {
  width           : 100%;
  height          : 100%;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : center;
  align-items     : center;
}
form { 
  margin  : 2em; padding: 2em;
  outline : 1px solid hsla(207, 44%, 59%, 1);}
label {
  display  : block;
  margin   : 1em;
  color    : #333;
  font     : 20px sans-serif;
  position : relative;
}
/* oculta botones radios por defecto */
input[type="radio"] { opacity: 0; }

span { position: relative; }
span::before {
  content       : "";
  width         : 18px; height: 18px;
  position      : absolute;
  top           : 2px; left: -30px;
  background    : #fff;
  border-radius : 50%;
  box-shadow    : 0 0 1px 3px #fff inset,
                  0 0 0px 2px #333;
  transition    : all 0.25s ease-in-out;
}
input[type="radio"]:checked + span::before { background: #f00; }

Nota: eliminando la línea con la propiedad border-radius y cambiando el tipo de botón creamos las casillas de verificación checkbox

Imprimir

Más artículos...

En línea...

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

Prácticas...

aulav

Visitas...

0.png8.png4.png8.png1.png
Hoy ........8
Ayer .......9
Mes ........188

Jueves, 14 Diciembre 2017