8 Cool na Mga Epekto ng HTML Kahit sino Ay Maaaring Idagdag sa Kanilang Mga Website

8 Cool na Mga Epekto ng HTML Kahit sino Ay Maaaring Idagdag sa Kanilang Mga Website

Nais mo ang iyong website na magmukhang kamangha-mangha --- ngunit ang iyong mga kasanayan sa pagbuo ng web ay kulang.





Huwag mawalan ng pag-asa! Hindi mo kailangang malaman ang CSS o PHP upang makabuo ng isang magarbong site na may mga cool na epekto. Ang ilang mga simpleng mga tag ng HTML at pag-alam kung paano kumopya at mag-paste ay magagawa.



Upang makapagsimula ka sa ilang mga cool na epekto sa HTML, pinagsama namin ang mga libreng template ng code ng epekto ng HTML. Mapapahusay nila ang pagpapaandar at karanasan ng gumagamit ng iyong site, habang hindi sinisira ang bangko. Habang sila ay karamihan sa HTML ang mga cool na code na ito ay maaari ring maglaman ng ilang CSS at PHP.





1. Cool Parallax Epekto Sa HTML

Marahil ay nakita mo ang Parallax Effect na ginamit sa mga website na may mga online ad. Habang nag-scroll ka pababa ng isang artikulo, ang lilitaw ang imahe ng background upang mag-scroll sa ibang bilis, o lilitaw ang isang advert.

Bilang kahalili, marahil ay nagbabago ang imahe sa background habang binibisita mo ang iba't ibang bahagi ng site. Ito ay isang cool na epekto na nagdaragdag ng lalim ng visual sa nilalaman at perpekto kahit na hindi mo ginawa maunawaan ang pangunahing HTML code .



Maaari mong i-play ang epekto at kopyahin ang code para sa a simpleng epekto ng pag-scroll ng Parallax mula sa W3Schools .

Sa pinakasikat na bersyon nito, ang epektong ito ay isang kombinasyon ng HTML, CSS, at JS.



Sige at kunin ang mga code para sa itaas Epekto ng Header / Footer Parallax mula sa CodePen .

2. Maaaring i-scroll ang HTML Code Box Code

Ito ay isang simple ngunit kapaki-pakinabang na elemento ng HTML na hinahayaan kang mag-pack ng mahabang mga snippet ng teksto sa isang compact format. Sa ganitong paraan hindi nito inaabot ang buong puwang sa pahina.



Maaari mong i-play sa mga kulay at sukat ng text box upang gawin itong naaangkop sa iyong mga pangangailangan.

Input:


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

Kung nais mo ang isang bagay na medyo manlilibak, maaari mo ring makuha ang code para sa isang napapasadyang kahon ng puna mula sa Quackit .

Nag-aalok sila ng maraming mga template, ngunit maaari mo ring gamitin ang kanilang editor upang manu-manong baguhin at subukan (patakbuhin) ang iyong pasadyang code.

3. Isang Cool na HTML Trick: Naka-highlight na Teksto

Sa isang simpleHTML tag maaari kang magdagdag ng isang toneladang mga cool na epekto sa iyong teksto o mga imahe. Tandaan na hindi lahat sa kanila ay gumagana sa mga browser. Ang mga nabanggit dito ay gumagana sa Google Chrome, Microsoft Edge, at Mozilla Firefox.

Ang epekto ng teksto ng HTML na ito ay nagha-highlight sa teksto sa pagitan ngmga tag

Input:

Your highlighted text here.

Output demo:

4. Magdagdag ng Imahe sa Background sa Teksto

Gayundin, maaari mong baguhin ang kulay ng iyong teksto o magdagdag ng isang imahe sa background. Ang isang ito ay mukhang mahusay kung ang laki ng font ng teksto ay mas malaki.

Input:

MakeUseOf presents...

Ang parehong epekto ay nakakamit sa pamamagitan ng pagdaragdag ng mga elemento ng estilo at font sa teksto sa a tag

kung paano tanggalin ang isang gumagamit sa xbox isa

Output demo:

5. Kapaki-pakinabang na HTML Trick upang Magdagdag ng isang Tooltip ng Pamagat

Ang isang pamagat na tooltip ay lalabas kapag nag-scroll ka gamit ang mouse sa isang piraso ng 'manipulasyong' teksto o imahe. Nakita mo ang ginamit na ito sa mga website sa mga imahe, naka-link na teksto, o kahit mga item sa menu sa mga desktop app. Gamitin ang HTML code na ito upang magdagdag ng isang tooltip sa payak na teksto sa iyong webpage.

Input:

Move your mouse over me!

Output demo:

