Inicio » Blog » HTML + CSS

19 julio, 2022

Diseño de un Card Animado con CSS

Veamos como diseñar una tarjeta solo con CSS con efectos como bordes difuminados usando filtros css, ademas de keyframes, aplicando a la tarjeta y el texto

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

Es este pequeño tutorial diseñaremos un Card con HTML y CSS, donde una de las principales características es la animación de los bordes con colores que van cambiando, además de un extra con el texto dotado de una animación peculiar que les puede agradar. El inconveniente es que usa mucho la memoria del computador, pero se puede optimizar.

Bueno ...vamos de frente al punto... que es ver el código ...si o no es lo que nos interesa realmente:

 

CÓDIGO CSS DEL CARD ANIMADO

        .efecto-texto{
            text-align: center;
            overflow: hidden;
            filter: contrast(150%) brightness(1500%);
            position: relative;
        }
        .texto{
            color: white;
            text-align: center;           
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            margin: 0;
            background: black;
            position: relative;
            letter-spacing: 5px;
            
        }
        .texto::before,.texto::after{
            content: attr(data-texto);            
            color: white;
            position:absolute;
            top: 0 ; 
            left: 50%;
            transform: translate(-50%, 0%);
            pointer-events: none;
            filter: blur(0.02em);  
        }
        .texto::after{
            mix-blend-mode: difference;
        }
        .gradiente,.luces{
            position: absolute;
            top: 0;   
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
        }
        .gradiente{
            background: linear-gradient(0deg, rgb(255, 0, 98), rgb(255, 166, 0));
            mix-blend-mode: multiply;
        }
        .luces{
            top: -100%;
            left: -100%;
            background: 
                radial-gradient(circle, white, transparent 25%) 0 0 / 25% 25%, 
                radial-gradient(circle, white, black 25%) 50% 50% / 12.5% 12.5%;
            mix-blend-mode: color-dodge;
            animation: animate 5s linear infinite;
        }
        @keyframes animate{
            100%{ transform: translate(50%, 50% );}
        }
        body,.bg-dark{ background: black !important;}
        ._card {
            position: relative;
            margin: 10% auto 0;
            width: 90%;
            height: auto;
        background: linear-gradient(90deg, #000, #323232); 
        border-radius: 30px
        }
        ._fondo:before, ._fondo:after {
            content: '';
            position: absolute;
            left: -8px;
            top: -8px;
            background: linear-gradient(120deg, #79fb00, #8d01a0, #031ba5,#ff004c,  
            #e6036d, #fb0094,#ff6600, #04c2e4,#adad02, #00c3ff);
            background-size: 300%;
            width: calc(100% + 16px);
            height: calc(100% + 16px);
            z-index: -1;
            animation: _fondogradiente 15s ease infinite; 
            border-radius: 40px
        }
        @keyframes  _fondogradiente {
            0% { background-position: 0% 200%; }
            50% { background-position: 200% 0%; }
            100% { background-position: 0% 330%;}
        }
        ._fondo:after {
            filter: brightness(1.4);
            filter: drop-shadow(16px 16px 20px rgb(248, 220, 97));
            filter: blur(15px);
        }

 

CODIGO HTML DEL CARD ANIMADO

<!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">
    <title> ANIMACIÓN CSS </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row justify-content-center mt-5 mb-5">
            <div class="col-sm-4">
                <!-- card -->
                <div class="card bg-dark _card _fondo rounded-5">
                    <div class="card-body">
                        <div class="text-danger text-center mt-5 fs-1">codea.app</div>
                        <div class="efecto-texto mt-5 mb-5">
                            <p class="texto display-3" data-texto="ANIMACIÓN CSS">ANIMACIÓN CSS</p>
                            <div class="gradiente"></div>
                            <div class="luces"></div>
                        </div>
                        <div class="text-center mt-5 mb-5">
                            <button class="btn btn-outline-danger btn-sm rounded-pill pt-0"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16">
                                <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
                              </svg></button>
                        </div>
                    </div>
                </div>
                <!--//card -->
            </div>
        </div>
    </div>

</body>
</html>

Concluyendo pues estamos usando bootstrap...y escribiendo nuestro propio código para lograr el efecto deseado... pueden modificar valores para obtener un resultado acorde a sus intereses.


Leido 5000 veces

Descarga el código fuente HTML + CSS

Recurso descargado 228 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023