Home-theater-designers
మీ వెబ్‌సైట్ అద్భుతంగా కనిపించాలని మీరు కోరుకుంటున్నారు --- అయితే మీ వెబ్ డెవలప్‌మెంట్ నైపుణ్యాలు లోపించాయి.
నిరాశ చెందకండి! కూల్ ఎఫెక్ట్‌లతో ఫాన్సీ సైట్‌ను నిర్మించడానికి మీరు CSS లేదా PHP గురించి తెలుసుకోవాల్సిన అవసరం లేదు. కొన్ని సాధారణ HTML ట్యాగ్‌లు మరియు కాపీ-పేస్ట్ ఎలా చేయాలో తెలుసుకోవడం జరుగుతుంది.
మీరు కొన్ని అద్భుతమైన HTML ప్రభావాలతో ప్రారంభించడానికి, మేము ఈ ఉచిత HTML ప్రభావ కోడ్ టెంప్లేట్‌లను సంకలనం చేసాము. బ్యాంక్‌ను విచ్ఛిన్నం చేయకుండానే అవి మీ సైట్ యొక్క కార్యాచరణను మరియు వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తాయి. అవి ఎక్కువగా HTML అయితే ఈ కూల్ కోడ్‌లు కొంత CSS మరియు PHP ని కూడా కలిగి ఉండవచ్చు.
1. HTML తో కూల్ పారలాక్స్ ప్రభావం
ఆన్‌లైన్ ప్రకటనలతో వెబ్‌సైట్‌లలో ఉపయోగించే పారలాక్స్ ఎఫెక్ట్‌ను మీరు బహుశా చూసి ఉంటారు. మీరు ఒక కథనాన్ని క్రిందికి స్క్రోల్ చేస్తున్నప్పుడు, ది నేపథ్య చిత్రం స్క్రోల్ చేయడానికి కనిపిస్తుంది వేరే వేగంతో, లేదా ఒక ప్రకటన కనిపిస్తుంది.
ప్రత్యామ్నాయంగా, మీరు సైట్ యొక్క వివిధ భాగాలను సందర్శించినప్పుడు నేపథ్య చిత్రం మారుతుంది. ఇది చల్లని ప్రభావం, ఇది కంటెంట్‌కు దృశ్యమాన లోతును జోడిస్తుంది మరియు మీరు చేయకపోయినా ఆదర్శవంతమైనది ప్రాథమిక HTML కోడ్‌ని అర్థం చేసుకోండి .
మీరు ప్రభావంతో ప్లే చేయవచ్చు మరియు కోడ్ కోసం కోడ్‌ను కాపీ చేయవచ్చు W3 స్కూల్స్ నుండి సాధారణ పారలాక్స్ స్క్రోలింగ్ ప్రభావం .
దాని అత్యంత అధునాతన వెర్షన్‌లో, ఈ ప్రభావం 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! :) మీరు కొద్దిగా అభిమానిని కోరుకుంటే, మీరు దీని కోసం కోడ్‌ను కూడా పొందవచ్చు క్వాకిట్ నుండి అనుకూలీకరించదగిన వ్యాఖ్య పెట్టె .
వారు అనేక టెంప్లేట్‌లను అందిస్తారు, కానీ మీ కస్టమ్ కోడ్‌ని మాన్యువల్‌గా మార్చడానికి మరియు పరీక్షించడానికి (రన్ చేయడానికి) మీరు వారి ఎడిటర్‌ని కూడా ఉపయోగించవచ్చు.
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 లో 'మార్క్యూ 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. టేబుల్‌జైజర్‌తో HTML స్ప్రెడ్‌షీట్ పొందండి
మీరు మీ సైట్‌లో స్ప్రెడ్‌షీట్‌ను ప్రదర్శించాలనుకుంటే, టేబుల్‌జైజర్‌ని అనుమతించండి! మీ డేటాను HTML పట్టికగా మార్చండి. ఎక్సెల్, గూగుల్ డాక్ లేదా ఇతర స్ప్రెడ్‌షీట్ నుండి ముడి డేటాను కన్వర్టర్ టూల్‌లో అతికించండి tableizer.journalistopia.com . సర్దుబాటు చేయండి పట్టిక ఎంపికలు , ఆపై క్లిక్ చేయండి దీనిని పట్టిక చేయండి HTML అవుట్‌పుట్‌ను స్వీకరించడానికి.
ఇది బహుశా మీ వెబ్‌సైట్ కోసం చక్కని HTML కోడ్‌లలో ఒకటి, ఇది పట్టికగా! అన్ని కష్టపడి పనిచేస్తుంది.
క్లిక్ చేయండి క్లిప్‌బోర్డ్‌కు HTML ని కాపీ చేయండి HTML కోడ్‌ని కాపీ చేసి మీ వెబ్‌సైట్‌కు జోడించడానికి. చాలా చల్లగా కనిపించేలా బ్యాక్‌గ్రౌండ్-రంగులను సవరించడాన్ని పరిగణించండి.
నేను 32 బిట్ లేదా 64 బిట్ డౌన్‌లోడ్ చేయాలా
ఇది నిజంగా ఒక HTML ప్రభావం కానప్పటికీ, ఇది చాలా సులభమైనది.
మీ సైట్ కోసం మరిన్ని కూల్ HTML కోడ్‌లు మరియు ప్రభావాలు
HTML, CSS మరియు JavaScript యొక్క శక్తి మీ వెబ్‌సైట్‌లో అద్భుతమైన ప్రభావాల కోసం అపరిమిత ఎంపికలను అందిస్తుంది. మరిన్ని కావాలి?
- HTML గూడీస్ మీకు గొప్పగా ఇస్తుందిట్యాగ్ ఆలోచనలు.
- డైనమిక్ డ్రైవ్ అనేక అద్భుతమైన డైనమిక్ HTML స్క్రిప్ట్‌లను కలిగి ఉంది.
- క్వాకిట్ చల్లని HTML కోడ్‌ను అందిస్తుంది.
మీ వెబ్‌సైట్‌ను మెరుగుపరచడానికి మీరు కాపీ చేయగల ఎనిమిది మంచి HTML కోడ్‌లను మేము మీకు చూపించాము. విభిన్నమైనప్పటికీ, మీకు ప్రాథమిక HTML కోడింగ్ పద్ధతులు తెలిసినంత వరకు అవన్నీ అమలు చేయడం సులభం.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ 17 సాధారణ HTML కోడ్ ఉదాహరణలు మీరు 10 నిమిషాల్లో నేర్చుకోవచ్చుప్రాథమిక వెబ్‌పేజీని సృష్టించాలనుకుంటున్నారా? ఈ HTML ఉదాహరణలను తెలుసుకోండి మరియు మీ బ్రౌజర్‌లో అవి ఎలా ఉన్నాయో చూడటానికి టెక్స్ట్ ఎడిటర్‌లో వాటిని ప్రయత్నించండి.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- HTML
- వెబ్ అభివృద్ధి
- వెబ్‌మాస్టర్ సాధనాలు
సెక్యూరిటీ, లైనక్స్, DIY, ప్రోగ్రామింగ్ మరియు టెక్ వివరించిన డిప్యూటీ ఎడిటర్, మరియు నిజంగా ఉపయోగకరమైన పాడ్‌కాస్ట్ ప్రొడ్యూసర్, డెస్క్‌టాప్ మరియు సాఫ్ట్‌వేర్ మద్దతులో విస్తృతమైన అనుభవం. లైనక్స్ ఫార్మాట్ మ్యాగజైన్‌కు సహకారి, క్రిస్టియన్ ఒక రాస్‌ప్బెర్రీ పై టింకరర్, లెగో ప్రేమికుడు మరియు రెట్రో గేమింగ్ ఫ్యాన్.
క్రిస్టియన్ కౌలీ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి