Home-theater-designers
Voleu que el vostre lloc web tingui un aspecte increïble, però falten les vostres habilitats de desenvolupament web.
No us desespereu! No heu de conèixer CSS o PHP per crear un lloc elegant amb efectes genials. Hi haurà algunes etiquetes HTML senzilles i saber com copiar i enganxar.
Per començar amb alguns efectes HTML interessants, hem compilat aquestes plantilles de codi d’efecte HTML gratuïtes. Milloraran la funcionalitat i l'experiència d'usuari del vostre lloc, tot i que no suposaran cap problema. Tot i que són majoritàriament HTML, aquests codis interessants també poden contenir CSS i PHP.
1. Efecte Parallax fresc amb HTML
Probablement heu vist l’efecte Parallax utilitzat en llocs web amb anuncis en línia. Mentre es desplaça cap avall cap a un article, el fitxer apareix la imatge de fons per desplaçar-se a un ritme diferent, o apareix un anunci.
Com a alternativa, potser la imatge de fons canvia a mesura que visiteu diferents parts del lloc. És un efecte fresc que afegeix profunditat visual al contingut i és ideal fins i tot si no ho feu entendre el codi HTML bàsic .
Podeu jugar amb l’efecte i copiar el codi d’un fitxer simple efecte de desplaçament Parallax des de W3Schools .
En la seva versió més sofisticada, aquest efecte és una combinació d'HTML, CSS i JS.
Seguiu endavant i busqueu els codis per a l'anterior Efecte paral·lela de capçalera / peu de pàgina de CodePen .
2. Codi de quadre de comentaris HTML desplaçable
Es tracta d’un element HTML senzill però útil que us permet empaquetar llargs fragments de text en un format compacte. D'aquesta manera, no ocupa tot l'espai de la pàgina.
Podeu jugar amb els colors i la mida del quadre de text perquè s’adapti a les vostres necessitats.
Entrada:
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! :) Si voleu alguna cosa una mica més aficionat, també podeu obtenir codi un quadre de comentaris personalitzable de Quackit .
Ofereixen diverses plantilles, però també podeu utilitzar el seu editor per canviar i provar (executar) manualment el vostre codi personalitzat.
3. Un truc HTML genial: text destacat
Amb un senzillEtiqueta HTML: podeu afegir una gran quantitat d’efectes interessants al text o a les imatges. Tingueu en compte que no tots funcionen als navegadors. Els esmentats aquí funcionen a Google Chrome, Microsoft Edge i Mozilla Firefox.
Aquest efecte de text HTML ressalta el text entre els fitxersetiquetes.
Entrada:
Your highlighted text here.Demostració de sortida:
4. Afegiu una imatge de fons al text
De la mateixa manera, podeu canviar el color del text o afegir una imatge de fons. Aquest té un aspecte fantàstic si la mida del tipus de lletra del text és més gran.
Entrada:
MakeUseOf presents...El mateix efecte s’aconsegueix afegint els elements d’estil i tipus de lletra al text d’un fitxer etiqueta.
com desactivar la ubicació a Snapchat
Demostració de sortida:
5. Truc HTML útil per afegir una descripció emergent del títol
Un suggeriment sobre el títol apareix quan es desplaça amb el ratolí per sobre d’una peça de text o imatge “manipulada”. Els haureu vist utilitzats a llocs web en imatges, text enllaçat o fins i tot elements de menú en aplicacions d'escriptori. Utilitzeu aquest codi HTML per afegir una descripció al text pla de la vostra pàgina web.
Entrada:
Move your mouse over me!Demostració de sortida:
6. Els trucs HTML més frescos fins ara: desplaçament o caiguda de text
Quan cerqueu 'marquee html' a Google, descobrireu un petit ou de Pasqua. Veu el recompte de resultats de la cerca de desplaçament a la part superior? Aquest és un efecte creat per l'etiqueta de marquesina ara obsoleta. Tot i que aquest efecte de text HTML que ha estat genial ha quedat obsolet, la majoria de navegadors encara ho admeten.
Entrada:
I wanna scroll with it, baby!Demostració de sortida:
Tu pots afegiu altres atributs per controlar el comportament del desplaçament, el color de fons, la direcció, l'alçada i molt més. Tingueu cura, però; aquests efectes poden arribar a ser força irritants si s’utilitzen en excés.
Per obtenir un efecte de text fresc, cap a Quackit de nou i copieu el codi de marquesina altament personalitzat.
7. Creeu un menú de commutació fresc amb HTML
Els trucs HTML més interessants són efectes HTML dinàmics. Tot i això, sovint es basen en scripts. Aquí hi ha un efecte per als menús que estareu d'acord que sembla molt elegant.
És una mica més complicat que l'etiqueta HTML mitjana, ja que funciona amb un full d'estil i scripts. L’avantatge és que no cal que pengeu un fitxer CSS ni un script perquè funcioni. En lloc d’això, simplement enganxeu el següent codi a la secció del vostre lloc web.
Entrada:
.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
Demostració de sortida:
Malauradament, no podem demostrar aquest efecte aquí. Però la font original, Unitat dinàmica , inclou una còpia de treball d’aquest efecte HTML dinàmic.
8. Obteniu un full de càlcul HTML amb Tableizer
Si voleu mostrar un full de càlcul al vostre lloc, deixeu Tableizer. transformeu les vostres dades en una taula HTML. Només cal que enganxeu les dades en brut d'Excel, Google Doc o qualsevol altre full de càlcul a l'eina de conversió a tableizer.journalistopia.com . Ajustar el opcions de taula i, a continuació, feu clic a Taula-ho per rebre la sortida HTML.
Aquest és potser un dels codis HTML més interessants per al vostre lloc web, com Tableize It. fa tot el treball dur.
Feu clic a Copia HTML al porta-retalls per copiar el codi HTML i afegir-lo al vostre lloc web. Penseu a editar els colors de fons perquè sembli molt més fresc.
no hi ha prou espai per actualitzar Windows
Tot i que realment no es tracta d’un efecte HTML, és molt útil.
Més codis HTML i efectes més interessants per al vostre lloc
La potència de HTML, CSS i JavaScript ofereix opcions potencialment il·limitades per obtenir efectes impressionants al vostre lloc web. Volen més?
- HTML Goodies et dóna genialidees d’etiquetes.
- Unitat dinàmica té molts scripts HTML dinàmics increïbles.
- Quackit ofereix un codi HTML fantàstic.
Us hem mostrat vuit codis HTML fantàstics que podeu copiar per millorar el vostre lloc web. Tot i que són diferents, tots són fàcils d’implementar sempre que conegueu tècniques bàsiques de codificació HTML.
Compartir Compartir Tweet Correu electrònic 17 exemples senzills de codi HTML que podeu aprendre en 10 minutsVoleu crear una pàgina web bàsica? Apreneu aquests exemples HTML i proveu-los en un editor de text per veure com queden al vostre navegador.
Llegiu a continuació Temes relacionats- Programació
- HTML
- Desenvolupament web
- Eines per a administradors web
Editor adjunt de seguretat, Linux, bricolatge, programació i tecnologia explicada i productor de podcasts realment útils, amb una àmplia experiència en suport d'escriptori i programari. Col·laborador de la revista Linux Format, Christian és un fabricant de Raspberry Pi, un amant de Lego i un fan dels jocs retro.
Més de Christian CawleySubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us