8 kule HTML -effekter alle kan legge til på nettstedene sine

8 kule HTML -effekter alle kan legge til på nettstedene sine

Du vil at nettstedet ditt skal se fantastisk ut --- men dine webutviklingskunnskaper mangler.





Fortvil ikke! Du trenger ikke å kjenne CSS eller PHP for å bygge et fancy nettsted med kule effekter. Noen enkle HTML-koder og å vite hvordan du kopierer og limer inn vil gjøre.



For å komme i gang med noen kule HTML -effekter, har vi samlet disse gratis HTML -effektkodemalene. De vil forbedre funksjonaliteten og brukeropplevelsen på nettstedet ditt, samtidig som de ikke bryter banken. Selv om de for det meste er HTML, kan disse kule kodene også inneholde noen CSS og PHP.





1. Kul Parallax -effekt med HTML

Du har sannsynligvis sett Parallax -effekten brukt på nettsteder med annonser på nettet. Når du ruller ned en artikkel, vil bakgrunnsbildet ser ut til å rulle i et annet tempo, eller det vises en annonse.

Alternativt kan bakgrunnsbildet kanskje endres når du besøker forskjellige deler av nettstedet. Det er en kul effekt som gir visuell dybde til innholdet og ideelt selv om du ikke gjør det forstå grunnleggende HTML -kode .



Du kan leke med effekten og kopiere koden for a enkel Parallax -rulleeffekt fra W3Schools .

I sin mest sofistikerte versjon er denne effekten en kombinasjon av HTML, CSS og JS.



Gå videre og hent kodene for ovennevnte Topptekst/bunntekst Parallakseffekt fra CodePen .

2. Rullbar HTML -kommentarfeltkode

Dette er et enkelt, men nyttig HTML -element som lar deg pakke lange tekstutdrag i et kompakt format. På denne måten tar den ikke opp hele plassen på siden.



Du kan leke med fargene og størrelsen på tekstboksen slik at den passer dine behov.

Inngang:


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

Hvis du ønsker noe litt mer avansert, kan du også hente kode for en tilpassbar kommentarfelt fra Quackit .

De tilbyr flere maler, men du kan også bruke redigeringsprogrammet til å endre og teste (kjøre) den tilpassede koden manuelt.

3. Et kult HTML -triks: Fremhevet tekst

Med en enkelHTML -taggen du kan legge til massevis av kule effekter på teksten eller bildene dine. Vær oppmerksom på at ikke alle fungerer på tvers av nettlesere. De nevnte her fungerer i Google Chrome, Microsoft Edge og Mozilla Firefox.

Denne HTML -teksteffekten fremhever teksten mellomtagger.

Inngang:

Your highlighted text here.

Utdata demo:

4. Legg bakgrunnsbilde til tekst

På samme måte kan du endre fargen på teksten eller legge til et bakgrunnsbilde. Denne ser flott ut hvis tekstens skriftstørrelse er større.

Inngang:

MakeUseOf presents...

Den samme effekten oppnås ved å legge stilen og skriftelementene til teksten i a stikkord.

hvorfor får jeg ikke varsler?

Utdata demo:

5. Nyttig HTML -triks for å legge til et verktøytips for tittel

Et tittelverktøytips kommer opp når du ruller med musen over et stykke manipulert tekst eller bilde. Du har sett disse brukt på nettsteder på bilder, lenketekst eller til og med menyelementer i skrivebordsprogrammer. Bruk denne HTML -koden til å legge til et verktøytips for ren tekst på nettsiden din.

Inngang:

Move your mouse over me!

Utdata demo:

6. De kuleste HTML -triksene ennå: Rulling eller fallende tekst

Når du søker etter 'telt html' på Google, finner du et lite påskeegg. Ser du det rullende søkeresultatet øverst? Det er en effekt skapt av den nå utdaterte markeringsbrikken. Selv om denne en gang så kule HTML-teksteffekten er blitt utfaset, støtter de fleste nettlesere den fortsatt.

Inngang:

I wanna scroll with it, baby!

Utdata demo:

Du kan legge til flere attributter for å kontrollere rullende oppførsel, bakgrunnsfarge, retning, høyde og mer. Vær forsiktig, men; disse effektene kan bli ganske irriterende hvis de brukes for mye.

For en kul fallende teksteffekt, dra til Quackit igjen og kopier den svært tilpassede teltkoden.

7. Bygg en kul switchmeny med HTML

De kuleste HTML -triksene er dynamiske HTML -effekter. Imidlertid er de ofte skriptbaserte. Her er en effekt for menyer som du er enig i ser veldig glatt ut.

Det er litt mer komplisert enn din gjennomsnittlige HTML -tag fordi det fungerer med et stilark og skript. Fordelen er at du ikke trenger å laste opp en CSS- eller skriptfil for å få det til å fungere. I stedet limer du bare inn følgende kode i delen av nettstedet ditt.

Inngang:


.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

Utdata demo:

Dessverre kan vi ikke demonstrere denne effekten her. Men den opprinnelige kilden, Dynamisk stasjon , inneholder en arbeidskopi av denne dynamiske HTML -effekten.

8. Få et HTML -regneark med Tableizer

Hvis du vil vise et regneark på nettstedet ditt, kan du la Tableizer! forvandle dataene dine til en HTML -tabell. Bare lim inn rådata fra Excel, Google Doc eller et annet regneark i konverteringsverktøyet på tableizer.journalistopia.com . Juster bordalternativer , og klikk deretter Tabellerer det for å motta HTML -utdata.

Dette er kanskje en av de kuleste HTML -kodene for nettstedet ditt, som Tableize It! gjør alt det harde arbeidet.

Klikk Kopier HTML til utklippstavlen for å kopiere HTML -koden og legge den til på nettstedet ditt. Vurder å redigere bakgrunnsfargene for å få det til å se mye kulere ut.

hvordan sende e -post til et telefonnummer

Selv om dette egentlig ikke er en HTML -effekt, er det ganske praktisk.

Flere kule HTML -koder og effekter for nettstedet ditt

Kraften til HTML, CSS og JavaScript tilbyr potensielt ubegrensede alternativer for fantastiske effekter på nettstedet ditt. Ønsker mer?

Vi har vist deg åtte kule HTML -koder som du kan kopiere for å forbedre nettstedet ditt. Selv om de er forskjellige, er de alle enkle å implementere så lenge du kjenner grunnleggende HTML -kodingsteknikker.

Dele Dele kvitring E -post 17 enkle HTML -kodeeksempler du kan lære på 10 minutter

Vil du lage en grunnleggende webside? Lær disse HTML -eksemplene, og prøv dem i et tekstredigeringsprogram for å se hvordan de ser ut i nettleseren din.

Les neste Relaterte temaer
  • Programmering
  • HTML
  • Webutvikling
  • Verktøy for nettredaktører
Om forfatteren Christian Cawley(1510 artikler publisert)

Nestlederedaktør for sikkerhet, Linux, gjør -det -selv, programmering og teknologi forklart, og virkelig nyttig podcast -produsent, med lang erfaring innen desktop og programvarestøtte. Christian er en bidragsyter til magasinet Linux Format, og er en Raspberry Pi -tinkerer, en lego -elsker og en retro spillfan.

Mer fra Christian Cawley

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere