ऐसा लगता है कि Apple का ओवरले सिर्फ एक पारदर्शिता से अधिक है। सीएसएस और संभवतः जेएस के साथ इस प्रभाव को कैसे प्राप्त किया जाए इस पर कोई विचार?
ऐसा लगता है कि Apple का ओवरले सिर्फ एक पारदर्शिता से अधिक है। सीएसएस और संभवतः जेएस के साथ इस प्रभाव को कैसे प्राप्त किया जाए इस पर कोई विचार?
जवाबों:
यह CSS3 के साथ संभव है:
#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}
यहाँ उदाहरण => jsfiddle
-moz-filter: blur()
। इसके बजाय आपको एसवीजी फ़िल्टर का उपयोग करना होगा, विवरण के लिए मेरा उत्तर देखें।
http://codepen.io/Edo_B/pen/cLbrt
का उपयोग करते हुए:
बस।
मेरा यह भी मानना है कि अगर किसी भी स्क्रीन का उपयोग कैनवास के लिए किया जा सकता है तो वर्तमान डोम को कॉपी करने और धुंधला करने के लिए।
[संपादित करें] भविष्य में (मोबाइल) सफ़ारी 9 -webkit-backdrop-filter
ठीक इसी के लिए होगी । इस पेन को देखें मैंने इसे दिखाने के लिए बनाया है।
मैंने पिछले 4 हफ्तों से इस बारे में सोचा और इस समाधान के साथ आया।
[संपादित करें] मैंने सीएसएस-ट्रिक्स पर एक अधिक अनिश्चित पोस्ट लिखी
यह तकनीक CSS क्षेत्रों का उपयोग कर रही है इसलिए ब्राउज़र का समर्थन इस समय सबसे अच्छा नहीं है। ( http://caniuse.com/#feat=css-regions )
इस तकनीक का प्रमुख भाग CSS क्षेत्र का उपयोग करके लेआउट से अलग सामग्री को विभाजित करना है। पहले एक .content
तत्व को परिभाषित करें flow-into:content
और फिर हेडर को धुंधला करने के लिए उपयुक्त संरचना का उपयोग करें।
लेआउट संरचना:
<div class="phone">
<div class="phone__display">
<div class="header">
<div class="header__text">Header</div>
<div class="header__background"></div>
</div>
<div class="phone__content">
</div>
</div>
</div>
इस लेआउट के दो महत्वपूर्ण भाग हैं .header__background
और .phone__content
- ये ऐसे कंटेनर हैं जहां सामग्री को प्रवाहित होना चाहिए।
सीएसएस क्षेत्रों का उपयोग करना सरल है flow-from:content
( .content
नामांकित क्षेत्र में बह रहा है content
)
मुश्किल हिस्सा यहां से शुरू होता है। हम हमेशा सामग्री को प्रवाहित करना चाहते हैं .header__background
क्योंकि वह वह भाग है जहां सामग्री को ब्लर किया जाएगा। (उपयोग करके webkit-filter:blur(10px);
)
यह द्वारा किया जाता है यह सुनिश्चित करें कि सामग्री हमेशा हालांकि प्रवाह होगा । यह परिवर्तन हमेशा हेडर के नीचे कुछ सामग्री को छुपाता है। इसे ठीक करना आसान जोड़ना हैtransfrom:translateY(-$HeightOfTheHeader)
.content
.header__background
.header__background:before{
display:inline-block;
content:'';
height:$HeightOfTheHEader
}
परिवर्तन के लिए समायोजित करने के लिए।
यह वर्तमान में काम कर रहा है:
यह तत्व शैली विशेषता के लिए फायरफॉक्स के साथ अब संभव है ।
यह प्रयोगात्मक विशेषता आपको पृष्ठभूमि छवि के रूप में किसी भी HTML सामग्री का उपयोग करने देती है। तो, पृष्ठभूमि बनाने के लिए आपको तीन ओवरले चाहिए:
-moz-element
सामग्री सेट करने वाली पृष्ठभूमि के साथ ओवरले करें । ध्यान दें कि FX filter: blur()
विशेषता का समर्थन नहीं करता है , इसलिए हमें एक एसवीजी की आवश्यकता है।तो, एक साथ रखा:
एसवीजी कलंक फ़िल्टर (एफएक्स में काम करता है, अन्य ब्राउज़र उपयोग कर सकते हैं filter:blur()
):
<svg>
<defs>
<filter id="svgBlur">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
</svg>
सीएसएस कलंक शैली:
.behind-blur
{
filter : url(#svgBlur);
opacity: .4;
background: -moz-element(#content);
background-repeat: no-repeat;
}
अंत में 3 परतें:
<div class="header" style="background-color: #fff"> </div>
<div class="header behind-blur"> </div>
<div class="header">
Header Text, content blurs behind
</div>
फिर इसे बस सेट करने के लिए चारों ओर ले जाएं background-position
(jQuery में नमूना लेकिन आप कुछ भी उपयोग कर सकते हैं):
$('.behind-blur').css({
'background-position': '-' + left + 'px -' + top + 'px'
});
इस डेमो पेज को देखें।
यह डेमो एक छवि के रूप में दस्तावेज़ को प्रस्तुत करने के लिए html2canvas का उपयोग करता है।
http://blurpopup.labs.daum.net/
इस कलम को मैंने दूसरे दिन पाया कि यह सुंदर तरीके से किया गया था, बस सीएसएस और जावास्क्रिप्ट की 21 लाइनें। जब तक मुझे यह नहीं मिला, मैंने क्लोनडॉन जेएस कमांड के बारे में नहीं सुना था, लेकिन यह पूरी तरह से काम के लिए काम करता था।
http://codepen.io/rikschennink/pen/zvcgx
डिटेल: A. मूल रूप से यह आपकी सामग्री div को देखता है और उस पर एक क्लोनकोड आमंत्रित करता है इसलिए यह एक डुप्लिकेट बनाता है जो इसे तब ओवरफ्लो के अंदर रखता है: पृष्ठ के शीर्ष पर छिपा हुआ हेडर ऑब्जेक्ट। ख। तो यह बस स्क्रॉल करने के लिए सुनता है ताकि दोनों चित्र हेडर छवि से मेल खाते हों और धुंधला हो जाएं ... एनएएनएम बीएएम। प्रभाव प्राप्त किया।
सीएसएस में वास्तव में पूरी तरह से सक्षम नहीं है जब तक कि उन्हें भाषा में निर्मित स्क्रिप्टबिलिटी का एकमुश्त हिस्सा नहीं मिल जाता है।
उदाहरण यहाँ है:
कल एक त्वरित डेमो किया जो वास्तव में आपकी बात कर रहा है। http://bit.ly/10clOM9 यह डेमो एक्सीलरोमीटर के आधार पर लंबन करता है इसलिए यह एक iPhone पर ही सबसे अच्छा काम करता है। मैं मूल रूप से केवल उस सामग्री की प्रतिलिपि बनाता हूं जिसे हम एक निश्चित स्थिति तत्व में ओवरलेइंग कर रहे हैं जो धुंधला हो जाता है।
नोट: पैनल को देखने के लिए ऊपर स्वाइप करें।
(मैं भयानक सीएसएस आईडी का उपयोग करता था लेकिन आपको यह विचार मिलता है)
#frost{
position: fixed;
bottom: 0;
left:0;
width: 100%;
height: 100px;
overflow: hidden;
-webkit-transition: all .5s;
}
#background2{
-webkit-filter: blur(15px) brightness(.2);
}
#content2fixed{
position: fixed;
bottom: 9px;
left: 9px;
-webkit-filter: blur(10px);
}
उस बारे में बहुत निश्चित नहीं हूं, मेरा मानना है कि सीएसएस फिलहाल ऐसा करने में सक्षम नहीं है
हालाँकि क्रिस कॉयर ने इस तरह के प्रभाव को प्राप्त करने के लिए कई चित्रों वाली एक पुरानी तकनीक के बारे में ब्लॉग किया है, http://css-tricks.com/blurry-background-effect/
इसे बाहर की जाँच करें http://codepen.io/GianlucaGuarini/pen/Hzrhf ऐसा लगता है कि यह बिना किसी तत्व की पृष्ठभूमि छवि को दोहराए बिना प्रभाव करता है। देखें कि ग्रंथ उदाहरण में भी धुंधला हो रहा है।
Vague.js
var vague = $blurred.find('iframe').Vague({
intensity:5 //blur intensity
});
vague.blur();
आज 11 अप्रैल 2020 तक , यह backdrop-filter
सीएसएस संपत्ति के साथ आसानी से संभव है जो अब क्रोम, सफारी और एज में एक स्थिर विशेषता है।
मैं अपने हाइब्रिड मोबाइल ऐप में ऐसा चाहता था ताकि Android / Chrome Webview & Safari WebView में भी उपलब्ध हो।
बस सीएसएस संपत्ति जोड़ें:
.my-class {
backdrop-filter: blur(30px);
background: transparent; // Make sure there is not backgorund
}
इसे इस कलम में काम करते हुए देखें या डेमो आज़माएँ:
#main-wrapper {
width: 300px;
height: 300px;
background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
background-size: cover;
position: relative;
overflow: hidden;
}
.my-effect {
position: absolute;
top: 300px;
left: 0;
width: 100%;
height: 100%;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
color: black;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
transition: top 700ms;
}
#main-wrapper:hover .my-effect {
top: 0;
}
<h4>Hover over the image to see the effect</h4>
<div id="main-wrapper">
<div class="my-effect">
Glossy effect worked!
</div>
</div>
चलो मैकडॉनल्ड्स ऐप का एक उदाहरण लेते हैं क्योंकि यह काफी रंगीन है। मैंने इसका स्क्रीनशॉट लिया और body
अपने ऐप के बैकग्राउंड के रूप में जोड़ा ।
मैं चमकदार प्रभाव के साथ इसके ऊपर एक पाठ दिखाना चाहता था। backdrop-filter: blur(20px);
इसके ऊपर के ओवरले का उपयोग करके , मैं यह देख पा रहा था: above
backdrop-filter
हालांकि अभी भी फ़ायरफ़ॉक्स में स्वचालित रूप से काम नहीं करता है। मुझे संदेह है कि उपयोगकर्ता backdrop-filter
इस प्रभाव को देखने के लिए जानबूझकर सक्रिय करने के विकल्पों को चालू करेंगे ।
मैं प्रेत के लिए समान प्रभाव प्राप्त करने के लिए svg फिल्टर का उपयोग कर रहा हूं
<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
<filter id="greyscale">
<feColorMatrix type="saturate" values="0"/>
</filter>
<image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
<feGaussianBlur stdDeviation="10"/>
उदाहरण।<image ...>
किसी भी छवि पर लागू करने के लिए टैग का उपयोग करें या यहां तक कि कई छवियों का उपयोग करें।यह आपकी मदद कर सकता है !!
यह गतिशील रूप से IOS करता है पृष्ठभूमि बदल देता है
.myBox {
width: 750px;
height: 500px;
border: rgba(0, 0, 0, 0.5) 1px solid;
background-color: #ffffff;
}
.blurBg {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.blurBg img {
-webkit-filter: blur(50px);
margin-top: -150px;
margin-left: -150px;
width: 150%;
opacity: 0.6;
}
यहाँ jQuery के साथ इस पर मेरा लेना है। समाधान सार्वभौमिक नहीं है, जिसका अर्थ है कि किसी को वास्तविक डिज़ाइन के आधार पर कुछ पदों और सामान को मोड़ना होगा।
मूल रूप से मैंने जो भी किया है: ट्रिगर क्लोन पर / पूरी पृष्ठभूमि (जो धुंधली होनी चाहिए) को अनब्लेटेड कंटेंट के साथ हटा दें (जो कि, वैकल्पिक रूप से, ओवरफ्लो को छिपा दिया है अगर यह पूरी चौड़ाई नहीं है) और इसे सही ढंग से रखें। कैविएट यह है कि खिड़की के आकार की धुंधली div स्थिति के संदर्भ में मूल को बेमेल कर देगी, लेकिन इसे विंडो रिसाइज फंक्शन पर कुछ के साथ हल किया जा सकता है (ईमानदारी से मैं अब इससे परेशान नहीं हो सकता)।
मैं वास्तव में इस समाधान पर आपकी राय की सराहना करूंगा!
धन्यवाद
यहाँ है बेला , IE में परीक्षण नहीं किया।
एचटीएमएल
<div class="slide-up">
<div class="slide-wrapper">
<div class="slide-background"></div>
<div class="blured"></div>
<div class="slide-content">
<h2>Pop up title</h2>
<p>Pretty neat!</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<h1>Some title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
सीएसएस
body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}
jQuery
// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);
$('.trigger').click(function () {
if ($(this).hasClass('triggered')) { // sliding up
$('.blured').animate({
height: '0px',
background: background
}, 1000, function () {
$('.blured .wrapper').remove();
});
$('.slide-up').slideUp(700);
$(this).removeClass('triggered');
} else { // sliding down
$('.wrapper').clone().appendTo('.blured');
$('.slide-up').slideDown(1000);
$offset = $('.slide-wrapper').offset();
$('.blured').animate({
height: $offset.top + height + slide_top + 'px'
}, 700);
$('.blured .wrapper').animate({
left: -$offset.left,
top: -$offset.top
}, 100);
$(this).addClass('triggered');
}
});