सीएसएस उलटा पृष्ठ ही

मैंने हाल ही में एक पृष्ठ को पलटने के लिए पॉल आयरिश jQuery प्लगइन देखा। यह चित्र और CSS सहित, पृष्ठ पर हर रंग को सम्मिलित करता है। यह मुझे आउटलाइन रंग के लिए इनवर्टर कीवर्ड के अस्तित्व की याद दिलाता है (दुर्भाग्य से, केवल ओपेरा और IE9 + में समर्थित)। सामान्य तौर पर, मैंने सोचा कि केवल सीएसएस के साथ समान प्रभाव कैसे प्राप्त किया जाए।

यह काफी सरल निकला:

body:before {
content:"";
position:fixed;
top:50%; left: 50%;
z-index:9999;
width:1px; height: 1px;
outline:2999px solid invert;
}


काम करने के लिए, आपको सूचक-घटनाओं को सक्षम करने की आवश्यकता नहीं है : कोई नहीं , क्योंकि समोच्च कर्सर से घटनाओं को प्राप्त नहीं करता है, और इस मामले में भी स्क्रॉल बार के साथ कोई समस्या नहीं है, क्योंकि समोच्च आकार स्क्रॉलिंग को प्रभावित नहीं करता है। इसके अलावा, यह CSS3 भी नहीं है, लेकिन शुद्ध CSS 2.1 है।

यहाँ एक सरल js-bookmark (बुकमार्कलेट) है जिसे किसी भी पेज में डाला जा सकता है ( अनुवादक से : चूंकि आप निष्पादित करने के लिए हब पर जावास्क्रिप्ट कोड पेस्ट नहीं कर सकते हैं, नीचे वह कोड है जिसे आप ब्राउज़र में कॉपी और निष्पादित कर सकते हैं):

( function (){ var style= document .createElement( 'style' );style.innerHTML= 'body:before { content:""; position:fixed; top:50%; left:50%; z-index:9999; width:1px; height: 1px; outline:2999px solid invert; }' ; document .body.appendChild(style)})();


नोट : यह सुविधा केवल ओपेरा और IE9 + में काम करेगी वर्तमान में केवल वे आउटलाइन रंग के लिए इनवर्ट कीवर्ड का समर्थन करते हैं। हालांकि, एसवीजी फिल्टर का उपयोग करके फ़ायरफ़ॉक्स के लिए कुछ इसी तरह लागू करना संभव है, जैसा कि यह HTML तत्वों के लिए भी उनके आवेदन का समर्थन करता है।

इस सवाल के लिए कि किसी को पृष्ठ को उलटने की आवश्यकता क्यों है ... मुझे नहीं पता, लेकिन मुझे लगता है कि यह अप्रैल फूल्स के चुटकुले, कोनामी कोड और अन्य मज़ेदार चीजों के लिए उपयोगी हो सकता है।

( अनुवादक से : इस तरह, उदाहरण के लिए, उलटा हैबर जैसा दिखता है:


पीएस वैसे, " RIT ++ पर क्लाइंट साइड सेक्शन में रिपोर्ट" मास्टेरिंग CSS3 के ग्रैडिएंट्स "के साथ LE बोलेगा।
)