css special effects
Introducing two css special effects
1, blur filter
Let’s take a look at the effects first:
Comparison Here is an interface without filter effect:
Achieved by adding css class:
.ui-modal-mask-blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); -o-filter: blur(2px); filter: blur(2px); }js code:
Add filter when the dialog box pops up:
if (arguments.length > 2 && showOverlay) { $cboxOverlay.height($(document).height()); $("div.controller2").addClass('ui-modal-mask-blur'); $cboxOverlay.show(); }Remove "blur filter":
var hideCboxOverlay = function () { $cboxOverlay.hide(); var $controller2 = $('div.controller2'); if ($controller2.hasClass('ui-modal-mask-blur')) { $controller2.removeClass('ui-modal-mask-blur'); }}2, blur border
Let’s see the effect first
css style:
div.shadow { -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=143, Color=#EA4748)"; /*IE 8*/ -moz-box-shadow: 4px 3px 10px #EA4748; /*FF 3.5+*/ -webkit-box-shadow: 4px 3px 10px #EA4748; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ box-shadow: 4px 3px 10px #EA4748; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#EA4748); /*IE 5.5-7*/ }See the final effect:
View special effects
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
