-webkit-mask CSS Mask Clip Effect using HTML & CSS @rayen-code

Rayen

Embark on a journey of artistic expression with our -webkit-mask Text Mask Effect tutorial. In this guide, we'll explore the power of HTML and CSS to create captivating text masks, adding a touch of flair to your web design repertoire.




Step 1: HTML Markup:

Begin by structuring your HTML to include the text element you wish to mask. Define the container and the text element, setting the stage for your creative text masking.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transparent Text</title>

    <!-- style css  -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="image"></div>
        <div class="left">
            <h1>Col</h1>
        </div>
        <div class="right">
            <div class="wrapper">
                <h1>or</h1>
                <p>only <span>CSS</span></p>
            </div>
        </div>
    </div>
</body>

</html>

Step 2: Styling with CSS:

Elevate your text masking effect with CSS styles. Customize the appearance and define the mask pattern to create visually stunning text transformations.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.container {
    width: 100%;
    height: 100vh;
    position: relative;
}

.image {
    width: 100%;
    height: 100%;
    background: url("https://images.unsplash.com/photo-1627133833133-adbd0b0e0e50?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size: cover;
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    backdrop-filter: blur(40px);
    background: rgba(255, 255, 255, 0.1);


    -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: text, padding-box;
    -webkit-mask-composite: xor;
}

.left h1 {
    font-size: 20rem;
    text-shadow: 0 0 3px white;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.right .wrapper {
    position: relative;
}

.wrapper h1 {
    font-size: 20rem;
    color: white;
}

.wrapper p {
    color: white;
    font-size: 3rem;
    position: absolute;
    right: 0;
    bottom: -5%;
    font-weight: 100;
}

.wrapper p span {
    font-weight: 900;
    font-size: 5rem;
}

In conclusion, the -webkit-mask Text Mask Effect unleashes your creativity by transforming plain text into visually captivating artwork. With HTML and CSS, you can create unique text masks that elevate the visual appeal of your web content.

0 Comments