Add CSS Filter Effects to Images - Picturesque
| File Size: | 939 KB |
|---|---|
| Views Total: | 657 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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
- Styles updated
This awesome jQuery plugin is developed by heytulsiprasad. For more Advanced Usages, please check the demo page or visit the official website.
