Diseño de un Card en HTML, CSS ó Javascript, ideal para mostrar los datos de un perfil

Para diseñar tarjetas personalizadas con CSS escribimos reglas CSS afectando a contenedores o capas modificando width, margin, padding, background, etc

Ver video en

Suscríbete a nuestro canal en Youtube

Para diseñar tarjetas o card personalizadas con CSS escribimos reglas CSS afectando a contenedores o capas modificando width, margin, padding, background, previamente necesitamos planificar el diseño. Pero aqui vamos de frente al código.

Diseño de un Card Animado con HTML, CSS y Javascript
Código HTML
Código CSS
Código Javascript
Diseño de Card solo con CSS
Descarga del código del Card

Card con HTML, CSS y Javascript

Usaremos variables para contener los colores de las tarjetas,
Usaremos clases para manipular los elementos html
Flex para distribuir los botones o enlaces del card con secciones

Veamos un ejemplo sencillo.

Código HTML - La estructura

    <div id="app">
        <div class="card">
            <div class="card_image">
                <img src="img/adriana.jpg" class="picture" alt="Dev">
            </div>
            <div class="card_body">
                <h2>Adriana Gamarra</h2>
                <p>Web Designer</p>
            </div>
            <div class="card_redes">
                <div><p>100</p><a href="#" class="link">Fb</a></div>
                <div><p>134</p><a href="#" class="link">In</a></div>
                <div><p>98</p><a href="#" class="link">Tw</a></div>                
            </div>
            <div class="card_footer">
                <a href="#" class="btn">Contact</a>
                <a href="#" class="btn">Portfolio</a>
            </div>   
        </div>
    </div>

Código CSS - El diseño

Los estilos estan estructurados de la siguiente manera:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
        *{font-family: 'Roboto', sans-serif; margin: 0;}
        body{ background: crimson;}
        #app{
            height: 100vh;
            display: grid;
            justify-content: center;
            place-items: center;            
        }
        .card{
            display: flex;
            flex-direction: column;
            align-items: center;            
            width: 300px;
            margin: 0 auto;
            background:linear-gradient(rgb(245 215 189) 30%, rgb(255, 255, 255) 30%);
            box-shadow: 0 0 25px darkred ;
            border-radius: 10px;
            padding: 50px 16px;
        }
        .card_image{
            position: relative;
            height: 150px;
            width: 150px;
        }
        .card_image .picture{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid rgb(250, 238, 227);
            box-shadow: 0 5px 20px rgba(0,0,0,0.4);
        }
        .card_body{ text-align: center; padding: 20px; }
        .card_body h2{ color: peru; margin-bottom: 5px;}
        .card_body p{color: gray; margin-top: 5px;}
        .card_redes{
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .card_redes div{
            padding: 10px;
            text-align: center;
            background:papayawhip;
            border-radius: 6px;
            width: 100%;
            margin: 10px;
        }
        .card_redes div p{
            font-size: 20px;
            margin: 0;
        }
        .card_redes div a{
            text-decoration: none;
            color: peru;
        }

        .card_footer{
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
        }
        .card_footer .btn{
            padding: 8px 20px;
            border-radius: 25px;
            color: #fff;
            text-decoration: none;
            margin: 0 20px;
            background: linear-gradient(to left,rgb(245 215 189) 0%,rgb(237, 166, 104) 100%);
            transition: all 2s ease;
        }
        .card_footer .btn:hover{
            padding: 8px 30px;
            background: linear-gradient(to left,rgb(255, 161, 79) 0%,rgb(237, 166, 104) 100%);
        }
        /* ANIMACIONES CSS */
        @keyframes _in {
            0%{ border-radius: 50%}            
            100%{ border-radius: 0%; transform: scale(1.2);}
        }

        @keyframes _out {
            0%{ border-radius: 0%;transform: scale(1.2);}
            100%{ border-radius: 50%; transform: scale(1);}                        
        }

Código Javascript - La interactividad

En la sección de JS invocamos al evento mouseover y mouseout que agrega y/o quita una determinada animacion registrada en los estilos CSS, esto nos permite tener el efecto de la imagen:

Cambiar la imagen de circular a cuadrada con border-radius
Cambiar el tamaño de la imagen con scale


let card = document.querySelector(".card")
        let image = document.querySelector(".picture")
        card.addEventListener("mouseover",e=>{              
            image.style.animation = `_in 0.5s ease forwards `
        })
        card.addEventListener("mouseout",e=>{              
            image.style.animation = `_out 0.5s ease forwards `
        })

Card solo con CSS

Aqui tenemos una versión solo con CSS donde manipulamos un elemento desde otro

El código CSS app.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
*{ 
    font-family: 'Roboto', sans-serif;
    margin: 0;
}
:root{
    --colorLight: papayawhip;    
    --colorDark: brown;
    --colorSecondary: peachpuff;
    --colorPrimary:coral;
}
body{
    background: crimson;
}
#app{
    height: 100vh;
    display: grid;
    justify-content: center;
    place-items: center;
}
.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    background: linear-gradient(
        var(--colorSecondary) 25%, 
        var(--colorLight) 25%
        );
    box-shadow: 0 0 25px var(--colorDark);
    border-radius: 10px;
    padding: 50px 16px;    
}
.card_image{
    position: relative;
    height: 150px;
    width: 150px;
    
}
.card_image .picture{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid  var(--colorLight);
    box-shadow: 0 5px 0px var(--colorDark);
}
.card_body{
    text-align: center;
    padding: 20px;
}
.card_body h2{
    color: var(--colorDark);
}

.card_redes{   
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.card_redes div{
    padding: 10px;
    text-align: center;
    background: var(--colorSecondary);
    border-radius: 6px;
    width: 100%;
    margin: 10px;
}
.card_redes div p{
    font-size: 20px;
}
.card_redes div a{
    text-decoration: none;
    color: var(--colorDark);
}
.card_footer{
    padding-top: 25px;
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.card_footer .btn{
    padding: 8px 20px;
    border-radius: 25px;
    color: var(--colorDark);
    text-decoration: none;
    background: var(--colorSecondary);
    transition:  all 1s ease;
    
}
.card_footer .btn:hover{        
    background:var(--colorDark);
    color:var(--colorLight);
}

.card > .card_image > .picture{    
    transition: all 0.7s;
}

.card:hover > .card_image > .picture{
    border-radius: 5%;
    box-shadow: 0 0px 40px var(--colorDark);
    transform: translateY(-50%) scale(1.5);
}
.card:hover{    
    background: linear-gradient(
        var(--colorSecondary) 25%, 
        var(--colorSecondary) 25%
        );
}

.card .plus{
    position: relative;
    left: 55%;   
    top: -90px; 
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 5px;
    padding: 5px;
    background-color: white;
    color: var(--colorDark);
}

Y el código HTML es:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>UI: DESIGN CARD HTML CSS</title>   
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <div id="app">
        <div class="card">
            <div class="card_image">
                <img src="img/adriana.jpg" 
                class="picture">
            </div>
            <div class="plus">+</div>
            <div class="card_body">
                <h2>Adriana Gamarra</h2>
                <p>Web Designer</p>
            </div>
            <div class="card_redes">
                <div>
                    <p>100</p>
                    <a href="#" class="link">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
                        <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
                      </svg></a>
                </div>
                <div>
                    <p>134</p>
                    <a href="#" class="link">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                        <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
                      </svg></a>
                </div>
                <div>
                    <p>98</p>
                    <a href="#" class="link">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tiktok" viewBox="0 0 16 16">
                        <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
                      </svg></a>
                </div>
            </div>
            <div class="card_footer">
                <a href="#" class="btn">Contact</a>
                <a href="#" class="btn">Projects</a>
            </div>
            
        </div>
    </div>
</body>
</html>

Leido 15227 veces