Home-theater-designers
U wilt dat uw website er geweldig uitziet --- maar uw vaardigheden op het gebied van webontwikkeling ontbreken.
Wanhoop niet! Je hoeft geen kennis te hebben van CSS of PHP om een mooie site met coole effecten te bouwen. Enkele eenvoudige HTML-tags en weten hoe u moet kopiëren en plakken, is voldoende.
Om u op weg te helpen met enkele coole HTML-effecten, hebben we deze gratis HTML-effectcodesjablonen samengesteld. Ze zullen de functionaliteit en gebruikerservaring van uw site verbeteren, zonder de bank te breken. Hoewel ze meestal HTML zijn, kunnen deze coole codes ook wat CSS en PHP bevatten.
1. Cool parallax-effect met HTML
Je hebt het Parallax-effect waarschijnlijk gezien op websites met online advertenties. Terwijl u door een artikel naar beneden scrolt, achtergrondafbeelding lijkt te scrollen in een ander tempo, of er verschijnt een advertentie.
Als alternatief kan de achtergrondafbeelding veranderen als u verschillende delen van de site bezoekt. Het is een cool effect dat visuele diepte toevoegt aan de inhoud en ideaal is, zelfs als je dat niet doet basis HTML-code begrijpen .
Je kunt met het effect spelen en de code kopiëren voor een eenvoudig Parallax-scrolleffect van W3Schools .
In de meest geavanceerde versie is dit effect een combinatie van HTML, CSS en JS.
Ga je gang en haal de codes voor het bovenstaande op Header/Footer Parallax-effect van CodePen .
2. Scrollbare HTML-commentaarvakcode
Dit is een eenvoudig maar handig HTML-element waarmee u lange tekstfragmenten in een compact formaat kunt inpakken. Op deze manier neemt het niet de volledige ruimte op de pagina in beslag.
U kunt spelen met de kleuren en de grootte van het tekstvak om het aan uw behoeften aan te passen.
Invoer:
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! :) Als je iets exclusiever wilt, kun je ook code ophalen voor een aanpasbaar opmerkingenveld van Quackit .
Ze bieden verschillende sjablonen, maar u kunt hun editor ook gebruiken om uw aangepaste code handmatig te wijzigen en te testen (uit te voeren).
3. Een coole HTML-truc: gemarkeerde tekst
Met een simpeleHTML-tag kunt u een heleboel coole effecten toevoegen aan uw tekst of afbeeldingen. Houd er rekening mee dat ze niet allemaal in verschillende browsers werken. De hier genoemde werken in Google Chrome, Microsoft Edge en Mozilla Firefox.
Dit HTML-teksteffect markeert de tekst tussen delabels.
Invoer:
Your highlighted text here.Uitvoerdemo:
4. Achtergrondafbeelding toevoegen aan tekst
Op dezelfde manier kunt u de kleur van uw tekst wijzigen of een achtergrondafbeelding toevoegen. Deze ziet er geweldig uit als de lettergrootte van de tekst groter is.
Invoer:
MakeUseOf presents...Hetzelfde effect wordt bereikt door de stijl- en lettertype-elementen toe te voegen aan tekst in a label.
volgen ze elkaar twitter
Uitvoerdemo:
5. Handige HTML-truc om knopinfo voor een titel toe te voegen
Een titel-tooltip verschijnt als je met de muis over een stukje 'gemanipuleerde' tekst of afbeelding scrolt. Je hebt deze gezien op websites op afbeeldingen, gelinkte tekst of zelfs menu-items in desktop-apps. Gebruik deze HTML-code om knopinfo toe te voegen aan platte tekst op uw webpagina.
Invoer:
Move your mouse over me!Uitvoerdemo:
6. De coolste HTML-trucs tot nu toe: scrollende of vallende tekst
Als je op Google zoekt op 'marquee html', vind je een klein Easter Egg. Zie je het aantal scrollende zoekresultaten bovenaan? Dat is een effect dat wordt gecreëerd door de nu verouderde selectiekader-tag. Hoewel dit eens zo coole HTML-teksteffect is verouderd, ondersteunen de meeste browsers het nog steeds.
Invoer:
I wanna scroll with it, baby!Uitvoerdemo:
Jij kan voeg verdere attributen toe om het scrollgedrag, de achtergrondkleur, de richting, de hoogte en meer te regelen. Pas echter op; deze effecten kunnen behoorlijk irriterend worden als ze te veel worden gebruikt.
Voor een cool vallend teksteffect, ga weer naar Quackit en kopieer hun sterk aangepaste selectiekadercode.
7. Bouw een cool schakelmenu met HTML
De coolste HTML-trucs zijn dynamische HTML-effecten. Ze zijn echter vaak gebaseerd op scripts. Hier is een effect voor menu's waarvan u het eens bent dat het er erg gelikt uitziet.
Het is iets ingewikkelder dan je gemiddelde HTML-tag omdat het werkt met een stylesheet en scripts. Het voordeel is dat u geen CSS- of scriptbestand hoeft te uploaden om het te laten werken. Plak in plaats daarvan gewoon de volgende code in het gedeelte van uw website.
Invoer:
.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
Uitvoerdemo:
Helaas kunnen we dit effect hier niet aantonen. Maar de originele bron Dynamische aandrijving , bevat een werkkopie van dit dynamische HTML-effect.
8. Krijg een HTML-spreadsheet met Tableizer
Als u een spreadsheet op uw site wilt weergeven, laat Tableizer! zet uw gegevens om in een HTML-tabel. Plak de onbewerkte gegevens uit Excel, Google Doc of een andere spreadsheet in de conversietool op tableizer.journalistopia.com . Tweak de tafel opties , dan klikken Tableize It om de HTML-uitvoer te ontvangen.
Dit is misschien wel een van de coolste HTML-codes voor je website, zoals Tableize It! doet al het harde werk.
Klik HTML kopiëren naar klembord om de HTML-code te kopiëren en toe te voegen aan uw website. Overweeg om de achtergrondkleuren te bewerken om het er een stuk cooler uit te laten zien.
hoe de audio van een video te krijgen
Hoewel dit niet echt een HTML-effect is, is het best handig.
Meer coole HTML-codes en effecten voor uw site
De kracht van HTML, CSS en JavaScript biedt potentieel onbeperkte opties voor verbluffende effecten op uw website. Meer willen?
- HTML-goodies geeft je geweldigideeën taggen.
- Dynamische aandrijving heeft veel ongelooflijke dynamische HTML-scripts.
- Quackit biedt coole HTML-code.
We hebben je acht coole HTML-codes laten zien die je kunt kopiëren om je website te verbeteren. Hoewel ze verschillend zijn, zijn ze allemaal gemakkelijk te implementeren, zolang je de basistechnieken voor HTML-codering kent.
Deel Deel Tweeten E-mail 17 eenvoudige HTML-codevoorbeelden die u in 10 minuten kunt lerenWilt u een eenvoudige webpagina maken? Leer deze HTML-voorbeelden en probeer ze uit in een teksteditor om te zien hoe ze eruitzien in uw browser.
Lees volgende Gerelateerde onderwerpen- Programmeren
- HTML
- Webontwikkeling
- Webmasterhulpprogramma's
Plaatsvervangend redacteur voor beveiliging, Linux, doe-het-zelf, programmeren en technologie uitgelegd, en echt nuttige podcast-producent, met uitgebreide ervaring in desktop- en softwareondersteuning. Christian levert een bijdrage aan het tijdschrift Linux Format en is een Raspberry Pi-knutselaar, Lego-liefhebber en retro-gamingfan.
Meer van Christian CawleyAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren