Canvas learning (nineteen): ten special effects of css3 filter

When I followed the teacher on the MOOC online to learn "using canvas to play with red envelopes", I felt that the filter special effect taught by the teacher was cool, so I followed the teacher's example and pondered it, and here is a record.

I don't talk about what the filter of css3 is here. If you are interested, you can read it here .

The ten properties of filter are:

grayscale: grayscale, the value range is 0-1 (representing 0% primary color to 100% gray), the default value is 1
sepia: brown, the value range is 0-1 (representing 0% primary color to 100% brown), Default value 1
saturate: saturation, default value 1
hue-rotate: hue rotation, value range 0-360deg, default 0deg
invert: inverse color, value range 0-1, default value 1
opacity: transparency, value range 0 -1 (completely transparent to completely opaque), the default is 1
brightness: brightness, the value range is 0-1 (the smaller the number, the darker, the larger the brighter), the default is 1
contrast: the contrast, the default is 1
blur: blur, number The bigger the blur, the default is 0, no blur
drop-shadow: shadow

The following examples can be switched to see each effect:

The rendering of the

example: the code of the example:

Page structure:

<body>
	<div id="left_control">
		<image id="pro_image" src="cat.jpg">
	</div>
	<div id="right_control">
		<image id="next_image" src="cat.jpg">
	</div>
	
	<div id="btn_control">
		<div id="grayscale_btn" class="color_btn color_btn_selected" onclick="modifyFilter(this,1);">grayscale</div>
		<div id="sepia_btn" class="color_btn" onclick="modifyFilter(this,1);">sepia</div>
		<div id="saturate_btn" class="color_btn" onclick="modifyFilter(this,3);">saturate</div>
		<div id="hue-rotate_btn" class="color_btn" onclick="modifyFilter(this,'180deg');">hue-rotate</div>
		<div id="invert_btn" class="color_btn" onclick="modifyFilter(this,1);">invert</div>
		<div id="opacity_btn" class="color_btn" onclick="modifyFilter(this,0.5);">opacity</div>
		<div id="brightness_btn" class="color_btn" onclick="modifyFilter(this,0.5);">brightness</div>
		<div id="contrast_btn" class="color_btn" onclick="modifyFilter(this,3);">contrast</div>
		<div id="blur_btn" class="color_btn" onclick="modifyFilter(this,'5px');">blur</div>
		<div id="drop-shadow_btn" class="color_btn" onclick="modifyFilter(this,'10px 10px 10px #aaa');">drop-shadow</div>
		<div class="clearfix"></div>
	<div>
</body>

CSS style:

#left_control{float:left;}
#right_control{float:right;}
#btn_control{clear:both;width:1150px;margin:0 auto;}
#pro_image{margin:0px 10px 0px 20px;width:650px;height:650px;}
#next_image{margin:0px 20px 0px 10px;width:650px;height:650px;filter:grayscale(1);}

.color_btn{
	float:left;
	margin:10px 5px 0 0;
	border:5px solid white;
	width:100px;
	height:40px;
	line-height:40px;
	border-radius:10px 10px;
	cursor:pointer;
	background-color:#075A8C;
	text-align:center;
	color:white;
}

.color_btn:hover{
	border:5px solid violet;
}

.color_btn_selected{
	background-color:#CD080F;
}

.clearfix{
	clear:both;
}

JS：

function modifyFilter(obj,value){
	$(".color_btn_selected").removeClass("color_btn_selected");
	$(obj).addClass("color_btn_selected");
	var filter = $ (obj) .text ();
	//alert(filter+"("+value+")");
	document.getElementById("next_image").style.filter=filter+"("+value+")";
}

The renderings of the ten special effects are as follows:

Finally, thank you teacher for sharing!

Canvas learning (nineteen): ten special effects of css3 filter

Guess you like