परिप्रेक्ष्य में पाठ

वेब पर घूमते हुए, मैंने अक्सर सीएसएस पर आधारित सबसे आश्चर्यजनक समाधान देखे हैं। और हर बार यह माना जाता है कि सीएसएस की संभावनाएं अनंत हैं :)

आज मैंने यह तस्वीर देखी:



वास्तव में दिलचस्प प्रभाव? आइए इसके कार्यान्वयन के रहस्य को प्रकट करने का प्रयास करें।



"परिप्रेक्ष्य" पाठ के प्रभाव को बनाने के लिए, हमें केवल 3 तत्वों की आवश्यकता होती है - एक डिव , पी और स्पैन ब्लॉक। याद रखें कि स्पैन एक लाइन आइटम है (डिफ़ॉल्ट रूप से), इसलिए हम किसी भी शब्द / लाइन को "कंघी" कर सकते हैं जैसा हम चाहते हैं। लेकिन हमें कुछ भी शानदार करने की आवश्यकता नहीं है :) हम स्पैन का उपयोग उस पाठ को तोड़ने के लिए करेंगे जिसे हम लाइनों में बदलना चाहते हैं। और p एलिमेंट हमारे टेक्स्ट को फ्रेम करेगा।



हमने पाठ का पता लगाया, लेकिन हम प्रत्येक पंक्ति के लिए एक अलग फ़ॉन्ट आकार कैसे इंगित करते हैं? हम थोड़ा धोखा देते हैं और प्रत्येक पंक्ति के बाद स्पैन टैग को बंद नहीं करेंगे, लेकिन यह सुनिश्चित करें कि प्रत्येक पंक्ति ऐसा हो जैसे कि दूसरे में नेस्टेड हो। और हम टेक्स्ट के बहुत अंत में प्रत्येक पंक्ति से समापन टैग लगाते हैं। मुख्य बात यह है कि टैग खोलने और बंद करने की संख्या को गलत नहीं करना है। और फिर कोड इस तरह दिखेगा:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Pellentesque velit lacus,porta vitae, consequat in,aliquam condimentum, tortor. Mauris sed est feugiaterat lacinia rutrum. Fusce dapibus nonummy nisi.Nullam et mi nec arcu tempor pellentesque. Fuscediam dui, pharetra at, pellentesque quis, dapibusut, erat. Curabitur venenatis condimentum nisi.In posuere. Curabitur accumsan, libero egetcongue sodales, lacus mi vehicula lorem,nec rutrum velit nunc vitae magna. Proinet Perspective Text via CSS.





यह हमें क्या देता है? याद रखें कि बाल तत्व मूल तत्व के गुणों को विरासत में देते हैं, प्रत्येक बाद वाले नेस्टेड तत्व के साथ इसके पिछले ब्लॉक के सापेक्ष एक मूल्य प्रदान करते हैं, और बहुत पहले नहीं। एक ज्वलंत उदाहरण इस के लिए हो सकता है: जब हम प्रतिशत चौड़ाई वाले नेस्टेड ब्लॉक का उपयोग करते हैं, उदाहरण के लिए 70%। प्रत्येक नेस्टेड ब्लॉक में पिछले ब्लॉक के सापेक्ष 70% की चौड़ाई होगी, इस प्रकार सबसे हाल का नेस्ट ब्लॉक सबसे छोटा होगा।



मुझे लगता है कि आप पहले से ही हमारे अगले चरणों को समझ चुके हैं :) हम इसे फ़ॉन्ट आकार के साथ करेंगे, इसे प्रतिशत के रूप में दर्शाते हैं।

हमारे तत्वों की शैलियाँ इस तरह दिखेंगी:

#text {

margin : auto;

width : 40em;

font-size : 50%;

line-height : 1.6em;

max-width : 90%;

text-align : center;

}



#text p span {

font-size : 1.1em;

display:block;

clear:both;

}

यह स्पष्ट करना महत्वपूर्ण है कि पाठ का आकार बिल्कुल एम में निर्दिष्ट किया जाना चाहिए और 1 एमएम से बड़ा होना सुनिश्चित करें - अन्यथा प्रभाव अलग होगा। आपको लाइनों (लाइन-ऊंचाई) के बीच की दूरी को भी याद रखने की आवश्यकता है ताकि पंक्तियाँ एक-दूसरे से टकराएं नहीं क्योंकि फ़ॉन्ट बढ़ता है।



यह पूरा रहस्य है :) और फिर केवल आपकी कल्पना :)

आप यहां एक उदाहरण स्पष्ट रूप से देख सकते हैं

वहां आपको कोड डाउनलोड करने के लिंक भी मिलेंगे।



माइक के प्रयोगों के माध्यम से