Home-theater-designers
आप चाहते हैं कि आपकी वेबसाइट शानदार दिखे --- लेकिन आपके वेब विकास कौशल की कमी है।
निराशा मत करो! शानदार प्रभाव वाली फैंसी साइट बनाने के लिए आपको CSS या PHP जानने की आवश्यकता नहीं है। कुछ सरल HTML टैग्स और कॉपी-पेस्ट करने का तरीका जानने से काम चल जाएगा।
आपको कुछ अच्छे HTML प्रभावों के साथ आरंभ करने के लिए, हमने इन निःशुल्क HTML प्रभाव कोड टेम्पलेट्स को संकलित किया है। वे बैंक को तोड़े बिना आपकी साइट की कार्यक्षमता और उपयोगकर्ता अनुभव को बढ़ाएंगे। जबकि वे ज्यादातर HTML हैं, इन कूल कोड में कुछ CSS और PHP भी हो सकते हैं।
1. HTML के साथ कूल लंबन प्रभाव
आपने शायद ऑनलाइन विज्ञापनों वाली वेबसाइटों पर उपयोग किए जाने वाले Parallax Effect को देखा होगा। जैसे ही आप किसी लेख को नीचे स्क्रॉल करते हैं, पृष्ठभूमि छवि स्क्रॉल करने लगती है एक अलग गति से, या एक विज्ञापन प्रकट होता है।
वैकल्पिक रूप से, जब आप साइट के विभिन्न भागों में जाते हैं तो शायद पृष्ठभूमि छवि बदल जाती है। यह एक अच्छा प्रभाव है जो सामग्री में दृश्य गहराई जोड़ता है और आदर्श है, भले ही आप न करें मूल HTML कोड को समझें .
आप प्रभाव के साथ खेल सकते हैं और कोड को कॉपी कर सकते हैं a W3Schools से सरल लंबन स्क्रॉलिंग प्रभाव .
अपने सबसे परिष्कृत संस्करण में, यह प्रभाव HTML, CSS और JS का संयोजन है।
आगे बढ़ें और उपरोक्त के लिए कोड प्राप्त करें कोडपेन से शीर्षलेख/पाद लंबन प्रभाव .
2. स्क्रॉल करने योग्य HTML टिप्पणी बॉक्स कोड
यह एक सरल लेकिन सहायक HTML तत्व है जो आपको टेक्स्ट के लंबे स्निपेट को एक कॉम्पैक्ट प्रारूप में पैक करने देता है। इस तरह यह पृष्ठ पर संपूर्ण स्थान नहीं लेता है।
आप टेक्स्ट बॉक्स के रंगों और आकार के साथ खेल सकते हैं ताकि यह आपकी आवश्यकताओं के अनुरूप हो।
इनपुट:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) यदि आप कुछ अधिक पसंद करते हैं, तो आप इसके लिए कोड भी प्राप्त कर सकते हैं Quackit . से एक अनुकूलन योग्य टिप्पणी बॉक्स .
वे कई टेम्पलेट प्रदान करते हैं, लेकिन आप अपने कस्टम कोड को मैन्युअल रूप से बदलने और परीक्षण (चलाने) के लिए उनके संपादक का उपयोग भी कर सकते हैं।
3. एक कूल HTML ट्रिक: हाईलाइटेड टेक्स्ट
एक साधारण के साथHTML टैग आप अपने टेक्स्ट या छवियों में ढेर सारे अच्छे प्रभाव जोड़ सकते हैं। ध्यान दें कि ये सभी ब्राउज़र पर काम नहीं करते हैं। यहां बताए गए लोग Google Chrome, Microsoft Edge और Mozilla Firefox में काम करते हैं।
यह HTML टेक्स्ट प्रभाव के बीच के टेक्स्ट को हाइलाइट करता हैटैग।
इनपुट:
Your highlighted text here.आउटपुट डेमो:
4. टेक्स्ट में बैकग्राउंड इमेज जोड़ें
इसी तरह, आप अपने टेक्स्ट का रंग बदल सकते हैं या बैकग्राउंड इमेज जोड़ सकते हैं। यदि टेक्स्ट का फ़ॉन्ट आकार बड़ा है तो यह बहुत अच्छा लगता है।
इनपुट:
MakeUseOf presents...पाठ में शैली और फ़ॉन्ट तत्वों को जोड़कर समान प्रभाव प्राप्त किया जाता है a उपनाम।
कैसे बताएं कि मेरे पास कौन सा मदरबोर्ड है
आउटपुट डेमो:
5. शीर्षक टूलटिप जोड़ने के लिए उपयोगी HTML ट्रिक
जब आप 'हेरफेर' टेक्स्ट या छवि के एक टुकड़े पर माउस से स्क्रॉल करते हैं तो एक शीर्षक टूलटिप सामने आता है। आपने इन्हें वेबसाइटों पर छवियों, लिंक किए गए टेक्स्ट, या यहां तक कि डेस्कटॉप ऐप्स में मेनू आइटम पर उपयोग करते देखा होगा। अपने वेबपेज पर प्लेन टेक्स्ट में टूलटिप जोड़ने के लिए इस HTML कोड का उपयोग करें।
इनपुट:
Move your mouse over me!आउटपुट डेमो:
6. सबसे अच्छे HTML ट्रिक्स अभी तक: स्क्रॉलिंग या फॉलिंग टेक्स्ट
जब आप Google पर 'marquee html' खोजते हैं, तो आपको एक छोटा सा ईस्टर एग मिलेगा। स्क्रॉलिंग खोज परिणाम शीर्ष पर देखें? यह अब अप्रचलित मार्की टैग द्वारा निर्मित एक प्रभाव है। हालांकि यह एक बार अच्छा HTML पाठ प्रभाव बहिष्कृत कर दिया गया है, अधिकांश ब्राउज़र अभी भी इसका समर्थन करते हैं।
इनपुट:
I wanna scroll with it, baby!आउटपुट डेमो:
आप ऐसा कर सकते हैं और गुण जोड़ें स्क्रॉलिंग व्यवहार, पृष्ठभूमि का रंग, दिशा, ऊंचाई, और बहुत कुछ नियंत्रित करने के लिए। हालाँकि, ध्यान रखना; यदि अधिक उपयोग किया जाए तो ये प्रभाव काफी परेशान करने वाले हो सकते हैं।
एक शांत गिरने वाले पाठ प्रभाव के लिए, क्वैकिट के लिए फिर से सिर और उनके अत्यधिक अनुकूलित मार्की कोड को कॉपी करें।
7. HTML के साथ एक कूल स्विचमेनू बनाएं
सबसे अच्छे HTML ट्रिक्स गतिशील HTML प्रभाव हैं। हालांकि, वे अक्सर स्क्रिप्ट आधारित होते हैं। यहाँ मेनू के लिए एक प्रभाव है जिससे आप सहमत होंगे कि यह बहुत ही स्लीक लगता है।
यह आपके औसत HTML टैग से थोड़ा अधिक जटिल है क्योंकि यह स्टाइल शीट और स्क्रिप्ट के साथ काम करता है। इसका लाभ यह है कि इसे काम करने के लिए आपको CSS या स्क्रिप्ट फ़ाइल अपलोड करने की आवश्यकता नहीं है। इसके बजाय, बस निम्नलिखित कोड को अपनी वेबसाइट के अनुभाग में पेस्ट करें।
इनपुट:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
आउटपुट डेमो:
दुर्भाग्य से, हम यहाँ इस प्रभाव को प्रदर्शित नहीं कर सकते। लेकिन मूल स्रोत, गतिशील ड्राइव , इस गतिशील HTML प्रभाव की एक कार्यशील प्रति प्रस्तुत करता है।
8. Tableizer के साथ एक HTML स्प्रेडशीट प्राप्त करें
यदि आप अपनी साइट पर एक स्प्रेडशीट प्रदर्शित करना चाहते हैं, तो Tableizer! अपने डेटा को HTML तालिका में बदलें। बस एक्सेल, Google डॉक, या किसी अन्य स्प्रैडशीट से कच्चे डेटा को कनवर्टर टूल में पेस्ट करें tableizer.journalistopia.com . ट्वीक द टेबल विकल्प , तब दबायें इसे सारणीबद्ध करें एचटीएमएल आउटपुट प्राप्त करने के लिए।
यह शायद आपकी वेबसाइट के लिए सबसे अच्छे HTML कोड में से एक है, जैसे इसे Tableize! सारी मेहनत करता है।
क्लिक HTML को क्लिपबोर्ड पर कॉपी करें HTML कोड को कॉपी करने और उसे अपनी वेबसाइट में जोड़ने के लिए। पृष्ठभूमि-रंगों को संपादित करने पर विचार करें ताकि यह बहुत अच्छा दिखाई दे।
US में tiktok को कब बैन किया जाएगा
हालांकि यह वास्तव में एक HTML प्रभाव नहीं है, यह काफी आसान है।
आपकी साइट के लिए अधिक कूल HTML कोड और प्रभाव
HTML, CSS और JavaScript की शक्ति आपकी वेबसाइट पर आश्चर्यजनक प्रभावों के लिए संभावित असीमित विकल्प प्रदान करती है। अधिक चाहते हैं?
- एचटीएमएल उपहार आपको बहुत अच्छा देता हैटैग विचार।
- गतिशील ड्राइव कई अविश्वसनीय गतिशील HTML स्क्रिप्ट हैं।
- क्वैकिट अच्छा HTML कोड प्रदान करता है।
हमने आपको आठ शानदार HTML कोड दिखाए हैं जिन्हें आप अपनी वेबसाइट को बेहतर बनाने के लिए कॉपी कर सकते हैं। अलग होते हुए भी, जब तक आप मूल HTML कोडिंग तकनीकों को जानते हैं, तब तक उन्हें लागू करना आसान है।
साझा करना साझा करना कलरव ईमेल 17 सरल HTML कोड उदाहरण जो आप 10 मिनट में सीख सकते हैंएक बुनियादी वेबपेज बनाना चाहते हैं? इन HTML उदाहरणों को जानें और टेक्स्ट संपादक में देखें कि वे आपके ब्राउज़र में कैसे दिखते हैं।
आगे पढ़िए संबंधित विषय- प्रोग्रामिंग
- एचटीएमएल
- वेब विकास
- वेबमास्टर उपकरण
डेस्कटॉप और सॉफ्टवेयर समर्थन में व्यापक अनुभव के साथ सुरक्षा, लिनक्स, DIY, प्रोग्रामिंग, और टेक समझाया, और वास्तव में उपयोगी पॉडकास्ट निर्माता के लिए उप संपादक। लिनक्स प्रारूप पत्रिका में योगदानकर्ता, ईसाई एक रास्पबेरी पाई टिंकरर, लेगो प्रेमी और रेट्रो गेमिंग प्रशंसक है।
क्रिस्चियन काउली की और फ़िल्में या टीवी शोहमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें