Add CSS Filter Effects to Images - Picturesque

File Size: 939 KB
Views Total: 635
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Add CSS Filter Effects to Images - Picturesque

Picturesque is an online tool that provides a convenient interface to visualize your images with CSS filter effects and get the corresponding CSS styles after the filters have been applied.

Supported CSS Filters:

  • blur
  • brightness
  • contrast
  • deg
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia

How to use it:

1. Create a group of sliders to adjust the filter props.

<div class="filter__content">
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            blur
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">px</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="20" step=".01" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            brightness
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit"></p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="5" step="0.001" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            contrast
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">%</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="500" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            grayscale
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">%</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="100" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            hue-rotate
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">deg</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="360" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            invert
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">%</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="100" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            opacity
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">%</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="100" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            saturate
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">%</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="500" disabled>
      </div>
   </div>
   <div class="filter__prop">
      <div class="filter__prop--title">
         <div class="toggle-btn">
            <div class="toggle-thumb"></div>
         </div>
         <h2 class="prop__title heading-secondary">
            sepia
         </h2>
      </div>
      <div class="filter__prop--slider">
         <div class="range__value">
            <div class="range__content">
               <p class="range__num">0</p>
               <p class="range__unit">%</p>
            </div>
         </div>
         <input type="range" class="range" value="0" min="0" max="100" disabled>
      </div>
   </div>
</div>

2. Create a code block in which you want to display the CSS output.

<div class="codeblock">
  <h2 class="code__desc">
      How it all happened?
  </h2>
  <code id="code" class="code__block">
      Not yet styled!
  </code>
</div>

3. Create reset and image upload buttons.

<div class="buttony">
  <label class="btn-upload" for="upload">
      Upload your own image!
      <input type="file" id="upload" name="image" accept="image/*">
  </label>
  <button class="btn" id="reset">
      Reset All
  </button>
</div>

4. Create a picture box to show the preview & original images.

<div class="picture">
  <div class="picture__box">
      <img id="edit" class="picture__img" src="1.jpg" alt="person-on-a-bridge">
  </div>
  <div class="picture__box">
      <img id="original" class="picture__img" src="1.jpg" alt="person-on-a-bridge">
  </div>
</div>

5. Load jQuery JavaScript library and other required files in the document. That's it.

<link rel="stylesheet" href="/path/to/css/styles.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/index.js"></script>

Changelog:

2020-05-27

  • Add emojis and bold text with target blanks

2020-05-25


This awesome jQuery plugin is developed by heytulsiprasad. For more Advanced Usages, please check the demo page or visit the official website.