HowFrames वेबसाइट डिझाइनमध्ये कसे कार्य करतात हे समजून घेणे
जेव्हा आपण आपल्या HTML मध्ये एक घटक एम्बेड करता तेव्हा आपल्याला त्यात CSS शैली जोडण्याचे दोन संधी मिळतात:
- आपण IFRAME स्वतःच शैली करू शकता.
- आपण IFRAME (विशिष्ट परिस्थितीनुसार) पृष्ठावर शैली करू शकता.
IFRAME एलिमेंट शैली करण्यासाठी सीएसएस वापरणे
आपल्या iframes स्टाईल करताना आपण पहिली गोष्ट म्हणजे IFRAME स्वतःच. जरी बहुतांश ब्राऊझर्समध्ये अतिरिक्त शैली नसताना iframes समाविष्ट होतात, तरी त्यांना सुसंगत ठेवण्यासाठी काही शैली जोडणे अद्याप चांगली कल्पना आहे
येथे काही सीएसएस शैली आहेत ज्यामध्ये मी नेहमी आपल्या iframes वर समाविष्ट करतो.
- समास: 0;
- पॅडिंग: 0;
- सीमा: काहीही नाही;
- रुंदीः मूल्य ;
- उंची: मूल्य ;
माझ्या दस्तऐवजात बसणार्या आकारावर सेट रुंदी आणि उंचीसह येथे काही शैली नसलेल्या फ्रेमची उदाहरणे आहेत आणि फक्त एक शैलीची मूलभूत शैली असलेली एक आहे. तुम्ही बघू शकता, ही शैली बहुतेक फक्त iframe च्या सभोवतालची सीमा काढतात, परंतु ते हे देखील सुनिश्चित करतात की सर्व ब्राउझर समान मार्जिन, पॅडिंग आणि परिमाणे असलेले आइफ्रेम प्रदर्शित करतात.
स्क्रोल बार काढण्यासाठी आपण अतिप्रवाह मालमत्तेचा वापर करता अशी HTML5 शिफारस करते परंतु ते विश्वसनीय नाही म्हणून जर आपण स्क्रॉल बार काढू किंवा बदलू इच्छित असाल तर आपल्या स्क्रिनिंग विशेषता आपल्या iframe वर तसेच वापरायला हव्या. स्क्रोलिंग विशेषता वापरण्यासाठी, तो इतर कोणत्याही विशेषतेप्रमाणे जोडा आणि नंतर तीन मूल्यांपैकी एक निवडा: होय, नाही किंवा स्वयंचलित होय, ब्राउझरला नेहमी स्क्रॉल बार समाविष्ट करावे लागतात जरी ते आवश्यक नसतील तरीही. नाही म्हणजे सर्व स्क्रॉल बाण काढून टाकायची की नाही किंवा नाही
स्वयं डीफॉल्ट आहे आणि जेव्हा आवश्यक असेल तेव्हा स्क्रोल बार समाविष्ट करते आणि जेव्हा ते नाहीत तेव्हा त्यांना काढून टाकतात.
स्क्रोलिंग विशेषतासह स्क्रोल करणे बंद कसे करायचे ते येथे आहे:
स्क्रोलिंग = "नाही" >
ही एक iframe आहे.
HTML5 मध्ये स्क्रोल करणे बंद करण्यासाठी आपण ओव्हरफ्लो गुणधर्म वापरणे अपेक्षित आहे. परंतु आपण या उदाहरणात पाहू शकता परंतु हे अद्याप सर्व ब्राउझरमध्ये विश्वसनीयतेने कार्य करत नाही.
आपण ओवरफ्लो मालमत्तेसह सर्व वेळ स्क्रोल करणे कसे चालू कराल ते येथे आहे:
शैली = "ओव्हरफ्लो: स्क्रोल;" >
ही एक आयफ्रेम आहे.
ओव्हरफ्लो मालमत्तेसह स्क्रोलिंग पूर्णपणे बंद करण्याचा कोणताही मार्ग नाही.
बर्याच डिझायनर्सना त्यांच्या आयफ्रेमला पृष्ठाच्या पार्श्वभूमीसह मिसळू द्यावे जेणेकरून वाचकांना माहित नसेल की iframes अगदी तेथेच आहेत. परंतु आपण स्टँडबाईज वाढवू शकता. बॉर्डर समायोजित करा जेणेकरून iframe अधिक सोपी दिसेल ते सोपे आहे. फक्त सीमा शैली मालमत्तेचा वापर करा (किंवा ते संबंधित सीमा-शीर्ष, सीमा-उजवी, सीमा-डावी आणि सीमा-खाली गुणधर्मांशी) सीमा पार करण्यासाठी:
iframe {
सीमा-शीर्ष: # c00 1px चिन्हित;
सीमा-उजवीकडे: # c00 2px चिन्हित;
सीमा-डावीकडे: # c00 2px चिन्हित;
सीमा-तळ: # c00 4px चिन्हित;
}
परंतु आपण आपल्या शैलीसाठी स्क्रोलिंग आणि बॉर्डरसह थांबू नये. आपण आपल्या iframe वर इतर बरेच CSS शैली लागू करू शकता. आयफ्रेम एक सावली, गोलाकार कोन देण्यासाठी आणि यास 20 अंश परिभ्रमण करण्यासाठी हे उदाहरण CSS3 शैली वापरते.
iframe {
समास-शीर्ष: 20 पीएक्स;
समास-तळ: 30 पीएक्स;
-मोझ-सीमा-त्रिज्या: 12px;
-webkit-border-radius: 12px;
सीमा-त्रिज्या: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
बॉक्स-सावली: 4px 4px 14px # 000;
-मोझ-ट्रांसफॉर्म: फिरवा (20deg);
-webkit-transform: फिरवा (20deg);
-o-transform: फिरवा (20deg);
-एमएमएस-ट्रान्सफॉर्म: फिरवा (20deg);
फिल्टर: प्रॉडिड: डीएक्सआयमेजट्रान्सफॉर्म. मायक्रोसॉफ्ट.बॅसिक आयमेज (रोटेशन = .2);
}
आइफ्रेम सामग्री स्टाइल करणे
एखाद्या आयफ्रेमची सामग्री स्टाईल करणे हे कोणत्याही अन्य वेब पृष्ठ स्टाईल करण्यासारखे आहे परंतु, आपल्याला पृष्ठ संपादित करण्यासाठी प्रवेश असणे आवश्यक आहे . आपण पृष्ठ संपादित करू शकत नसल्यास (उदाहरणार्थ, ते दुसर्या साइटवर आहे)
आपण पृष्ठ संपादित करू शकत नसल्यास, नंतर आपण आपल्या साइटवरील कोणत्याही अन्य वेब पृष्ठास शैलीच्या रूपात कशा प्रकारे बाह्य शैली पत्रक किंवा शैली जोडू शकता