Tabla de contenido
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.
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.
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.