Inicio Apuntes FPApuntes DAM Tarjetas fluorescentes desplegables, crea las tuyas con HTML y CSS

Tarjetas fluorescentes desplegables, crea las tuyas con HTML y CSS

Fácil, rápido y para toda la familia

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una ves más aquí. Hoy vengo a dejar un pequeño artículo en el que vamos a ver cómo crear unas tarjetas de presentación. Esto viene a cuento por que esta semana un usuario me ha preguntado cómo podría crear unas tarjetas de presentación como las que puse en la sección «Portafolio» de la página about. Las tarjetas que puse en esa web, son una variación de las tarjetas fluorescentes desplegables que vamos a ver en las siguientes líneas.

Para crear estas tarjetas fluorescentes desplegables, tan solo será necesario utilizar un poco de HTML y algunas reglas CSS. Después cada uno puede modificarlas a su gusto, para adaptarlas a lo que necesite.

Tarjetas fluorescentes desplegables

Estas tarjetas tienen como único objetivo ofrecer una pequeña descripción de algo que podemos exponer mucho más añadiendo un enlace que nos lleve al contenido completo. Las tarjetas que vamos a crear, en principio se verán detrás de unos iconos «FontAwesome«. Estos iconos los podremos utilizar gracias al link CSS que vamos a añadir en el archivo HTML.

Tarjetas fluorescentes sin desplegar

Al pasar el cursor por encima de cada una de las cajas, gracias a las reglas CSS se desplegará el texto que tengamos añadido a su correspondiente campo HTML.

Tarjetas desplegables fluorescentes

Código de las tarjetas

Archivo index.html

Para crear nuestras tarjetas fluorescentes desplegables, empezaremos creando el archivo llamado index.html. En este archivo crearemos los contenedores de las tarjetas. Además añadiremos el texto descriptivo dentro de cada uno de los contenedores. Texto que después mostraremos con las reglas CSS.

Dentro de este archivo, solo será necesario pegar el siguiente código:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tarjeta con efecto fluorescente</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!--Título-->
    <div class="titulo">Tarjetas desplegables fluorescentes</div>
    <!--Contenedor-->
    <div class="container">
      <!--Tarjeta 1-->
      <div class="card">
        <div class="face face1">
          <div class="content">
            <i class="fas fa-server"></i>
            <h3>Servidores</h3>
          </div>
        </div>
        <div class="face face2">
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in
              mi lorem. Proin non eros lorem. Vestibulum laoreet, ex eu suscipit
              laoreet, orci est interdum nulla, sit amet bibendum erat est quis
              felis. Praesent gravida in metus in euismod.
            </p>
            <a href="#" type="button" target="_blank">Leer más</a>
          </div>
        </div>
      </div>
      <!--Tarjeta 2-->
      <div class="card">
        <div class="face face1">
          <div class="content">
            <i class="fas fa-wifi"></i>
            <h3>Internet</h3>
          </div>
        </div>
        <div class="face face2">
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in
              mi lorem. Proin non eros lorem. Vestibulum laoreet, ex eu suscipit
              laoreet, orci est interdum nulla, sit amet bibendum erat est quis
              felis. Praesent gravida in metus in euismod.
            </p>
            <a href="#" type="button" target="_blank">Leer más</a>
          </div>
        </div>
      </div>
      <!--Tarjeta 3-->
      <div class="card">
        <div class="face face1">
          <div class="content">
            <i class="fas fa-network-wired"></i>
            <h3>Red</h3>
          </div>
        </div>
        <div class="face face2">
          <div class="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in
              mi lorem. Proin non eros lorem. Vestibulum laoreet, ex eu suscipit
              laoreet, orci est interdum nulla, sit amet bibendum erat est quis
              felis. Praesent gravida in metus in euismod.
            </p>
            <a href="#" type="button" target="_blank">Leer más</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Tras pegar el código que acabamos de ver, solo queda guardar el archivo y cerrarlo.

Archivo style.css

Llegados a este punto, es la hora de crear el archivo .CSS con el que haremos que nuestras tarjetas sean desplegables y fluorescentes. El archivo que vamos a crear se llamará style.css, y dentro pegaremos el siguiente código:

body {
  display: grid;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #6d4d4d;
  justify-content: center;
  align-items: center;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.container {
  width: 1000px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  bottom: 25%;
}

.container .card {
  position: relative;
}

.container .card .face {
  width: 300px;
  height: 200px;
  transition: 0.4s;
}

.container .card .face.face1 {
  position: relative;
  background: #333;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
}

.container .card:hover .face.face1 {
  transform: translateY(0);
  box-shadow: inset 0 0 50px rgb(195, 0, 255),
    inset 20px 0 80px rgb(195, 0, 255), inset -20px 0 80px rgb(161, 161, 161),
    inset 20px 0 300px rgb(195, 0, 255), inset -20px 0 300px rgb(161, 161, 161),
    0 0 50px rgb(161, 161, 161), -10px 0 80px rgb(195, 0, 255),
    10px 0 80px rgb(161, 161, 161);
  border-radius: 20% 20% 0px 0px;
}

.container .card .face.face1 .content {
  opacity: 0.2;
  transition: 0.5s;
  text-align: center;
}

.container .card:hover .face.face1 .content {
  opacity: 1;
}

.container .card .face.face1 .content i {
  font-size: 3em;
  color: white;
  display: inline-block;
}

.container .card .face.face1 .content h3 {
  font-size: 1em;
  color: white;
  text-align: center;
}

.container .card .face.face1 .content a {
  transition: 0.5s;
}

.container .card .face.face2 {
  position: relative;
  background: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  transform: translateY(-100px);
}

.container .card:hover .face.face2 {
  transform: translateY(0);
}

.container .card .face.face2 .content p,
a {
  font-size: 10pt;
  margin: 0;
  padding: 0;
  color: #333;
}

.container .card .face.face2 .content a {
  text-decoration: none;
  color: black;
  box-sizing: border-box;
  padding: 10px;
  margin: 15px 0 0;
  display: inline-block;
}

.container .card .face.face2 .content a:hover {
  background: #333;
  color: whitesmoke;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.titulo {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px / normal "Warnes", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1),
    0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ae00ff, 0 0 70px #cc00ff,
    0 0 80px #cc00ff, 0 0 100px #c300ff;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.titulo:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1),
    0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff,
    0 0 80px #00ffff, 0 0 100px #00ffff;
}

Tras pegar el código dentro del archivo, solo queda guardar y cerrar. Ahora para ejecutar este ejemplo, bastará con hacer doble clic sobre el archivo llamado index.html y dejar que se abra con el navegador web.

Si quieres comprobar cómo se ve este ejemplo antes de ejecutarlo en local, puedes verlo funcionando en el siguiente enlace.

Y bueno, eso es todo. Estas son las tarjetas que utilicé para crear las tarjetas de presentación que puse en la web por la que me preguntaba este usuario. Evidentemente no son iguales, pues las modifiqué para adaptarlas al estilo de esta web de presentación. Pero bueno, cada cual que modifique el código a su gusto.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.