css 特殊効果_html/css_WEB-ITnose

CSS 特殊効果
2 つの CSS 特殊効果を紹介します
1、ぼかしフィルター
まず効果を見てみましょう:

フィルター効果なしのインターフェイスを比較します:

CSS クラスを追加することで実現します:

.ui-modal-mask-blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); -o-filter: blur(2px); filter: blur(2px); }

jsコード:
ダイアログボックスが表示されたらフィルターを追加します:

if (arguments.length > 2 && showOverlay) {    $cboxOverlay.height($(document).height());    $("div.controller2").addClass('ui-modal-mask-blur');    $cboxOverlay.show();    }

「ぼかしフィルター」を削除します:

var hideCboxOverlay = function () {    $cboxOverlay.hide();    var $controller2 = $('div.controller2');    if ($controller2.hasClass('ui-modal-mask-blur')) {        $controller2.removeClass('ui-modal-mask-blur');    }}

2、境界線をぼかします
最初に効果を確認します

CSS スタイル:

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*/ }

最終的な効果については、を参照してください:
特殊効果を見る