Home-theater-designers
Chcete, aby vaše webové stránky vypadaly úžasně --- ale vaše dovednosti pro vývoj webových aplikací chybí.
Nezoufejte! K vybudování efektního webu se skvělými efekty nemusíte znát CSS ani PHP. Některé jednoduché značky HTML a znalost kopírování a vkládání budou stačit.
Abyste mohli začít s některými skvělými efekty HTML, zkompilovali jsme tyto šablony kódu HTML efektů zdarma. Vylepší funkčnost a uživatelský komfort vašeho webu, aniž by narušily banku. Přestože jsou tyto skvělé kódy většinou HTML, mohou také obsahovat některé CSS a PHP.
1. Skvělý efekt paralaxy s HTML
Pravděpodobně jste viděli efekt Paralaxy používaný na webových stránkách s online reklamami. Při posouvání článku dolů obrázek na pozadí se posouvá jiným tempem, nebo se objeví reklama.
Alternativně se může obrázek na pozadí měnit při návštěvě různých částí webu. Je to skvělý efekt, který dodává obsahu vizuální hloubku a je ideální, i když ne porozumět základnímu HTML kódu .
Můžete si hrát s efektem a zkopírovat kód pro jednoduchý efekt posouvání paralaxy od W3Schools .
Ve své nejpropracovanější verzi je tento efekt kombinací HTML, CSS a JS.
Pokračujte a načtěte kódy pro výše uvedené Efekt paralaxy záhlaví/zápatí od CodePen .
2. Posuvný kód pole komentáře HTML
Jedná se o jednoduchý, ale užitečný prvek HTML, který vám umožní sbalit dlouhé úryvky textu do kompaktního formátu. Tímto způsobem nezabere celý prostor na stránce.
Můžete si pohrát s barvami a velikostí textového pole, aby vyhovovalo vašim potřebám.
Vstup:
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! :) Pokud toužíte po něčem malém, můžete si také načíst kód přizpůsobitelné pole pro komentáře od Quackit .
Nabízejí několik šablon, ale jejich editor můžete také použít k ruční změně a testování (spuštění) vlastního kódu.
3. Skvělý trik HTML: zvýrazněný text
S jednoduchýmHTML tag, můžete do svého textu nebo obrázků přidat spoustu skvělých efektů. Všimněte si, že ne všechny fungují napříč prohlížeči. Ty zde uvedené fungují v Google Chrome, Microsoft Edge a Mozilla Firefox.
Tento textový efekt HTML zvýrazňuje text mezitagy.
Vstup:
Your highlighted text here.Výstup demo:
4. Přidejte do textu obrázek na pozadí
Stejně tak můžete změnit barvu textu nebo přidat obrázek na pozadí. Toto vypadá skvěle, pokud je velikost písma textu větší.
Vstup:
MakeUseOf presents...Stejného efektu je dosaženo přidáním prvků stylu a písma do textu v souboru štítek.
jak povolit flash v chromu
Výstup demo:
5. Užitečný trik HTML pro přidání popisku názvu
Popisek názvu se objeví, když myší přejedete po kousku „zmanipulovaného“ textu nebo obrázku. Uvidíte, že se tyto používají na webových stránkách na obrázcích, propojeném textu nebo dokonce v položkách nabídky v desktopových aplikacích. Pomocí tohoto kódu HTML přidejte popisek k prostému textu na svou webovou stránku.
Vstup:
Move your mouse over me!Výstup demo:
6. Zatím nejúžasnější triky HTML: posouvání nebo padající text
Když na Googlu vyhledáte „marquee html“, objevíte malé velikonoční vajíčko. Chcete zobrazit počet výsledků posouvání nahoře? To je efekt vytvořený dnes již zastaralým tagem markýzy. Přestože byl tento kdysi skvělý textový efekt HTML zastaralý, většina prohlížečů jej stále podporuje.
Vstup:
I wanna scroll with it, baby!Výstup demo:
Můžeš přidejte další atributy k ovládání chování při posouvání, barvy pozadí, směru, výšky a dalších. Dávejte si však pozor; tyto účinky mohou být při nadměrném používání docela dráždivé.
Chcete -li efekt efektního padajícího textu, zamiřte znovu do Quackitu a zkopírujte jejich vysoce přizpůsobený značkovací kód.
7. Vybudujte si skvělé přepínací menu s HTML
Nejlepší triky HTML jsou dynamické efekty HTML. Často jsou však založeny na skriptech. Zde je jeden efekt pro nabídky, se kterým budete souhlasit, vypadá velmi úhledně.
Je to trochu komplikovanější než váš průměrný tag HTML, protože funguje se stylem a skripty. Výhodou je, že abyste mohli fungovat, nemusíte nahrávat soubor CSS nebo skript. Místo toho jednoduše vložte následující kód do části vašeho webu.
Vstup:
.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
Výstup demo:
Zde bohužel tento účinek nemůžeme prokázat. Ale původní zdroj, Dynamický pohon , představuje funkční kopii tohoto dynamického efektu HTML.
8. Získejte tabulku HTML pomocí Tableizer
Pokud chcete na svém webu zobrazit tabulku, nechte Tableizer! transformujte svá data do tabulky HTML. Stačí vložit nezpracovaná data z Excelu, Google Doc nebo jakékoli jiné tabulky do nástroje pro převod na adrese tableizer.journalistopia.com . Vyladit možnosti stolu , poté klikněte Tableize It pro příjem výstupu HTML.
Toto je možná jeden z nejlepších kódů HTML pro vaše webové stránky, protože Tableize It! dělá veškerou tvrdou práci.
Klikněte Zkopírujte HTML do schránky zkopírujte kód HTML a přidejte jej na svůj web. Zvažte úpravu barev pozadí, aby vypadal mnohem chladněji.
jak zobrazit ikonu bluetooth v hlavním panelu Windows 10
I když se nejedná o efekt HTML, je to docela praktické.
Další skvělé HTML kódy a efekty pro vaše stránky
Síla HTML, CSS a JavaScript nabízí potenciálně neomezené možnosti ohromujících efektů na vašem webu. Chcete více?
- HTML dobroty dává vám skvěléoznačit nápady.
- Dynamický pohon má mnoho neuvěřitelných dynamických skriptů HTML.
- Šašek nabízí skvělý HTML kód.
Ukázali jsme vám osm skvělých kódů HTML, které můžete zkopírovat a vylepšit tak své webové stránky. I když jsou různé, lze je snadno implementovat, pokud znáte základní techniky kódování HTML.
Podíl Podíl tweet E-mailem 17 jednoduchých příkladů HTML kódu, které se můžete naučit za 10 minutChcete vytvořit základní webovou stránku? Naučte se tyto příklady HTML a vyzkoušejte si je v textovém editoru, abyste zjistili, jak vypadají ve vašem prohlížeči.
Číst dále Související témata- Programování
- HTML
- Vývoj webu
- Nástroje pro webmastery
Zástupce redaktora pro oblast bezpečnosti, Linuxu, kutilství, programování a techniky a skutečně užitečného výrobce podcastů s rozsáhlými zkušenostmi s podporou desktopů a softwaru. Christian, který přispívá do časopisu Linux Format, je drotář Raspberry Pi, milovník Lega a fanoušek retro her.
Více od Christiana CawleyhoPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru