Front End/Tailwind CSS
[Tailwind] Filters
닥치고개발
2022. 10. 22. 23:54
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Filters</title>
</head>
<body>
<!-- Blur -->
<div class="blur-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nulla, sunt iusto earum repudiandae a in. Blanditiis nihil sapiente eius eaque perspiciatis pariatur suscipit aperiam soluta, dolores quas quisquam illo?
</div>
<div class="blur">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nulla, sunt iusto earum repudiandae a in. Blanditiis nihil sapiente eius eaque perspiciatis pariatur suscipit aperiam soluta, dolores quas quisquam illo?
</div>
<div class="blur-sm">
<img src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
</div>
<!-- Brightness -->
<img class="brightness-50" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="brightness-75" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="brightness-90" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="brightness-100" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="brightness-200" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<!-- Contrast -->
<img class="contrast-0" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="contrast-50" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="contrast-100" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="contrast-150" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="contrast-200" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<!-- Grayscale -->
<img class="grayscale" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<!-- Invert -->
<!-- <img class="inventt" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class=""> -->
<!-- Sepia -->
<img class="sepia" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<!-- Hue Rotate -->
<img class="hue-rotate-0" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="hue-rotate-15" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="hue-rotate-90" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
<img class="hue-rotate-180" src="https://ggsc.s3.amazonaws.com/images/made/images/uploads/The_Science-Backed_Benefits_of_Being_a_Dog_Owner_600_400_int_c1-2x.jpg" alt="" class="">
</body>
</html>
<!-- Blur
blur-none filter: blur(0);
blur-sm filter: blur(4px);
blur filter: blur(8px);
blur-md filter: blur(12px);
blur-lg filter: blur(16px);
blur-xl filter: blur(24px);
blur-2xl filter: blur(40px);
blur-3xl filter: blur(64px);
-->
<!-- Brightness
brightness-0 filter: brightness(0);
brightness-50 filter: brightness(.5);
brightness-75 filter: brightness(.75);
brightness-90 filter: brightness(.9);
brightness-95 filter: brightness(.95);
brightness-100 filter: brightness(1);
brightness-105 filter: brightness(1.05);
brightness-110 filter: brightness(1.1);
brightness-125 filter: brightness(1.25);
brightness-150 filter: brightness(1.5);
brightness-200 filter: brightness(2);
-->
<!-- Contrast
contrast-0 filter: contrast(0);
contrast-50 filter: contrast(.5);
contrast-75 filter: contrast(.75);
contrast-100 filter: contrast(1);
contrast-125 filter: contrast(1.25);
contrast-150 filter: contrast(1.5);
contrast-200 filter: contrast(2);
-->
<!-- Hue Rotate
hue-rotate-0 filter: hue-rotate(0deg);
hue-rotate-15 filter: hue-rotate(15deg);
hue-rotate-30 filter: hue-rotate(30deg);
hue-rotate-60 filter: hue-rotate(60deg);
hue-rotate-90 filter: hue-rotate(90deg);
hue-rotate-180 filter: hue-rotate(180deg);
-->
728x90