Folding Card Effect with HTML and CSS @rayen-code

Rayen

In the realm of web design, creative and interactive elements can captivate users and enhance the overall user experience. In this tutorial, we'll delve into the art of designing a folding card effect using HTML and CSS. This dynamic effect brings a touch of sophistication to your website, making content unveiling a visually appealing and engaging experience.




Step 1: HTML Markup:

Initiate the tutorial by defining the HTML structure for your folding card. Create a container for the card, dividing it into sections that will fold and unfold.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Folding Card Effect</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
     <div class="card">Fold me!</div>
</body>
</html>

Step 2: Styling with CSS:

Create a dedicated CSS file (style.css) to apply the folding card styles and animations. Utilize CSS transitions and transformations to achieve the folding effect.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #212121;
}

.card {
    position: relative;
    width: 230px;
    height: 300px;
    background: #bf0426;
    font-size: 25px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    background: linear-gradient(135deg, #212121 0%, #212121 50%, #790117 50%, #bf0426 53%);
    top: 0;
    left: 0;
    box-shadow: 4px 4px 4px #0000004d;
    border-radius: 0 0 8px 0;

    transition: 0.3s;
}

.card:hover::before {
    height: 95px;
    width: 95px;
}

.card::after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: linear-gradient(135deg, #bf0426 40%, #96041f 50%, #212121 50%, #212121 53%);
    bottom: 0;
    right: 0;
    box-shadow: -2px -2px 4px #0000004d;
    border-radius: 8px 0 0 0;

    transition: 0.3s;
}

.card:hover::after {
    height: 50px;
    width: 50px;
}

Personalize the folding card by adjusting colors, sizes, and content for the front and back sections. Experiment with different rotation angles for variations in the folding effect.

0 Comments