article thumbnail image
Published 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);
-->

LIST
복사했습니다!