सीएसएस का सबसे खराब दुरुपयोग? [बन्द है]

Question

CSS की सबसे अच्छी / सबसे अच्छी / बदतर गालियों में से कुछ क्या है?

उदाहरण के लिए, इन आकृतियों , या पिक्सेल आर्ट बनाने के लिए कई बॉक्स-शैडो का उपयोग करना।

लोकप्रियता-प्रतियोगिता 16/04/14 को समाप्त हुई।

Comments

styleविशेषताओं में इनलाइन का उपयोग करना और!important प्रत्येक को जोड़ना ।

— user80551

आप एक दुरुपयोग कैसे परिभाषित करते हैं ? मैं ऑफ-टॉपिक हूं लेकिन प्रेरक आकृतियों वाले लिंक के लिए धन्यवाद।

— अल

@ n.1 कुछ ऐसा जो स्पष्ट रूप से इरादा नहीं था जब विनिर्देशों बनाया गया था।

— 930913

यह प्रश्न नियमों का पालन नहीं करता है ।

— AL

इंटरनेट ...

— दो

Answer 1

कुछ दोस्त ने किसी भी छवि को शुद्ध सीएसएस में बदलने के लिए एक उपकरण बनाया। यह सीएसएस के मूल इरादे से परे है।

यहाँ एक उदाहरण है (प्रसिद्ध मोना लिसा): http://codepen.io/jaysalvat/pen/HaqBf

और यहाँ उपकरण है: https://github.com/jaysalvat/image2css

Comments

भगवान की पवित्र कुंवारी माँ! जब आप एक ढाल पृष्ठभूमि बनाते हैं और आप (किसी कारण से) आपके पास कोड नहीं होता है और आपको इसकी आवश्यकता होती है, तो यह एक बहुत अच्छा उपकरण है।

— इस्माईल मिगुएल

Answer 2

मक्खी पर चित्र बदलना

मैं आवश्यक रूप से इसे दुरुपयोग नहीं कहूंगा, लेकिन आप सीएसएस का उपयोग IMGकिसी दिए गए के साथ बदलने के SRCलिए एक पूरी तरह से अलग छवि दिखाने के लिए कर सकते हैं ।

@media print
{
    IMG
    {
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        background-size:auto; 
        width:0px; height: 0px;
    }
}

देखें: /programming/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

@mediaवेबपेज को प्रिंट करते समय पूरी तरह से अलग छवियों को प्रदर्शित करने के लिए चयनकर्ताओं के साथ मिलकर बहुत मज़ा किया जा सकता है । (एक ही चाल PDFbtw में किया जा सकता है । उस आदमी का चेहरा देखकर अच्छा लगा जो एक दस्तावेज़ को प्रिंट कर रहा है और सभी गंभीर दिखने वाले चार्ट सुंदर महिलाओं द्वारा प्रतिस्थापित किए जाते हैं :))

Comments

+1 सहकर्मियों पर वापस भुगतान करने के क्रूर लेकिन सरल तरीके के लिए ... ऐसा नहीं है कि मैं यह जरूर

— करूंगा

img {बैकग्राउंड-इमेज} के साथ मैंने जो सबसे अच्छा उपयोग किया है, वह एक एनिमेटेड GIF को jpg बैकग्राउंड के साथ एम्बेड कर रहा है

— अल्बर्ट

Answer 3

रिज़र्व करने योग्य तत्व:

आप resize:bothकिसी तत्व को उपयोगकर्ता द्वारा आकार बदलने की अनुमति देने के लिए जोड़ सकते हैं ।
कुछ ब्राउज़रों पर, यह केवल समर्थित है <textarea>।

वास्तविक समय सीएसएस पूर्वावलोकन:

यह एक वास्तविक सीएसएस बात नहीं है, लेकिन आप contenteditableसंपत्ति जोड़ सकते हैं, संपत्ति जोड़ style="display:block;z-index:99;width:500px;height:500px;resizable:both;"सकते हैं और आप अपने सीएसएस को संपादित कर सकते हैं।

स्टाइल सीएसएस चेकबॉक्स / रेडियोबुटन:

उदाहरण के रूप में मार्कअप के निम्नलिखित टुकड़े का उपयोग करना:

<input type="checkbox" id="check_all" name="check_all" value="1">
<label for="check_all">Check all</label>

आप उपयोग कर सकते हैं display:noneपर <input>और, CSS3 चयनकर्ताओं का उपयोग कर, आप चेकबॉक्स / radiobutton के विभिन्न राज्यों को दिखाने के लिए एक 'स्प्राइट' पृष्ठभूमि सेट कर सकते हैं।

तत्वों का क्रम महत्वपूर्ण है, और इनपुट के for=""साथ संपत्ति का मिलान और id=""भी महत्वपूर्ण है!

आप यहां कुछ उदाहरण देख सकते हैं: http://www.csscheckbox.com/

ब्राउज़र विशिष्ट चयनकर्ता:

हम सभी ने सीएसएस कक्षाओं और मीडिया-प्रश्नों के साथ किसी प्रकार के जावास्क्रिप्ट मिश्रण का उपयोग करने की कोशिश की है ...

खैर, यहाँ कुछ ब्राउज़र विशिष्ट चयनकर्ता हैं:

doesnotexist:-o-prefocus, #selector {}/*opera only*/
:root {}/*target all css3 browsers*/
:-moz-any(*){}/*mozilla and mozilla based only*/
:-webkit-any(*){}/*webkit only*/

IE के लिए, आपके पास चयनकर्ताओं के टन हैं। ज्यादा की जरूरत नहीं।

Answer 4

मुझे लगता है कि यह निर्भर करता है कि आप दुरुपयोग का क्या मतलब है, लेकिन यह आपके उपयोगकर्ताओं को डंडा मारेगा:

नस

*:hover{
  zoom:99%;
}

(जैसा कि आप पृष्ठ के चारों ओर माउस करते हैं, सब कुछ आप पर झूलता है)

विशेषज्ञ-एक्सचेंज / पे-टू-व्यू प्रभाव

*{
  color:transparent;
  text-shadow:0 0 5px rgba(0,0,0,0.5);
}

(सभी पाठ धुंधले बनाता है)

सीएसएस स्प्राइट शीट का उपयोग करते हुए "एनिमेटेड जीआईएफ"

http://jsfiddle.net/simurai/CGmCe/light/

(जावा का "द ड्यूड" अपने हाथ लहराते हुए)