🤦🏻 ⛏️ 🥀 छद्म तत्वों के बाद: पहले और: का उपयोग करके गोल कोनों बनाना 🧑🏽 😯 🤲

चेतावनी! यह सब पुराना है, लेकिन मैं प्रकाशन को नहीं हटा रहा हूं, ताकि सभी को पता हो कि 2007 में IE6 के कारण हमें कैसे नुकसान उठाना पड़ा :-)

कार्य: HTML कोड की एक न्यूनतम के साथ गोल कोनों के साथ एक सम्मिलित करें।

हर कोई संभवतः गोल कोनों के साथ तख्ते पर आया था। चूंकि आधुनिक ब्राउज़र (सफारी को छोड़कर) कई पृष्ठभूमि का समर्थन नहीं करते हैं, इसलिए ऐसी चीजों को एक दूसरे में निहित कई तत्वों के साथ किया जाना चाहिए। इस तरह की चीजों से बचने का एक तरीका है।

html कोड:

सीएसएस कोड:

नीले फ्रेम की पृष्ठभूमि सेट करें:

.incut{background: #dff7ff;padding: 20px;}

हम तत्वों पर चार कोनों को लटकाते हैं: पहले और बाद में

.incut:before{ 
      

        
        
        
      

     content:url(); 
      

        
        
        
      

     background: url(i/border_tr.gif) no-repeat 100% 0; 
      

        
        
        
      

     height: 7px; 
      

        
        
        
      

     display: block; 
      

        
        
        
      

     margin: -20px -20px 13px -20px; 
      

        
        
        
      

     } 
      

        
        
        
      

     .incut:after{ 
      

        
        
        
      

     content:url(); 
      

        
        
        
      

     background: url(i/border_br.gif) no-repeat 100% 0; 
      

        
        
        
      

     height: 7px; 
      

        
        
        
      

     display: block; 
      

        
        
        
      

     margin:13px -20px -20px -20px; 
      

        
        
        
      

     }

यह (यानी फ़ायरफ़ॉक्स 1-2 ओपेरा 7-9, सफारी 3 में जाँच) को छोड़कर सभी आधुनिक ब्राउज़रों में काम करता है। यानी, इसी तरह की कार्यक्षमता को js के साथ लटका दिया जाता है (इसे अलग css फ़ाइल में रखना बेहतर है - विशेष के लिए):

.incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : '');}

यानी ६-6 में काम करता है। अक्षम स्क्रिप्ट के साथ, यानी उपयोगकर्ता को साइडबार पर एक नीली पृष्ठभूमि दिखाई देगी, अर्थात। कुछ भी नहीं टूटेगा।

नतीजतन, हमारे पास न्यूनतम HTML कोड वाला "बुलेटप्रूफ" फ्रेम है। ध्यान दें कि आप साइडबार पर एक और तस्वीर निर्दिष्ट कर सकते हैं, जो इसकी पृष्ठभूमि होगी।

इन छद्म तत्वों का एक समान तरीके से उपयोग करने से लेआउट के शब्दार्थ में काफी वृद्धि हो सकती है। यह सब आपकी कल्पना पर निर्भर करता है।

युपीडी:

यहाँ उदाहरण देखें।

छद्म तत्वों के बाद: पहले और: का उपयोग करके गोल कोनों बनाना

More articles: