ड्रॉप कैप्स - सीएसएस-ट्रिक्स

सुलभ मार्ग

आपका सबसे अच्छा शर्त है कि आप ईथन का 5 मिनट का वीडियो देखें और फिर इसे देखें:

क्रॉस-ब्राउज़र तरीका (अतिरिक्त मार्कअप)

बस एक पैराग्राफ में पैराग्राफ के पहले चरित्र को लपेटें, फिर सीएसएस और स्टाइल के साथ स्पैन को लक्षित करें।

L orem ipsum dolor sit amet, consectetur adipiscing elit.

.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )

CSS3 का रास्ता (कोई अतिरिक्त मार्कअप नहीं)

छद्म वर्ग चयनकर्ताओं का उपयोग करके पहले पैराग्राफ के पहले चरित्र को लक्षित करें। कोई अतिरिक्त मार्कअप की आवश्यकता नहीं है, लेकिन कोई आईई <9 समर्थन नहीं है।

Just a normal sentence.

p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )

जिस initial-letterतरह से

initial-letterइस लेखन के समय के लिए ब्राउज़र समर्थन काफी विरल है, लेकिन इसका उपयोग ड्रॉप कैप्ड अक्षर की संख्या की गणना करने के लिए किया जा सकता है और इसे अपने दम पर करने के बजाय फ़ॉन्ट आकार पर कब्जा करना चाहिए।

p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
नहीं न	नहीं न	नहीं न	नहीं न	टीपी *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
नहीं न	नहीं न	नहीं न	14.0-14.4 *