6. Ang Pinakalamig na Trick sa HTML Pa: Pag-scroll o Pagbagsak ng Teksto

Kapag naghanap ka para sa 'marquee html' sa Google, matutuklasan mo ang isang maliit na Easter Egg. Nakita ang bilang ng resulta ng paghahanap sa pag-scroll sa tuktok? Ito ay isang epekto na nilikha ng hindi na ginagamit na tag ng marquee. Habang ang dating cool na epekto ng teksto ng HTML na ito ay hindi na ginagamit, sinusuportahan pa rin ito ng karamihan sa mga browser.

Input:

I wanna scroll with it, baby!

Output demo:

Kaya mo magdagdag ng karagdagang mga katangian upang makontrol ang pag-uugali ng pag-scroll, kulay ng background, direksyon, taas, at higit pa. Mag-ingat, subalit; ang mga epektong ito ay maaaring maging lubos na nakakairita kung labis na magamit.

Para sa isang cool na bumabagsak na epekto ng teksto, magtungo ulit sa Quackit at kopyahin ang kanilang lubos na na-customize na marquee code.

7. Bumuo ng isang Cool Switchmenu Sa HTML

Ang pinaka-cool na mga trick sa HTML ay mga epekto ng HTML. Gayunpaman, madalas na batay sa script ang mga ito. Narito ang isang epekto para sa mga menu na sasang-ayon kang mukhang napaka-makinis.

Medyo mas kumplikado ito kaysa sa iyong average na tag ng HTML dahil gumagana ito sa isang style sheet at script. Ang kalamangan ay hindi mo kailangang mag-upload ng isang CSS o script file upang ito ay gumana. Sa halip, i-paste lamang ang sumusunod na code sa seksyon ng iyong website.

Input:


.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

Output demo:

Sa kasamaang palad, hindi namin maipakita dito ang epektong ito. Ngunit ang orihinal na mapagkukunan, Dynamic na Drive , nagtatampok ng isang gumaganang kopya ng pabago-bagong epekto ng HTML na ito.

8. Kumuha ng isang HTML Spreadsheet Sa Tableizer

Kung nais mong ipakita ang isang spreadsheet sa iyong site, hayaan ang Tableizer! ibahin ang iyong data sa isang HTML table. I-paste lamang ang hilaw na data mula sa Excel, Google Doc, o anumang iba pang spreadsheet sa converter tool sa tableizer.journalistopia.com . Basahin ang mga pagpipilian sa talahanayan , pagkatapos ay mag-click I-tableize Ito upang matanggap ang output ng HTML.

Ito ay marahil ang isa sa mga pinaka-cool na HTML code para sa iyong website, tulad ng Tableize It! ginagawa ang lahat ng pagsusumikap.

Mag-click Kopyahin ang HTML sa Clipboard upang makopya ang HTML code at idagdag ito sa iyong website. Isaalang-alang ang pag-edit ng mga kulay sa background upang gawing mas cool ito.

kung paano i-export ang mga email mula sa pananaw

Habang ito ay hindi talagang isang epekto sa HTML, ito ay lubos na madaling gamiting.

Higit pang mga Cool HTML Code at Epekto para sa Iyong Site

Ang lakas ng HTML, CSS, at JavaScript ay nag-aalok ng mga potensyal na walang limitasyong mga pagpipilian para sa nakamamanghang mga epekto sa iyong website. Gusto mo pa?

Ipinakita namin sa iyo ang walong mga cool na HTML code na maaari mong kopyahin upang mapahusay ang iyong website. Habang magkakaiba, madali silang lahat ipatupad hangga't alam mo ang pangunahing mga diskarte sa pag-coding ng HTML.

Magbahagi Magbahagi Mag-tweet Email 17 Mga Simpleng Halimbawa ng HTML Code na Maaari Mong Malaman sa loob ng 10 Minuto

Nais bang lumikha ng isang pangunahing webpage? Alamin ang mga halimbawang HTML at subukan ang mga ito sa isang text editor upang makita ang hitsura ng mga ito sa iyong browser.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • HTML
  • Pag-unlad sa Web
  • Mga Tool sa Webmaster
Tungkol sa May-akda Christian Cawley(1510 Mga Artikulo Na-publish)

Deputy Editor para sa Seguridad, Linux, DIY, Programming, at Tech Ipinaliwanag, at Tunay na Kapaki-pakinabang na tagagawa ng Podcast, na may malawak na karanasan sa suporta sa desktop at software. Isang nag-ambag sa magazine na Linux Format, si Christian ay isang Raspberry Pi tinkerer, Lego lover at retro gaming fan.

Higit pa Mula sa Christian Cawley

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe