-
CSS3 के गोल कोनों को कैसे बनाएं?
गोलाकार कोने बनाने के लिए, CSS3 में सीमा-त्रिज्या गुण का उपयोग करें। गोल कोनों को बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { dis
-
CSS में बॉर्डर इमेज कैसे बनाएं
सीएसएस में बॉर्डर इमेज बनाने के लिए, बॉर्डर-इमेज प्रॉपर्टी का इस्तेमाल करें। CSS में बॉर्डर इमेज बनाने के लिए कोड निम्नलिखित है - उदाहरण body { font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif;}.border1 { बॉर्डर:10px सॉलिड ट्रांसपेरेंट; पैडिंग:15 पीएक्स; बॉर्डर-इमेज:url (https://i.picsum.ph
-
CSS3 के साथ एकाधिक पृष्ठभूमि जोड़ना
कई बैकग्राउंड जोड़ने के लिए, CSS में बैकग्राउंड-इमेज प्रॉपर्टी का इस्तेमाल करें। एकाधिक पृष्ठभूमि जोड़ने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {
-
CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना
रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में पहला पैरामीटर नीचे दिखाए गए अनुसार इच्छित आकार के रूप में सेट किया जाना है - background-image: radial-gradient(ellipse,rgb(217, 255, 0
-
CSS3 के 3D ट्रांसफ़ॉर्म फ़ंक्शंस के साथ कार्य करना
3डी ट्रांस्फ़ॉर्म का उपयोग करके, हम तत्व को x-अक्ष, y-अक्ष और z-अक्ष में स्थानांतरित कर सकते हैं। CSS3 3D Transform के कुछ तरीके निम्नलिखित हैं - नीचे दी गई विधियों का उपयोग 3D रूपांतरणों को कॉल करने के लिए किया जाता है - क्रमांक मूल्य और विवरण 1 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
-
CSS3 के संक्रमण प्रभाव कैसे बनाएं?
CSS3 के संक्रमण प्रभाव बनाने के लिए, संक्रमण संपत्ति का उपयोग करें। CSS3 का उपयोग करके संक्रमण प्रभाव बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; background:
-
CSS का उपयोग करके रेडियल ग्रेडिएंट का आकार निर्धारित करना
रेडियल ग्रेडिएंट का आकार सेट करने के लिए, रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग करें। यह फ़ंक्शन पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करता है। फ़ंक्शन में दूसरा पैरामीटर नीचे दिए गए उदाहरण के अनुसार इच्छित आकार के रूप में सेट किया जाना है - background-image: radial-gradient(40% 50px at ce
-
CSS3 में टेक्स्ट ओवरफ्लो को संभालना
CSS3 में टेक्स्ट-ओवरफ्लो प्रॉपर्टी का उपयोग यह निर्धारित करने के लिए किया जाता है कि प्रदर्शित नहीं होने वाली ओवरफ्लो सामग्री उपयोगकर्ताओं को कैसे संकेतित की जाती है CSS3 में टेक्स्ट ओवरफ्लो को संभालने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> b
-
CSS का उपयोग करके इमेज स्प्राइट से एक आइकन प्रदर्शित करें
इमेज स्प्राइट का उपयोग करने का मुख्य लाभ http अनुरोधों की संख्या को कम करना है जो हमारी साइट के लोड समय को तेज करता है। CSS का उपयोग करके इमेज स्प्राइट से एक आइकन प्रदर्शित करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-
-
CSS इमेज स्प्राइट का उपयोग करके नेविगेशन मेनू बनाना
इमेज स्प्राइट का उपयोग http अनुरोधों की संख्या को कम करने के लिए किया जाता है जो हमारी साइट के लोड समय को तेज करता है। CSS इमेज स्प्राइट का उपयोग करके नेविगेशन मेनू बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family:
-
CSS में फ़ॉलबैक रंग घोषित करना
फ़ॉलबैक रंग का उपयोग उस स्थिति के लिए रंग निर्दिष्ट करने के लिए किया जाता है जब ब्राउज़र RGBA रंगों का समर्थन नहीं करता है। कुछ ब्राउज़र जो फ़ॉलबैक रंगों का समर्थन नहीं करते हैं, वे हैं ओपेरा 9 और नीचे, IE 8 और नीचे आदि। RGBA रंग से पहले एक ठोस रंग निर्दिष्ट करें ताकि ब्राउज़र RGBA रंगों का समर्थन न
-
CSS विशेषता चयनकर्ताओं के साथ स्टाइलिंग फॉर्म
CSS में विशेषता चयनकर्ताओं का उपयोग करके विशेष विशेषताओं वाले HTML तत्वों के लिए शैलियों को लागू करें। विशेषता चयनकर्ता पर निम्नलिखित नियम लागू होते हैं। p[lang] − lang विशेषता वाले सभी अनुच्छेद तत्वों का चयन करता है। p[lang=fr] − उन सभी अनुच्छेद तत्वों का चयन करता है जिनकी lang विशेषता का मान
-
CSS3 के रैखिक और रेडियल ग्रेडिएंट का उपयोग करना
ग्रेडियेंट दो या दो से अधिक रंगों के संयोजन को प्रदर्शित करता है। लीनियर ग्रेडिएंट्स का उपयोग दो या दो से अधिक रंगों को लीनियर फॉर्मेट जैसे ऊपर से नीचे तक व्यवस्थित करने के लिए किया जाता है। रेडियल ग्रेडिएंट केंद्र में दिखाई देते हैं। CSS3 में रैखिक और रेडियल ग्रेडिएंट उपयोग को दर्शाने वाला कोड निम
-
CSS में कोणों का उपयोग करके रैखिक ग्रेडिएंट्स की दिशा निर्धारित करना
ग्रेडिएंट की दिशा पर अधिक नियंत्रण के लिए, कोण को नीचे दिए गए सिंटैक्स के अनुसार परिभाषित करें - background-image: linear-gradient(angle, color-stop1, color-stop2); CSS में कोणों का उपयोग करके रैखिक ग्रेडिएंट्स की दिशा निर्धारित करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html&
-
CSS में मल्टीपल कलर स्टॉप का उपयोग करके लीनियर ग्रेडिएंट बनाना
एकाधिक रंग स्टॉप का उपयोग करके एक रैखिक ढाल बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { height: 200px; width: 100%;
-
CSS3 पारदर्शिता और ग्रेडिएंट
लीनियर ग्रेडिएंट्स का उपयोग दो या दो से अधिक रंगों को लीनियर फॉर्मेट जैसे ऊपर से नीचे तक व्यवस्थित करने के लिए किया जाता है। पारदर्शिता जोड़ने के लिए, RGBA () फ़ंक्शन का उपयोग करें और रंग स्टॉप को परिभाषित करें। CSS3 का उपयोग करके पारदर्शी रैखिक ढाल सेट करने के लिए कोड निम्नलिखित है - उदाहरण <!D
-
CSS3 बॉक्स और टेक्स्ट शैडो इफेक्ट्स कैसे बनाएं?
CSS3 बॉक्स और टेक्स्ट शैडो इफेक्ट बनाने के लिए, क्रमशः बॉक्स-शैडो और टेक्स्ट-शैडो प्रॉपर्टी का उपयोग करें। CSS3 बॉक्स और टेक्स्ट शैडो इफेक्ट बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", T
-
CSS3 2D ट्रांसफ़ॉर्म फ़ंक्शंस के साथ कार्य करना
2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक
-
सीएसएस के साथ डिफ़ॉल्ट टेक्स्ट चयन रंग को ओवरराइड कैसे करें?
सीएसएस के साथ डिफ़ॉल्ट टेक्स्ट चयन रंग को ओवरराइड करने के लिए, कोड इस प्रकार है उदाहरण <!DOCTYPE html> <html> <head> <style> ::-moz-selection { color: rgb(255, 255, 255); background: rgb(118, 69, 231); } &nbs
-
CSS3 में फ्लेक्स लेआउट मॉडल को समझना
CSS3 एक लेआउट मोड फ्लेक्सिबल बॉक्स प्रदान करता है, जिसे आमतौर पर फ्लेक्सबॉक्स कहा जाता है। फ्लेक्सबॉक्स (लचीला बॉक्स) CSS3 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल अनुप्रयोगों और वेब पेजों के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम आदि शामिल हैं। कंटेनर में निम्नलिखित गु