HOW TO CREATE Working with Backdrop Filters USING STRONG AND ADVANCE LAN...

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title>Working with Backdrop Filters</title>

<link rel="stylesheet" type="text/css" href="a.css">

</head>

<body>

<header><h1>backdrop-filter</h1></header>

<main>

  <div class="card" style="--filter:blur(10px)">Blur 10px</div>

  <div class="card" style="--filter:brightness(60%)">Brightness 60%</div>

  <div class="card" style="--filter:contrast(40%)">Contrast 40%</div>

  <div class="card" style="--filter:drop-shadow(4px 4px 10px blue)">Drop Shadow</div>

  <div class="card" style="--filter:grayscale(60%)">Grayscale 60%</div>

  <div class="card" style="--filter:hue-rotate(120deg)">Hue Rotate 120deg</div>

  <div class="card" style="--filter:invert(70%)">Invert 70%</div>

  <div class="card" style="--filter:opacity(20%)">Opacity 20%</div>

  <div class="card" style="--filter:sepia(90%)">Sepia 90%</div>

  <div class="card" style="--filter:saturate(80%)">Saturate 80% </div>

  <div class="card" style="--filter: hue-rotate(270deg) blur(5px)">

    <p>Hue Rotate 270deg</p>

    <p>Blur 5px</p>


  </div></main>


</body>

</html>

CSS SOURCE CODE

* {padding: 0;

margin: 0;

box-sizing: border-box;

font-family: "Poiret One", cursive;}

:root {

--hw: 150px;

--clr_light: hsl(0, 0%, 100%);}

body {

background-image: url("https://images.unsplash.com/photo-1659264734878-63ca3d2215e6?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1ODM1ODE&ixlib=rb-1.2.1&q=80");

background-size: cover;

min-height: 100vh;

padding: 20px;

display: grid;

place-content: center;

place-items: center;

color: var(--clr_light);}

h1 {

font-size: 3rem;

text-transform: uppercase;

padding: 5px;}

main {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 10px;

min-height: 90vh;}

.card {

width: var(--hw);

aspect-ratio: 1;

border-top: 1px solid var(--clr_light);

border-left: 1px solid var(--clr_light);

border-radius: calc(var(--hw) / 10);

backdrop-filter: var(--filter);

color: white;

padding: 10px;

box-shadow: 10px 10px 10px hsl(0 0% 35% / 25%);}

@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");







Tags

You May Like

Show more
Error 404: Results Not Found Use Correct /Label or /recent or /random code to Show Posts

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.