8 puikūs HTML efektai, kuriuos kiekvienas gali pridėti prie savo svetainių

8 puikūs HTML efektai, kuriuos kiekvienas gali pridėti prie savo svetainių

Norite, kad jūsų svetainė atrodytų nuostabiai-bet trūksta žiniatinklio kūrimo įgūdžių.





Nenusiminkite! Jums nereikia žinoti CSS ar PHP, kad sukurtumėte išgalvotą svetainę su nuostabiais efektais. Tam tiks kai kurios paprastos HTML žymės ir žinojimas, kaip kopijuoti ir įklijuoti.





Norėdami pradėti naudotis puikiais HTML efektais, surinkome šiuos nemokamus HTML efektų kodų šablonus. Jie pagerins jūsų svetainės funkcionalumą ir naudotojų patirtį, nepažeisdami banko. Nors dažniausiai jie yra HTML, šauniuose koduose taip pat gali būti CSS ir PHP.





1. Šaunus paralakso efektas su HTML

Tikriausiai matėte „Paralakso efektą“, naudojamą svetainėse su internetiniais skelbimais. Slinkdami straipsnį žemyn, atrodo, kad fono vaizdas slenka kitu tempu arba rodomas skelbimas.

Arba fono vaizdas keičiasi, kai lankotės skirtingose ​​svetainės dalyse. Tai puikus efektas, kuris suteikia turinio vizualinio gylio ir idealus, net jei to nepadarysite suprasti pagrindinį HTML kodą .



Galite žaisti su efektu ir nukopijuoti kodą paprastas „Parallax“ slinkimo efektas iš „W3Schools“ .

Pačioje sudėtingiausioje versijoje šis efektas yra HTML, CSS ir JS derinys.





Eikite į priekį ir gaukite aukščiau nurodytų kodų Antraštės/poraštės paralakso efektas iš „CodePen“ .

2. Slenkamas HTML komentarų laukelio kodas

Tai paprastas, bet naudingas HTML elementas, leidžiantis supakuoti ilgus teksto fragmentus į kompaktišką formatą. Tokiu būdu jis neužima visos vietos puslapyje.





Galite žaisti su spalvomis ir teksto laukelio dydžiu, kad jis atitiktų jūsų poreikius.

Įvestis:


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! :)

Jei norite kažko šiek tiek įdomesnio, taip pat galite gauti kodą pritaikomas komentarų laukelis iš „Quackit“ .

Jie siūlo kelis šablonus, tačiau taip pat galite naudoti jų redaktorių rankiniu būdu pakeisti ir išbandyti (paleisti) jūsų pasirinktinį kodą.

3. Šaunus HTML triukas: paryškintas tekstas

Su paprastuHTML žyma prie teksto ar vaizdų galite pridėti daugybę puikių efektų. Atminkite, kad ne visi jie veikia naršyklėse. Čia paminėti veikia „Google Chrome“, „Microsoft Edge“ ir „Mozilla Firefox“.

Šis HTML teksto efektas paryškina tekstą tarpžymes.

Įvestis:

Your highlighted text here.

Išvesties demonstracija:

4. Pridėkite fono paveikslėlį prie teksto

Taip pat galite pakeisti teksto spalvą arba pridėti fono paveikslėlį. Tai puikiai atrodo, jei teksto šriftas yra didesnis.

Įvestis:

MakeUseOf presents...

Tas pats efektas pasiekiamas pridedant stiliaus ir šrifto elementus prie teksto a žyma.

Kaip konvertuoti png į pdf windows

Išvesties demonstracija:

5. Naudinga HTML gudrybė norint pridėti pavadinimą Patarimas

Pavadinimo patarimas pasirodo, kai pele slinkiate ant „manipuliuoto“ teksto ar vaizdo. Jūs matėte, kaip jie naudojami svetainėse vaizduose, susietame tekste ar net darbalaukio programų meniu elementuose. Naudokite šį HTML kodą norėdami pridėti patarimą prie paprasto teksto savo tinklalapyje.

Įvestis:

Move your mouse over me!

Išvesties demonstracija:

6. Šauniausios HTML gudrybės: slinkimas arba krintantis tekstas

Ieškodami „marquee html“ „Google“ rasite mažą Velykų kiaušinį. Matote slinkties paieškos rezultatų skaičių viršuje? Tai efektas, sukurtas dabar pasenusios palapinės žymos. Nors šis kažkada įdomus HTML teksto efektas buvo nebenaudojamas, dauguma naršyklių jį vis dar palaiko.

Įvestis:

I wanna scroll with it, baby!

Išvesties demonstracija:

Tu gali pridėti papildomų atributų valdyti slinkimo elgseną, fono spalvą, kryptį, aukštį ir kt. Tačiau pasirūpinkite; šie poveikiai gali tapti gana erzinantys, jei jų vartojama per daug.

Norėdami gauti vėsų krentančio teksto efektą, vėl eikite į „Quackit“ ir nukopijuokite labai pritaikytą palapinės kodą.

7. Sukurkite šaunų perjungimo meniu su HTML

Šauniausi HTML triukai yra dinamiški HTML efektai. Tačiau jie dažnai yra pagrįsti scenarijumi. Čia yra vienas meniu efektas, dėl kurio sutiksite, kad jis atrodo labai slidus.

Tai šiek tiek sudėtingiau nei jūsų vidutinė HTML žyma, nes ji veikia su stiliaus lapu ir scenarijais. Privalumas yra tas, kad jums nereikia įkelti CSS ar scenarijaus failo, kad jis veiktų. Vietoj to tiesiog įklijuokite šį kodą į savo svetainės skiltį.

Įvestis:


.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

Išvesties demonstracija:

Deja, mes negalime čia parodyti šio efekto. Tačiau pirminis šaltinis, Dinaminis diskas , yra šio dinaminio HTML efekto darbinė kopija.

8. Gaukite HTML skaičiuoklę naudodami „Tableizer“

Jei norite savo svetainėje rodyti skaičiuoklę, leiskite Tableizer! paversti savo duomenis į HTML lentelę. Tiesiog įklijuokite neapdorotus duomenis iš „Excel“, „Google“ dokumento ar bet kurios kitos skaičiuoklės į keitiklio įrankį adresu tableizer.journalistopia.com . Pritvirtinkite stalo variantai , tada spustelėkite Padarykite tai lentelėmis gauti HTML išvestį.

Tai galbūt vienas iš nuostabiausių jūsų svetainės HTML kodų, kaip Tableize It! atlieka visus sunkius darbus.

Spustelėkite Nukopijuokite HTML į iškarpinę nukopijuokite HTML kodą ir pridėkite jį prie savo svetainės. Apsvarstykite galimybę redaguoti fono spalvas, kad jis atrodytų daug vėsiau.

kaip formatuoti usb

Nors tai tikrai nėra HTML efektas, jis yra gana patogus.

Daugiau įdomių HTML kodų ir efektų jūsų svetainei

HTML, CSS ir „JavaScript“ galios suteikia potencialiai neribotas nuostabių efektų jūsų svetainėje galimybes. Norite daugiau?

Parodėme aštuonis šaunius HTML kodus, kuriuos galite nukopijuoti, kad pagerintumėte savo svetainę. Nors jie yra skirtingi, juos visus lengva įgyvendinti, jei žinote pagrindinius HTML kodavimo būdus.

Dalintis Dalintis „Tweet“ Paštu 17 paprastų HTML kodų pavyzdžių, kuriuos galite išmokti per 10 minučių

Norite sukurti pagrindinį tinklalapį? Sužinokite šiuos HTML pavyzdžius ir išbandykite juos teksto rengyklėje, kad pamatytumėte, kaip jie atrodo jūsų naršyklėje.

Skaityti toliau
Susijusios temos
  • Programavimas
  • HTML
  • Interneto svetainių kūrimas
  • Žiniatinklio valdytojo įrankiai
Apie autorių Christianas Cawley(Paskelbta 1510 straipsnių)

Redaktoriaus pavaduotojas saugumo, „Linux“, „pasidaryk pats“, programavimo ir techninių paaiškinimų bei tikrai naudingų transliacijų kūrėjas, turintis didelę patirtį palaikant darbalaukį ir programinę įrangą. Žurnalo „Linux Format“ bendradarbis Kristianas yra „Raspberry Pi“ tinklininkas, „Lego“ mylėtojas ir retro žaidimų gerbėjas.

Daugiau iš Christiano Cawley

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia