Diseño de Card con CSS

¿Cómo diseñar tarjetas o cards con CSS?

Diseño de Card con CSS

¿Cómo diseñar tarjetas o cards con CSS?

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

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

Diseño de un Card Simple y otro con Secciones

  • 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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CARD CSS</title>
    <style>
        :root{
           --card-color: rgba(54, 0, 204, 0.555);
           --card-header-color: crimson;
           --card-body-color: rgb(40, 4, 124);
           --card-footer-color: indigo;
        }
        .card{
            margin: 0 auto;
            background: var(--card-color);
            color:rgb(255, 255, 255);
            width: 400px;
            padding: 20px;
            box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.377);
            border-radius: 20px;            
        }
        .card-header{
            background: var(--card-header-color);            
            margin: -20px;
            padding: 20px;
            border-radius: 20px 20px 0px 0px;
        }
        .card-body{
            background: var(--card-body-color);
            margin: -20px;
            padding: 20px;
            border-radius: 00px 00px 20px 20px;
        }
        .card-footer{
            background: var(--card-footer-color);
            margin: -20px;
            padding: 20px;
            border-radius: 00px 00px 20px 20px;
            display: flex;
            justify-content: space-between
        }
        a{
            padding: 8px;
            margin: 2px;
            border-radius: 5px;
            border: 1px solid white;
            width: 100%;
            text-align: center;
            color: white;
            text-decoration: none;
        }
        a:hover{
            color: var(--card-body-color);
            background:white;
        }
    </style>
</head>
<body>

    <div class="card">
        <h1>CARD SIMPLE</h1>
        <p>Lorem ipsum dolor siusamus reprehenderit aliquid, iusto voluptatum similique blanditiis eveniet. Exercitationem fugiat, nesciunt, veritatis optio quo, cupiditate eaque vitae quisquam nam repellendus atque numquam.</p>
    </div>

    <br>

    <div class="card">
        <div class="card-header">
            <h1>CARD CON SECCIONES</h1>
        </div>
        <div class="card-body">
            <p>Lorem iprehenderit aliquid, iustoiis eveniet. Exercitationem fugiat, nesciunt, veritatis optio quo, cupiditate eaque vitae quisquam nam repellendus atque numquam.</p>
        </div>
        <div class="card-footer">
            <a href="">Link</a>
            <a href="">Link</a>
        </div>
    </div>

</body>
</html>

 

¿Quieres descargar el código fuente Diseño de Card con CSS?
...por favor suscríbete gratuitamente para descargarlo

CSS

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 151 veces | Publicado hace 1 mes

Curso Diseño Web con Bootstrap 4.5

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

DESCARGAR ARCHIVOS

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021