CSS Filter Glass

Developer
Yogev Ahuvia
Size
7,188 Kb
Views
26,312
  1. CSS Filter Glass Previews
  2. CSS Filter Glass HTML Codes
  3. CSS Filter Glass CSS Codes
  4. CSS Filter Glass JS Codes

How do I make an css filter glass?

Examine CSS filters through fluid resizable window glass. You can drag and drop an image file from your desktop onto the glass and see the filters manipulate your image live. Available filters are: grayscale, sepia, blur, brightness, contrast, invert, hue-rotate and saturate.. What is a css filter glass? How do you make a css filter glass? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

CSS Filter Glass Previews
IQ Test

CSS Filter Glass - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Filter Glass</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
/* keep 16:9 ratio */
.wrapper { width: 940px; margin: 20px auto; position: relative;
}
/*=== Title ===*/
hgroup { text-align: center; margin-bottom: 20px;
}
hgroup h1 { font-size: 30px; margin-bottom: 5px; text-shadow: 0px 1px 3px #999;
}
hgroup h3 { font-weight: 300;
}
/*=== Main View ===*/
.window { width: 800px; height: 450px; position: relative; overflow: hidden; float: left; margin: 0 20px 20px 70px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white;
}
.window.dragover { animation: shake 0.5s infinite linear;
}
.glass { width: 400px; height: 100%; position: absolute;
}
.glass.left { left: 0px; background-image: none; background-size: 800px; background-position: top left; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
}
.glass.right { right: 0px; background-image: none; background-size: 800px; background-position: top right; margin: -1px; padding: 1px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; /* should be 5px, chrome overflow fix */ -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
}
.handle { width: 2px; height: 100%; position: absolute; background: gray; z-index: 1; cursor: pointer; left: 399px;
}
.handle:after { content: '‹ ›'; text-align: center; font-family: serif; font-size: 24px; line-height: 26px; display: block; position: absolute; width: 30px; height: 30px; border-radius: 100%; top: 50%; left: 50%; margin: -15px 0 0 -15px; background: #ddd; -moz-box-shadow: 0px 1px 1px 0px #222, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 1px 0px #222, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 1px 0px #222, inset 0px 1px 1px 0px white;
}
/*=== Filter Menu ===*/
.filter-choice { float: left; width: 50px; height: 450px; position: relative;
}
.filter-choice > li { width: 50px; height: 28px; margin-bottom: 10px; position: relative; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.filter-choice > li.alt { position: absolute; bottom: 0; text-align: center;
}
.filter-choice > li.alt img:hover { background: #999; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 0px 0px 1px 0px #999; -webkit-box-shadow: 0px 0px 1px 0px #999; box-shadow: 0px 0px 1px 0px #999;
}
.filter-choice > li:hover:after { content: attr(data-filter); display: block; position: absolute; width: 100px; height: 100%; line-height: 26px; font-size: 12px; top: 0; left: 115%; -webkit-filter: none; filter: none;
}
.filter-choice > li input { display: block; width: 50px; height: 28px; cursor: pointer; margin: 0; background-size: 100%; background-repeat: no-repeat; -moz-appearance: none; -webkit-appearance: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: box-shadow 0.2s; -o-transition: box-shadow 0.2s; -webkit-transition: box-shadow 0.2s; transition: box-shadow 0.2s; -moz-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white;
}
.filter-choice > li input:hover { -moz-box-shadow: 0px 1px 2px 1px #999, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 2px 1px #999, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 2px 1px #999, inset 0px 1px 1px 0px white;
}
.filter-choice > li input:active, .filter-choice > li input:checked { -moz-box-shadow: inset 0px 1px 3px 1px #999, 0px 1px 1px 0px white; -webkit-box-shadow: inset 0px 1px 3px 1px #999, 0px 1px 1px 0px white; box-shadow: inset 0px 1px 3px 1px #999, 0px 1px 1px 0px white;
}
/*=== Filter Classes ===*/
.filter-grayscale { -webkit-filter: grayscale(1); filter: grayscale(1);
}
.filter-sepia { -webkit-filter: sepia(1); filter: sepia(1);
}
.filter-blur { -webkit-filter: blur(5px); filter: blur(5px);
}
.filter-brightness { -webkit-filter: brightness(0.5); filter: brightness(0.5);
}
.filter-contrast { -webkit-filter: contrast(10); filter: contrast(10);
}
.filter-hue-rotate { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg);
}
.filter-invert { -webkit-filter: invert(1); filter: invert(1);
}
.filter-saturate { -webkit-filter: saturate(10); filter: saturate(10);
}
input[type="radio"].filter-blur { /* blur filter fix for thumb */ -webkit-filter: blur(1px); filter: blur(1px);
}
/*=== Animations ===*/
@keyframes shake { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); } 75% { -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
body { font-family: 'Open Sans', sans-serif; background: #ddd; background-image: url(http://kindofone.me/resources/gray_jean.png);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <hgroup> <h1>CSS Filter Glass</h1> <h3>drag an image file from your desktop onto the glass</h3> </hgroup> <div class="window"> <div class="glass left img"></div> <div class="handle"></div> <div class="glass right filter-grayscale img"></div> </div> <ul class="filter-choice"> <li data-filter="grayscale"> <input type="radio" name="filter-choice-group" value="grayscale" class="filter-grayscale img" checked> </li> <li data-filter="sepia"> <input type="radio" name="filter-choice-group" value="sepia" class="filter-sepia img"> </li> <li data-filter="blur"> <input type="radio" name="filter-choice-group" value="blur" class="filter-blur img"> </li> <li data-filter="brightness"> <input type="radio" name="filter-choice-group" value="brightness" class="filter-brightness img"> </li> <li data-filter="contrast"> <input type="radio" name="filter-choice-group" value="contrast" class="filter-contrast img"> </li> <li data-filter="hue-rotate"> <input type="radio" name="filter-choice-group" value="hue-rotate" class="filter-hue-rotate img"> </li> <li data-filter="invert"> <input type="radio" name="filter-choice-group" value="invert" class="filter-invert img"> </li> <li data-filter="saturate"> <input type="radio" name="filter-choice-group" value="saturate" class="filter-saturate img"> </li> <li class="alt"> <a href="https://www.google.com/chrome" target="_blank"> <img src="http://kindofone.me/resources/icons/chrome-512.png" width="32" title="Chrome only" alt="Chrome only" /> </a> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Filter Glass - Script Codes CSS Codes

@charset "UTF-8";
/* keep 16:9 ratio */
.wrapper { width: 940px; margin: 20px auto; position: relative;
}
/*=== Title ===*/
hgroup { text-align: center; margin-bottom: 20px;
}
hgroup h1 { font-size: 30px; margin-bottom: 5px; text-shadow: 0px 1px 3px #999;
}
hgroup h3 { font-weight: 300;
}
/*=== Main View ===*/
.window { width: 800px; height: 450px; position: relative; overflow: hidden; float: left; margin: 0 20px 20px 70px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white;
}
.window.dragover { animation: shake 0.5s infinite linear;
}
.glass { width: 400px; height: 100%; position: absolute;
}
.glass.left { left: 0px; background-image: none; background-size: 800px; background-position: top left; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
}
.glass.right { right: 0px; background-image: none; background-size: 800px; background-position: top right; margin: -1px; padding: 1px; -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; border-top-right-radius: 8px; /* should be 5px, chrome overflow fix */ -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
}
.handle { width: 2px; height: 100%; position: absolute; background: gray; z-index: 1; cursor: pointer; left: 399px;
}
.handle:after { content: '‹ ›'; text-align: center; font-family: serif; font-size: 24px; line-height: 26px; display: block; position: absolute; width: 30px; height: 30px; border-radius: 100%; top: 50%; left: 50%; margin: -15px 0 0 -15px; background: #ddd; -moz-box-shadow: 0px 1px 1px 0px #222, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 1px 0px #222, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 1px 0px #222, inset 0px 1px 1px 0px white;
}
/*=== Filter Menu ===*/
.filter-choice { float: left; width: 50px; height: 450px; position: relative;
}
.filter-choice > li { width: 50px; height: 28px; margin-bottom: 10px; position: relative; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.filter-choice > li.alt { position: absolute; bottom: 0; text-align: center;
}
.filter-choice > li.alt img:hover { background: #999; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 0px 0px 1px 0px #999; -webkit-box-shadow: 0px 0px 1px 0px #999; box-shadow: 0px 0px 1px 0px #999;
}
.filter-choice > li:hover:after { content: attr(data-filter); display: block; position: absolute; width: 100px; height: 100%; line-height: 26px; font-size: 12px; top: 0; left: 115%; -webkit-filter: none; filter: none;
}
.filter-choice > li input { display: block; width: 50px; height: 28px; cursor: pointer; margin: 0; background-size: 100%; background-repeat: no-repeat; -moz-appearance: none; -webkit-appearance: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-transition: box-shadow 0.2s; -o-transition: box-shadow 0.2s; -webkit-transition: box-shadow 0.2s; transition: box-shadow 0.2s; -moz-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 2px 0px #999, inset 0px 1px 1px 0px white;
}
.filter-choice > li input:hover { -moz-box-shadow: 0px 1px 2px 1px #999, inset 0px 1px 1px 0px white; -webkit-box-shadow: 0px 1px 2px 1px #999, inset 0px 1px 1px 0px white; box-shadow: 0px 1px 2px 1px #999, inset 0px 1px 1px 0px white;
}
.filter-choice > li input:active, .filter-choice > li input:checked { -moz-box-shadow: inset 0px 1px 3px 1px #999, 0px 1px 1px 0px white; -webkit-box-shadow: inset 0px 1px 3px 1px #999, 0px 1px 1px 0px white; box-shadow: inset 0px 1px 3px 1px #999, 0px 1px 1px 0px white;
}
/*=== Filter Classes ===*/
.filter-grayscale { -webkit-filter: grayscale(1); filter: grayscale(1);
}
.filter-sepia { -webkit-filter: sepia(1); filter: sepia(1);
}
.filter-blur { -webkit-filter: blur(5px); filter: blur(5px);
}
.filter-brightness { -webkit-filter: brightness(0.5); filter: brightness(0.5);
}
.filter-contrast { -webkit-filter: contrast(10); filter: contrast(10);
}
.filter-hue-rotate { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg);
}
.filter-invert { -webkit-filter: invert(1); filter: invert(1);
}
.filter-saturate { -webkit-filter: saturate(10); filter: saturate(10);
}
input[type="radio"].filter-blur { /* blur filter fix for thumb */ -webkit-filter: blur(1px); filter: blur(1px);
}
/*=== Animations ===*/
@keyframes shake { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); } 75% { -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
body { font-family: 'Open Sans', sans-serif; background: #ddd; background-image: url(http://kindofone.me/resources/gray_jean.png);
}

CSS Filter Glass - Script Codes JS Codes

var imageWindow = $('.window');
var leftGlass = $('.glass.left');
var rightGlass = $('.glass.right');
var initialWidth = leftGlass.width();
// Drag and Drop event listeners
imageWindow.on('dragover', onDragOver);
imageWindow.on('dragenter', onDragEnter);
imageWindow.on('dragleave', onDragLeave);
imageWindow.on('drop', onDrop);
// Glass handle drag behavior
$('.handle').draggable({axis: 'x', containment: 'parent', drag: function(event, ui) { var handleOffset = ui.position.left - initialWidth; leftGlass.width(initialWidth + handleOffset); rightGlass.width(initialWidth - handleOffset); }
});
// Filter chooser events
$('input[name="filter-choice-group"]').on('click', function() { // remove any previous filter-* class from right glass rightGlass.removeClass(function (index, css) { return (css.match (/\bfilter-\S+/g) || []).join(' '); }); // add the selected filter class to the right glass rightGlass.addClass('filter-' + $(this).val());
});
setImage('http://kindofone.me/resources/TheOtherSideOfManhattan.jpg');
function setImage(uri) { $('.img').css('background-image', 'url('+uri+')');
}
// Drag And Drop event handlers
function onDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.originalEvent.dataTransfer.dropEffect = 'copy';
}
function onDragEnter(evt) { evt.stopPropagation(); evt.preventDefault(); $('.window').addClass('dragover');
}
function onDragLeave(evt) { evt.stopPropagation(); evt.preventDefault(); $('.window').removeClass('dragover');
}
// Thanks Eric Bidelman :)
function onDrop(evt) { evt.stopPropagation(); evt.preventDefault(); $('.window').removeClass('dragover'); // Allowed file types var allowedFileTypes = /image.*/; // Get dropped file object var file = evt.originalEvent.dataTransfer.files[0]; // Validate allowed type, or break if (!file.type.match(allowedFileTypes)) { return; } // Setup FileReader var reader = new FileReader(); reader.onerror = function(evt) { console.log('FileReader error: ' + e.target.error); } reader.onload = (function(aFile) { return function(evt) { // Set dropped file as current image setImage(evt.target.result); } })(file); reader.readAsDataURL(file);
}
CSS Filter Glass - Script Codes
CSS Filter Glass - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 4.5
Size 7,188 Kb
Views 26,312
Do you need developer help for CSS Filter Glass?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yogev Ahuvia (kindofone) Script Codes
Name
Tears Of Happiness
Thumbnail Animation Effects
Living Interfaces - Talk
Spinning Top
A Circular Form
Ball Bouncing On Text
Playing At Sunset
Subtle Buttons
Live Bricks
Natural Language Accordion Form
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!