Home-theater-designers
Du vill att din webbplats ska se fantastisk ut --- men dina webbutvecklingskunskaper saknas.
Förtvivla inte! Du behöver inte kunna CSS eller PHP för att bygga en snygg webbplats med coola effekter. Några enkla HTML-taggar och att veta hur man kopierar och klistrar in kommer att göra.
För att komma igång med några häftiga HTML -effekter har vi sammanställt dessa gratis HTML -effektkodmallar. De kommer att förbättra funktionaliteten och användarupplevelsen på din webbplats, samtidigt som de inte bryter mot banken. Även om de mestadels är HTML kan dessa coola koder också innehålla lite CSS och PHP.
1. Cool Parallax -effekt med HTML
Du har förmodligen sett Parallax -effekten som används på webbplatser med onlineannonser. När du rullar ner i en artikel visas bakgrundsbilden visas för att rulla i en annan takt, eller så visas en annons.
Alternativt kanske bakgrundsbilden ändras när du besöker olika delar av webbplatsen. Det är en cool effekt som ger visuellt djup till innehållet och perfekt även om du inte gör det förstå grundläggande HTML -kod .
Du kan spela med effekten och kopiera koden för a enkel Parallax -rullningseffekt från W3Schools .
I sin mest sofistikerade version är denna effekt en kombination av HTML, CSS och JS.
Fortsätt och hämta koderna för ovanstående Sidhuvud/sidfot Parallaxeffekt från CodePen .
2. Rullbar HTML -kommentarfältkod
Detta är ett enkelt men användbart HTML -element som låter dig packa långa textavsnitt i ett kompakt format. På så sätt tar det inte upp hela utrymmet på sidan.
Du kan leka med färgerna och storleken på textrutan så att den passar dina behov.
Inmatning:
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! :) Om du önskar något lite snyggare kan du också hämta kod för en anpassningsbar kommentarsruta från Quackit .
De erbjuder flera mallar, men du kan också använda deras redigerare för att manuellt ändra och testa (köra) din anpassade kod.
3. Ett coolt HTML -trick: Markerad text
Med en enkelHTML -tagg kan du lägga till massor av coola effekter till din text eller bilder. Observera att inte alla fungerar i webbläsare. De som nämns här fungerar i Google Chrome, Microsoft Edge och Mozilla Firefox.
Denna HTML -texteffekt markerar texten mellantaggar.
Inmatning:
Your highlighted text here.Utdata:
4. Lägg till bakgrundsbild i text
På samma sätt kan du ändra färgen på din text eller lägga till en bakgrundsbild. Den här ser bra ut om textens teckenstorlek är större.
Inmatning:
MakeUseOf presents...Samma effekt uppnås genom att lägga till stil och teckensnittselement till text i a märka.
strömma filmer gratis online utan registrering
Utdata:
5. Användbart HTML -trick för att lägga till ett verktygstips för en titel
Ett titelverktygstips visas när du rullar med musen över en bit 'manipulerad' text eller bild. Du har sett dessa användas på webbplatser på bilder, länkad text eller till och med menyalternativ i skrivbordsappar. Använd denna HTML -kod för att lägga till ett verktygstips till vanlig text på din webbsida.
Inmatning:
Move your mouse over me!Utdata:
6. De häftigaste HTML -tricken ännu: Scrolling or Falling Text
När du söker efter 'markerings html' på Google upptäcker du ett litet påskägg. Ser du antalet rullande sökresultat högst upp? Det är en effekt som skapas av den nu föråldrade markeringstaggen. Även om denna en gång så häftiga HTML-texteffekt har utfasats, stöder de flesta webbläsare den fortfarande.
Inmatning:
I wanna scroll with it, baby!Utdata demo:
Du kan lägg till ytterligare attribut för att kontrollera rullningsbeteende, bakgrundsfärg, riktning, höjd och mer. Var försiktig, dock; dessa effekter kan bli ganska irriterande om de överanvänds.
För en cool fallande texteffekt, gå till Quackit igen och kopiera deras mycket anpassade markeringskod.
7. Skapa en cool switchmeny med HTML
De coolaste HTML -tricken är dynamiska HTML -effekter. De är dock ofta skriptbaserade. Här är en effekt för menyer som du kommer överens om ser väldigt snygg ut.
Det är lite mer komplicerat än din genomsnittliga HTML -tagg eftersom det fungerar med ett formatmall och skript. Fördelen är att du inte behöver ladda upp en CSS- eller skriptfil för att få det att fungera. Klistra istället in följande kod i avsnittet på din webbplats.
Inmatning:
.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:
Tyvärr kan vi inte visa denna effekt här. Men den ursprungliga källan, Dynamisk enhet , innehåller en fungerande kopia av denna dynamiska HTML -effekt.
8. Skaffa ett HTML -kalkylblad med Tableizer
Om du vill visa ett kalkylblad på din webbplats, låt Tableizer! omvandla dina data till en HTML -tabell. Klistra bara in rådata från Excel, Google Doc eller något annat kalkylblad i konverteringsverktyget på tableizer.journalistopia.com . Justera bordsalternativ , Klicka sedan Tabellera det för att ta emot HTML -utmatningen.
Detta är kanske en av de coolaste HTML -koder för din webbplats, som Tableize It! gör allt hårt arbete.
Klick Kopiera HTML till Urklipp för att kopiera HTML -koden och lägga till den på din webbplats. Överväg att redigera bakgrundsfärgerna så att det ser mycket svalare ut.
stäng av snabbstart Windows 10
Även om detta inte är en HTML -effekt, är det ganska praktiskt.
Fler coola HTML -koder och effekter för din webbplats
Kraften i HTML, CSS och JavaScript erbjuder potentiellt obegränsade alternativ för fantastiska effekter på din webbplats. Vill ha mer?
- HTML -godsaker ger dig bratagga idéer.
- Dynamisk enhet har många otroliga dynamiska HTML -skript.
- Quackit erbjuder cool HTML -kod.
Vi har visat dig åtta häftiga HTML -koder som du kan kopiera för att förbättra din webbplats. Även om de är olika är de alla enkla att implementera så länge du känner till grundläggande HTML -kodningstekniker.
Dela med sig Dela med sig Tweet E-post 17 enkla HTML -kodexempel du kan lära dig på 10 minuterVill du skapa en grundläggande webbsida? Lär dig dessa HTML -exempel och prova dem i en textredigerare för att se hur de ser ut i din webbläsare.
Läs Nästa Relaterade ämnen- Programmering
- HTML
- Webbutveckling
- Verktyg för webbansvariga
Biträdande redaktör för säkerhet, Linux, DIY, programmering och teknik förklarad, och verkligen användbar podcastproducent, med stor erfarenhet av skrivbords- och programvarusupport. Christian är en bidragsgivare till tidningen Linux Format och är en Raspberry Pi -tinkerer, Lego -älskare och retrospelfläkt.
Mer från Christian CawleyPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera