वेब डेवलपर्स के लिए 21 मूल्यवान एचटीएमएल और सीएसएस कोड स्निपेट्स

वेब डेवलपर हमेशा अपने वर्कफ़्लो को बेहतर बनाने और अपने जीवन को आसान बनाने के तरीकों की तलाश में रहते हैं। इस लेख में, हम 21 उपयोगी HTML और CSS कोड स्निपेट पेश करेंगे जो दैनिक वेब विकास कार्यों को सरल बनाने में मदद कर सकते हैं। ये कोड स्निपेट व्यावहारिक, समय बचाने वाले हैं, और आपकी आवश्यकताओं के अनुरूप आसानी से अनुकूलित किए जा सकते हैं।

प्रैक्टिकल कोड स्निपेट्स के संग्रह की खोज करें

1. उत्तरदायी नेविगेशन मेनू

विभिन्न उपकरणों पर सहज उपयोगकर्ता अनुभव के लिए एक उत्तरदायी नेविगेशन मेनू आवश्यक है। उत्तरदायी नेविगेशन मेनू बनाने के लिए यहां एक सरल HTML और CSS स्निपेट दिया गया है:

 <nav class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </nav> .navbar { display: flex; justify-content: space-around; background-color: #333; padding: 1rem; } .navbar a { color: white; text-decoration: none; padding: 0.5rem; } .navbar a:hover { background-color: #ddd; color: black; }

2. सीएसएस रीसेट

CSS रीसेट लागू करने से यह सुनिश्चित करने में मदद मिल सकती है कि आपकी वेबसाइट विभिन्न ब्राउज़रों में एक जैसी दिखती है। आरंभ करने के लिए यहां एक साधारण CSS रीसेट स्निपेट दिया गया है:

 * { margin: 0; padding: 0; box-sizing: border-box; }

3. एक तत्व को लंबवत और क्षैतिज रूप से केन्द्रित करें

किसी तत्व को उसके कंटेनर के भीतर लंबवत और क्षैतिज रूप से आसानी से केन्द्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करें:

 .container { display: flex; justify-content: center; align-items: center; height: 100vh; }

4. सीएसएस टूलटिप

केवल HTML और CSS का उपयोग करके एक सरल टूलटिप बनाएँ:

 <span class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </span> .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

5. स्टाइलिश बटन

इस सरल सीएसएस स्निपेट के साथ अपने बटनों में कुछ स्वभाव जोड़ें:

 .button { background-color: #4CAF50; border: none; color: white; text-align: center; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; padding: 10px 24px; border-radius: 8px; transition: background-color 0.3s; } .button:hover { background-color: #45a049; }

6. शीर्ष पर स्मूथ स्क्रॉल करें

अपने वेबपेज के शीर्ष पर नेविगेट करने के लिए एक सहज स्क्रॉल प्रभाव लागू करें:

 <a href="#top" class="scroll-to-top">Back to Top</a> html { scroll-behavior: smooth; } .scroll-to-top { position: fixed; bottom: 20px; right: 20px; text-decoration: none; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 8px; }

7. उत्तरदायी छवि गैलरी

सीएसएस ग्रिड का उपयोग करके एक उत्तरदायी छवि गैलरी बनाएं:

 <div class="image-gallery"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> .image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; } .image-gallery img { width: 100%; height: auto; }

8. फिक्स्ड टेबल हैडर

तालिका सामग्री में स्क्रॉल करते समय तालिका शीर्षलेख को स्थिर रखें:

 <table class="fixed-header"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <!-- Table Content --> </tbody> </table> .fixed-header { width: 100%; border-collapse: collapse; } .fixed-header thead { position: sticky; top: 0; background-color: #f1f1f1; }

9. फुलस्क्रीन बैकग्राउंड इमेज

अपने वेबपेज के लिए एक फुलस्क्रीन बैकग्राउंड इमेज सेट करें:

 body { background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; }

10. चिपचिपा पाद

व्यूपोर्ट भरने के लिए पर्याप्त सामग्री न होने पर भी अपने पाद लेख को पृष्ठ के निचले भाग में रखें:

 <div class="page-container"> <div class="content-wrap"> <!-- Your main content here --> </div> <footer>Footer content</footer> </div> .page-container { display: flex; flex-direction: column; min-height: 100vh; } .content-wrap { flex: 1; } footer { background-color: #f1f1f1; padding: 1rem; }

11. कार्ड लेआउट

Flexbox का उपयोग करके सामग्री प्रदर्शित करने के लिए एक आधुनिक कार्ड लेआउट बनाएँ:

 <div class="card"> <img src="image.jpg" alt="Card image"> <div class="card-content"> <h3>Card Title</h3> <p>Card description.</p> </div> </div> .card { display: flex; flex-direction: column; width: 300px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; } .card img { width: 100%; height: auto; } .card-content { padding: 1rem; }

12. ब्रेडक्रंब

HTML और CSS का उपयोग करके एक साधारण ब्रेडक्रंब नेविगेशन बनाएँ:

 <nav class="breadcrumbs"> <a href="#home">Home</a> > <a href="#section1">Section 1</a> > <a href="#section2">Section 2</a> </nav> .breadcrumbs { padding: 1rem; } .breadcrumbs a { text-decoration: none; color: #3498db; } .breadcrumbs a:hover { text-decoration: underline; }

13. सरल अकॉर्डियन

HTML और CSS का उपयोग करके एक साधारण अकॉर्डियन बनाएँ:

 <button class="accordion">Section 1</button> <div class="panel"> <p>Section 1 content.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Section 2 content.</p> </div> .accordion { cursor: pointer; width: 100%; text-align: left; outline: none; transition: 0.4s; } .panel { display: none; overflow: hidden; transition: max-height 0.2s; }

14. सरल पृष्ठांकन

HTML और CSS का उपयोग करके एक सरल पेजिनेशन नेविगेशन बनाएँ:

 <nav class="pagination"><a href="#prev">« Prev</a> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#next">Next »</a> </nav> .pagination { display: inline-block; padding: 1rem; } .pagination a { color: #3498db; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a:hover { background-color: #f1f1f1; } .pagination a.active { background-color: #3498db; color: white; border: 1px solid #3498db; }

15. उत्तरदायी वीडियो एम्बेड

HTML और CSS का उपयोग करके एक प्रतिक्रियाशील वीडियो एम्बेड बनाएं:

 <div class="video-container"> <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe> </div> .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

16. सीएसएस लोडर

अपनी वेबसाइट के लिए एक साधारण CSS लोडर बनाएँ:

 <div class="loader"></div> .loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 60px; height: 60px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

17. लंबन स्क्रॉलिंग प्रभाव

अपने वेबपेज पर एक साधारण लंबन स्क्रॉलिंग प्रभाव जोड़ें:

 <div class="parallax"></div> .parallax { background-image: url("your-image.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

18. फ्लेक्सबॉक्स ग्रिड सिस्टम

अपनी वेबसाइट के लिए एक साधारण फ्लेक्सबॉक्स ग्रिड सिस्टम बनाएं:

 <div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div><div class="col">Column 3</div> </div> .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .col { flex: 1; padding-left: 15px; padding-right: 15px; }

19. एनिमेटेड स्क्रॉल संकेतक

उपयोगकर्ताओं को यह दिखाने के लिए कि उन्होंने कितनी दूर तक स्क्रॉल किया है, एक एनिमेटेड स्क्रॉल सूचक बनाएँ:

 <div class="progress-container"> <div class="progress-bar"></div> </div> .progress-container { width: 100%; height: 8px; background-color: #f3f3f3; position: fixed; top: 0; } .progress-bar { height: 8px; background-color: #3498db; width: 0%; }

20. सीएसएस फ़िल्टर प्रभाव

अपनी छवियों पर CSS फ़िल्टर प्रभाव लागू करें:

 <img src="your-image.jpg" alt="Your Image" class="filter"> .filter { filter: grayscale(100%); }

21. Google फ़ॉन्ट्स एकीकरण

Google फ़ॉन्ट्स को अपनी वेबसाइट में एकीकृत करें:

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> body { font-family: 'Roboto', sans-serif; }

ये 21 उपयोगी HTML और CSS कोड स्निपेट आपकी वेब विकास परियोजनाओं को बढ़ाने और आपके वर्कफ़्लो को व्यवस्थित करने में आपकी सहायता कर सकते हैं। आसान संदर्भ के लिए उन्हें संभाल कर रखें, और अपनी विशिष्ट आवश्यकताओं के अनुरूप उन्हें संशोधित करने और अनुकूलित करने में संकोच न करें।

यहाँ भी प्रकाशित हुआ।