8 coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann

Eskere Guru

Sie möchten, dass Ihre Website fantastisch aussieht – aber Ihre Webentwicklungsfähigkeiten fehlen.

Verzweifle nicht! Sie müssen weder CSS noch PHP kennen, um eine schicke Site mit coolen Effekten zu erstellen. Einige einfache HTML-Tags und das Wissen zum Kopieren und Einfügen reichen aus.

Um Ihnen den Einstieg in einige coole HTML-Effekte zu erleichtern, haben wir diese kostenlosen HTML-Effektcode-Vorlagen zusammengestellt. Sie verbessern die Funktionalität und Benutzererfahrung Ihrer Website, ohne die Bank zu sprengen. Obwohl es sich hauptsächlich um HTML handelt, können diese coolen Codes auch CSS und PHP enthalten.

1. Cooler Parallaxeneffekt mit HTML

Sie haben wahrscheinlich den Parallax-Effekt gesehen, der auf Websites mit Online-Anzeigen verwendet wird. Wenn Sie einen Artikel nach unten scrollen, wird das Hintergrundbild in einem anderen Tempo gescrollt, oder es wird eine Anzeige angezeigt.

Alternativ ändert sich möglicherweise das Hintergrundbild, wenn Sie verschiedene Teile der Site besuchen. Es ist ein cooler Effekt, der dem Inhalt visuelle Tiefe verleiht und ideal ist, selbst wenn Sie den grundlegenden HTML-Code nicht verstehen .

Sie können mit dem Effekt spielen und den Code für einen einfachen Parallax-Bildlaufeffekt von W3Schools kopieren .

In der anspruchsvollsten Version ist dieser Effekt eine Kombination aus HTML, CSS und JS.

Rufen Sie die Codes für den obigen Kopf- / Fußzeilen-Parallaxeneffekt von CodePen ab .

2. Bildlauffähiger HTML-Kommentarfeldcode

Dies ist ein einfaches, aber hilfreiches HTML-Element, mit dem Sie lange Textausschnitte in ein kompaktes Format packen können. Auf diese Weise nimmt es nicht den gesamten Platz auf der Seite ein.

Sie können mit den Farben und der Größe des Textfelds spielen, um es Ihren Anforderungen anzupassen.

Eingang:

 <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>

Wenn Sie etwas ausgefalleneres wünschen, können Sie auch Code für ein anpassbares Kommentarfeld von Quackit abrufen .

8 coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann - muo programming html effects custom

Sie bieten mehrere Vorlagen, aber Sie können auch ihren Editor verwenden, um Ihren benutzerdefinierten Code manuell zu ändern und zu testen (auszuführen).

3. Ein cooler HTML-Trick: Hervorgehobener Text

Mit einem einfachen <span> HTML-Tag können Sie Ihrem Text oder Ihren Bildern eine Menge cooler Effekte hinzufügen. Beachten Sie, dass nicht alle von ihnen über Browser hinweg funktionieren. Die hier genannten funktionieren in Google Chrome, Microsoft Edge und Mozilla Firefox.

Dieser HTML-Texteffekt hebt den Text zwischen den <span> -Tags hervor.

Eingang:

 <span style="background-color: #FFFF00>Your highlighted text here.</span>

Ausgabedemo:

8 coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann - muo programming html effects highlight2020

4. Fügen Sie dem Text ein Hintergrundbild hinzu

Ebenso können Sie die Farbe Ihres Textes ändern oder ein Hintergrundbild hinzufügen. Dieser sieht gut aus, wenn die Schriftgröße des Textes größer ist.

Eingang:

 <span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>

Der gleiche Effekt wird erzielt, indem dem Text in einem <strong> -Tag die Stil- und Schriftelemente hinzugefügt werden.

Ausgabedemo:

5. Nützlicher HTML-Trick zum Hinzufügen eines Titel-Tooltips

Ein Titel-Tooltip wird angezeigt, wenn Sie mit der Maus über ein Stück "manipulierten" Textes oder Bildes scrollen. Sie haben gesehen, dass diese auf Websites für Bilder, verknüpften Text oder sogar Menüelemente in Desktop-Apps verwendet werden. Verwenden Sie diesen HTML-Code, um dem einfachen Text auf Ihrer Webseite einen Tooltip hinzuzufügen.

Eingang:

 <span title="See, this is the tooltip. :)">Move your mouse over me!</span>

Ausgabedemo:

8 coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann - muo programming html effects tooltip

6. Die bisher coolsten HTML-Tricks: Scrollen oder Fallen von Text

Wenn Sie bei Google nach "marquee html" suchen, entdecken Sie ein kleines Osterei. Sehen Sie die Anzahl der scrollenden Suchergebnisse oben? Dies ist ein Effekt, der durch das mittlerweile veraltete Laufschrift-Tag erzeugt wird. Obwohl dieser einst coole HTML-Texteffekt veraltet ist, unterstützen ihn die meisten Browser weiterhin.

Eingang:

 <marquee>I wanna scroll with it, baby!</marquee>

Ausgabedemo:

8 coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann - muo programming html effects scroll

Sie können weitere Attribute hinzufügen , um das Bildlaufverhalten, die Hintergrundfarbe, die Richtung, die Höhe usw. zu steuern. Pass jedoch auf; Diese Effekte können bei Überbeanspruchung sehr irritierend werden.

Für einen coolen fallenden Texteffekt gehen Sie erneut zu Quackit und kopieren Sie den stark angepassten Laufschriftcode .

7. Erstellen Sie ein cooles Switchmenü mit HTML

Die coolsten HTML-Tricks sind dynamische HTML-Effekte. Sie basieren jedoch häufig auf Skripten. Hier ist ein Effekt für Menüs, dem Sie zustimmen werden, dass er sehr schick aussieht.

Es ist etwas komplizierter als ein durchschnittliches HTML-Tag, da es mit einem Stylesheet und Skripten funktioniert. Der Vorteil ist, dass Sie keine CSS- oder Skriptdatei hochladen müssen, damit es funktioniert. Fügen Sie stattdessen einfach den folgenden Code in den Abschnitt <head> Ihrer Website ein.

Eingang:

 <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>

Ausgabedemo:

Leider können wir diesen Effekt hier nicht nachweisen. Die ursprüngliche Quelle, Dynamic Drive , enthält jedoch eine Arbeitskopie dieses dynamischen HTML-Effekts.

8. Holen Sie sich eine HTML-Tabelle mit Tableizer

Wenn Sie eine Tabelle auf Ihrer Website anzeigen möchten, lassen Sie Tableizer! Verwandeln Sie Ihre Daten in eine HTML-Tabelle. Fügen Sie einfach die Rohdaten aus Excel, Google Doc oder einer anderen Tabelle in das Konverter-Tool unter tableizer.journalistopia.com ein . Passen Sie die Tabellenoptionen an und klicken Sie dann auf Tableize It , um die HTML-Ausgabe zu erhalten.

8 coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann - muo programming html effects tabeizer2020

Dies ist vielleicht einer der coolsten HTML-Codes für Ihre Website, wie Tableize It! macht die ganze harte Arbeit.

Klicken Sie auf HTML in Zwischenablage kopieren, um den HTML-Code zu kopieren und Ihrer Website hinzuzufügen. Überlegen Sie, ob Sie die Hintergrundfarben bearbeiten möchten, damit sie viel cooler aussehen.

Dies ist zwar kein wirklicher HTML-Effekt, aber sehr praktisch.

Weitere coole HTML-Codes und Effekte für Ihre Site

Die Leistungsfähigkeit von HTML, CSS und JavaScript bietet potenziell unbegrenzte Optionen für beeindruckende Effekte auf Ihrer Website. Mehr wollen?

  • HTML Goodies bietet Ihnen großartige <span> -Tag-Ideen.
  • Dynamic Drive verfügt über viele unglaubliche dynamische HTML-Skripte.
  • Quackit bietet coolen HTML-Code.

Wir haben Ihnen acht coole HTML-Codes gezeigt, die Sie kopieren können, um Ihre Website zu verbessern. Obwohl sie unterschiedlich sind, sind sie alle einfach zu implementieren, solange Sie grundlegende HTML-Codierungstechniken kennen.