Du vill att din webbplats ska se fantastisk ut — men dina färdigheter i webbutveckling saknas.
Misströsta inte! Du behöver inte kunna CSS eller PHP för att bygga en snygg sajt med coola effekter. Några enkla HTML-taggar och att veta hur man kopierar-och-klistrar duger.
För att komma igång med några coola HTML-effekter har vi sammanställt dessa free HTML-effektkodmallar. De kommer att förbättra funktionaliteten och användarupplevelsen på din webbplats, samtidigt som de inte spränger banken. Även om de mestadels är HTML kan dessa coola koder också innehålla en del CSS och PHP.
1. Cool parallaxeffekt med HTML
Du har förmodligen sett Parallax-effekten användas på webbplatser med onlineannonser. När du rullar nedåt i en artikel verkar bakgrundsbilden 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 förstår grundläggande HTML-kod.
Du kan leka med effekten och kopiera koden för en 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 Header/Sooter Parallax-effekt från CodePen.
Detta är ett enkelt men användbart HTML-element som låter dig packa långa textbitar 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:
<div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
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! :)</div>
Om du önskar något lite finare 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 editor för att manuellt ändra och testa (köra) din anpassade kod.
3. Ett coolt HTML-trick: Markerad text
Med en enkel HTML-tagg kan du lägga till massor av coola effekter till din text eller bilder. Observera att inte alla fungerar i alla webbläsare. De som nämns här fungerar i Google Chrome, Microsoft Edge och Mozilla Firefox.
Denna HTML-texteffekt framhäver texten mellan -taggarna.
Inmatning:
<span style="background-color: #FFFF00>Your highlighted text here.</span>
Utdatademo:
4. Lägg till bakgrundsbild till 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:
<span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>
Samma effekt uppnås genom att lägga till stil- och teckensnittselementen i texten i en -tagg.
Utdatademo:
Ett titelverktygstips kommer upp 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 den här HTML-koden för att lägga till ett verktygstips till vanlig text på din webbsida.
Inmatning:
<span title="See, this is the tooltip. :)">Move your mouse over me!</span>
Utdatademo:
6. De coolaste HTML-tricken hittills: rullande eller fallande text
När du söker efter “marquee html” på Google kommer du att upptäcka ett litet påskägg. Ser du det rullande sökresultatet överst? Det är en effekt som skapas av den nu föråldrade markeringsetiketten. Även om denna en gång så coola HTML-texteffekt har föråldrats, stöder de flesta webbläsare den fortfarande.
Inmatning:
<marquee>I wanna scroll with it, baby!</marquee>
Utdatademo:
Du kan lägga till ytterligare attribut för att styra rullningsbeteende, bakgrundsfärg, riktning, höjd med mera. Var dock försiktig; 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.
De coolaste HTML-tricken är dynamiska HTML-effekter. Men de är ofta manusbaserade. Här är en effekt för menyer som du håller med om att de ser väldigt snygga ut.
Det är lite mer komplicerat än din genomsnittliga HTML-tagg eftersom det fungerar med en stilmall och skript. Fördelen är att du inte behöver ladda upp en CSS- eller skriptfil för att få det att fungera. Istället klistrar du bara in följande kod i avsnittet
på din webbplats.
Inmatning:
<style type="text/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;
}
</style><script type="text/javascript">/***********************************************
* 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('<style type="text/css">n')
document.write('.submenu{display: none;}n')
document.write('</style>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<ar.length; 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</script>
And this code goes wherever you want the dynamic menu to appear.
<!-- Keep all menus within masterdiv-->
<div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div>
<span id="sub1">
- <a href="https://www.makeuseof.com/service/browser">Browsers/Addons</a><br>
- <a href="https://www.makeuseof.com/service/web_based">Web Apps</a><br>
- <a href="https://www.makeuseof.com/service/how-to">How-To Tips</a><br>
- <a href="https://www.makeuseof.com/service/applications">Cool Software</a><br>
...and more!
</span><div onclick="SwitchMenu('sub2')">Staff Writers</div>
<span id="sub2">
- <a href="https://www.makeuseof.com/tag/author/karl-l-gechlik/">Karl Gechlik</a><br>
- <a href="https://www.makeuseof.com/tag/author/tinsie/">Tina</a><br>
- <a href="https://www.makeuseof.com/tag/author/varunkashyap/">Varun Kashyap</a><br>
...and more!
</span><div onclick="SwitchMenu('sub3')">Miscellaneous</div>
<span id="sub3">
- <a href="https://www.makeuseof.com/about/">About</a><br>
- <a href="https://www.makeuseof.com/contact">Contact</a><br>
- <a href="https://www.makeuseof.com/archives-2">Archives</a><br>
- <a href="https://www.makeuseof.com/disclaimer">Disclaimer</a><br>
</span></div>
Utdatademo:
Tyvärr kan vi inte påvisa denna effekt här. Men den ursprungliga källan, Dynamic Drive, har en arbetskopia 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 Tabellisera det för att ta emot HTML-utdata.
Detta är kanske en av de coolaste HTML-koderna för din webbplats, eftersom Tableize It! gör allt det hårda arbetet.
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 för att få det att se mycket coolare ut.
Även om detta egentligen 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?
Vi har visat dig åtta coola HTML-koder som du kan kopiera för att förbättra din webbplats. Även om de är olika, är de alla lätta att implementera så länge du kan grundläggande HTML-kodningstekniker.
Om författaren
Christian Cawley (1556 publicerade artiklar)
Biträdande redaktör för säkerhet, Linux, gör-det-själv, programmering och teknisk förklarad, och riktigt användbar podcastproducent, med lång erfarenhet av skrivbords- och mjukvarustöd. Christian är en bidragsgivare till tidningen Linux Format och är en Raspberry Pi-pyssare, en Lego-älskare och en fan av retrospel.
Mer från Christian Cawley
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
