Home-theater-designers
Sie möchten, dass Ihre Website großartig aussieht, aber Ihre Fähigkeiten in der Webentwicklung fehlen.
Nicht verzweifeln! Sie müssen weder CSS noch PHP kennen, um eine ausgefallene 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 das Benutzererlebnis Ihrer Website, ohne die Bank zu sprengen. Obwohl es sich hauptsächlich um HTML handelt, können diese coolen Codes auch etwas CSS und PHP enthalten.
1. Cooler Parallax-Effekt mit HTML
Sie haben wahrscheinlich den Parallax-Effekt auf Websites mit Online-Werbung gesehen. Wenn Sie in einem Artikel nach unten scrollen, wird die Hintergrundbild scheint zu scrollen in einem anderen Tempo oder es erscheint eine Anzeige.
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, auch wenn Sie dies nicht tun Grundlegenden HTML-Code verstehen .
Sie können mit dem Effekt spielen und den Code für a . kopieren einfacher Parallax-Scrolling-Effekt von W3Schools .
In seiner ausgefeiltesten Version ist dieser Effekt eine Kombination aus HTML, CSS und JS.
Fahren Sie fort und holen Sie sich die Codes für die oben genannten Header/Footer Parallax-Effekt von CodePen .
2. Scrollbarer HTML-Kommentarfeldcode
Dies ist ein einfaches, aber hilfreiches HTML-Element, mit dem Sie lange Textschnipsel 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 Bedürfnissen anzupassen.
Eingang:
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! :) Wenn Sie es etwas schicker mögen, können Sie auch Code für holen ein anpassbares Kommentarfeld von Quackit .
Sie bieten mehrere Vorlagen an, aber Sie können ihren Editor auch verwenden, um Ihren benutzerdefinierten Code manuell zu ändern und zu testen (auszuführen).
3. Ein cooler HTML-Trick: Hervorgehobener Text
Mit einem einfachenHTML-Tag können Sie Ihrem Text oder Ihren Bildern viele coole Effekte hinzufügen. Beachten Sie, dass nicht alle von ihnen browserübergreifend funktionieren. Die hier genannten funktionieren in Google Chrome, Microsoft Edge und Mozilla Firefox.
Dieser HTML-Texteffekt hebt den Text zwischen denStichworte.
Eingang:
Your highlighted text here.Ausgabe-Demo:
4. Hintergrundbild zum Text hinzufügen
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:
MakeUseOf presents...Der gleiche Effekt wird durch das Hinzufügen der Stil- und Schriftelemente zum Text in a . erreicht Schild.
Gedankenspiele, um mit Freunden zu spielen
Ausgabe-Demo:
5. Nützlicher HTML-Trick zum Hinzufügen eines Titel-Tooltips
Ein Titel-Tooltip erscheint, wenn Sie mit der Maus über einen „manipulierten“ Text oder ein Bild scrollen. Sie haben diese auf Websites für Bilder, verknüpften Text oder sogar Menüelemente in Desktop-Apps verwendet. Verwenden Sie diesen HTML-Code, um einen Tooltip zum Nur-Text auf Ihrer Webseite hinzuzufügen.
Eingang:
Move your mouse over me!Ausgabe-Demo:
6. Die bisher coolsten HTML-Tricks: Scrollender oder fallender Text
Wenn Sie bei Google nach „marquee html“ suchen, werden Sie ein kleines Easter Egg entdecken. Sehen Sie die Anzahl der scrollenden Suchergebnisse oben? Dies ist ein Effekt, der durch das mittlerweile veraltete Marquee-Tag erzeugt wird. Dieser einst coole HTML-Texteffekt ist zwar veraltet, wird aber von den meisten Browsern immer noch unterstützt.
Eingang:
I wanna scroll with it, baby!Ausgabe-Demo:
Du kannst weitere Attribute hinzufügen um das Scrollverhalten, die Hintergrundfarbe, die Richtung, die Höhe und mehr zu steuern. Passen Sie jedoch auf; diese Effekte können bei übermäßigem Gebrauch sehr irritierend werden.
Für einen coolen fallenden Texteffekt, Geh wieder zu Quackit und kopieren Sie ihren hochgradig angepassten Marquee-Code.
7. Erstellen Sie ein cooles Switchmenu mit HTML
Die coolsten HTML-Tricks sind dynamische HTML-Effekte. Sie sind jedoch oft skriptbasiert. Hier ist ein Effekt für Menüs, von dem Sie zustimmen werden, dass er sehr glatt 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 Ihrer Website ein.
Eingang:
.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
Ausgabe-Demo:
Leider können wir diesen Effekt hier nicht nachweisen. Aber die Originalquelle Dynamischer Antrieb , enthält eine Arbeitskopie dieses dynamischen HTML-Effekts.
8. Holen Sie sich eine HTML-Tabelle mit Tableizer
Wenn Sie eine Tabelle auf Ihrer Site anzeigen möchten, lassen Sie Tableizer! wandeln Sie Ihre Daten in eine HTML-Tabelle um. Fügen Sie einfach die Rohdaten aus Excel, Google Doc oder einer anderen Tabelle in das Konverter-Tool unter . ein tableizer.journalistopia.com . Optimiere die Tischoptionen , dann klick Tableize It um die HTML-Ausgabe zu erhalten.
Dies ist vielleicht einer der coolsten HTML-Codes für Ihre Website, da Tableize It! macht die ganze harte Arbeit.
Klicken HTML in die Zwischenablage kopieren um den HTML-Code zu kopieren und zu Ihrer Website hinzuzufügen. Erwägen Sie, die Hintergrundfarben zu bearbeiten, damit sie viel cooler aussehen.
So ändern Sie das primäre Google-Konto
Obwohl dies nicht wirklich ein HTML-Effekt ist, ist es ziemlich praktisch.
Mehr coole HTML-Codes und Effekte für Ihre Site
Die Leistungsfähigkeit von HTML, CSS und JavaScript bietet potenziell unbegrenzte Möglichkeiten für beeindruckende Effekte auf Ihrer Website. Mehr wollen?
- HTML-Goodies gibt dir tollTag-Ideen.
- Dynamischer Antrieb hat 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.
Teilen Teilen Tweet Email 17 einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen könnenMöchten Sie eine einfache Webseite erstellen? Lernen Sie diese HTML-Beispiele und probieren Sie sie in einem Texteditor aus, um zu sehen, wie sie in Ihrem Browser aussehen.
Weiter lesen Verwandte Themen- Programmierung
- HTML
- Web Entwicklung
- Webmaster werkzeuge
Stellvertretender Redakteur für Sicherheit, Linux, DIY, Programmierung und Tech Explained und wirklich nützlicher Podcast-Produzent mit umfangreicher Erfahrung im Desktop- und Software-Support. Als Mitwirkender für das Linux-Format-Magazin ist Christian ein Raspberry-Pi-Tüftler, Lego-Liebhaber und Retro-Gaming-Fan.
Mehr von Christian CawleyAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren