Home-theater-designers
Vuoi che il tuo sito web sia fantastico, ma le tue capacità di sviluppo web mancano.
Non disperare! Non devi conoscere CSS o PHP per creare un sito di fantasia con effetti fantastici. Alcuni semplici tag HTML e sapere come copiare e incollare andranno bene.
Per iniziare con alcuni fantastici effetti HTML, abbiamo compilato questi modelli di codice per effetti HTML gratuiti. Miglioreranno la funzionalità e l'esperienza utente del tuo sito, senza spendere troppo. Sebbene siano principalmente HTML, questi fantastici codici possono contenere anche alcuni CSS e PHP.
1. Fantastico effetto di parallasse con HTML
Probabilmente hai visto l'effetto di parallasse utilizzato su siti Web con annunci online. Mentre scorri verso il basso un articolo, il l'immagine di sfondo sembra scorrere a un ritmo diverso o appare un annuncio.
In alternativa, forse l'immagine di sfondo cambia quando visiti diverse parti del sito. È un effetto fantastico che aggiunge profondità visiva al contenuto ed è ideale anche se non lo fai comprendere il codice HTML di base .
Puoi giocare con l'effetto e copiare il codice per a semplice effetto di scorrimento parallasse di W3Schools .
Nella sua versione più sofisticata, questo effetto è una combinazione di HTML, CSS e JS.
Vai avanti e prendi i codici per quanto sopra Effetto di parallasse intestazione/piè di pagina da CodePen .
2. Codice della casella di commento HTML scorrevole
Questo è un elemento HTML semplice ma utile che ti consente di comprimere lunghi frammenti di testo in un formato compatto. In questo modo non occupa tutto lo spazio della pagina.
Puoi giocare con i colori e le dimensioni della casella di testo per adattarla alle tue esigenze.
Ingresso:
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! :) Se desideri qualcosa di un po' più elaborato, puoi anche recuperare il codice per una casella di commento personalizzabile da Quackit .
Offrono diversi modelli, ma puoi anche utilizzare il loro editor per modificare manualmente e testare (eseguire) il tuo codice personalizzato.
3. Un fantastico trucco HTML: testo evidenziato
Con un sempliceTag HTML puoi aggiungere un sacco di fantastici effetti al tuo testo o alle tue immagini. Tieni presente che non tutti funzionano su più browser. Quelli menzionati qui funzionano in Google Chrome, Microsoft Edge e Mozilla Firefox.
Questo effetto di testo HTML evidenzia il testo tra itag.
Ingresso:
Your highlighted text here.Dimostrazione di uscita:
4. Aggiungi un'immagine di sfondo al testo
Allo stesso modo, puoi cambiare il colore del testo o aggiungere un'immagine di sfondo. Questo sembra fantastico se la dimensione del carattere del testo è maggiore.
Ingresso:
MakeUseOf presents...Lo stesso effetto si ottiene aggiungendo gli elementi di stile e carattere al testo in a etichetta.
quanto costa sostituire la batteria del macbook pro?
Dimostrazione di uscita:
5. Utile trucco HTML per aggiungere un suggerimento per il titolo
Viene visualizzato un suggerimento per il titolo quando si scorre con il mouse su un pezzo di testo o immagine 'manipolato'. Li avrai visti utilizzati sui siti Web su immagini, testo collegato o persino voci di menu nelle app desktop. Usa questo codice HTML per aggiungere una descrizione comando al testo normale sulla tua pagina web.
Ingresso:
Move your mouse over me!Dimostrazione di uscita:
6. I trucchi HTML più belli di sempre: scorrimento o caduta del testo
Quando cerchi 'marquee html' su Google, scoprirai un piccolo uovo di Pasqua. Vedi il conteggio dei risultati di ricerca a scorrimento in alto? Questo è un effetto creato dall'ormai obsoleto tag marquee. Sebbene questo effetto di testo HTML un tempo fantastico sia stato deprecato, la maggior parte dei browser lo supporta ancora.
Ingresso:
I wanna scroll with it, baby!Dimostrazione di uscita:
Puoi aggiungi ulteriori attributi per controllare il comportamento di scorrimento, il colore di sfondo, la direzione, l'altezza e altro. Attenzione, però; questi effetti possono diventare piuttosto irritanti se abusati.
Per un fantastico effetto di testo che cade, vai di nuovo da Quackit e copia il loro codice di selezione altamente personalizzato.
7. Crea un fantastico Switchmenu con HTML
I trucchi HTML più interessanti sono gli effetti HTML dinamici. Tuttavia, sono spesso basati su script. Ecco un effetto per i menu che sarai d'accordo sembra molto elegante.
È un po' più complicato del tag HTML medio perché funziona con un foglio di stile e script. Il vantaggio è che non è necessario caricare un file CSS o script per farlo funzionare. Invece, incolla semplicemente il seguente codice nella sezione del tuo sito web.
Ingresso:
.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
Dimostrazione di uscita:
Sfortunatamente, non possiamo dimostrare questo effetto qui. Ma la fonte originale, Guida dinamica , presenta una copia funzionante di questo effetto HTML dinamico.
8. Ottieni un foglio di calcolo HTML con Tableizer
Se vuoi visualizzare un foglio di calcolo sul tuo sito, lascia che Tableizer! trasforma i tuoi dati in una tabella HTML. Basta incollare i dati grezzi da Excel, Google Doc o qualsiasi altro foglio di calcolo nello strumento di conversione su tableizer.journalistopia.com . Modifica il opzioni della tabella , quindi fare clic su Tableize It per ricevere l'output HTML.
Questo è forse uno dei codici HTML più interessanti per il tuo sito Web, come Tableize It! fa tutto il duro lavoro.
Clic Copia HTML negli appunti per copiare il codice HTML e aggiungerlo al tuo sito web. Considera la modifica dei colori di sfondo per renderlo molto più bello.
come cambiare in orizzontale in google docs
Anche se questo non è proprio un effetto HTML, è abbastanza utile.
Codici HTML ed effetti più interessanti per il tuo sito
La potenza di HTML, CSS e JavaScript offre opzioni potenzialmente illimitate per effetti sorprendenti sul tuo sito web. Voglio di più?
- Chicche HTML ti dà alla grandetaggare le idee.
- Guida dinamica ha molti incredibili script HTML dinamici.
- ciarlatano offre un codice HTML interessante.
Ti abbiamo mostrato otto fantastici codici HTML che puoi copiare per migliorare il tuo sito web. Sebbene diversi, sono tutti facili da implementare purché si conoscano le tecniche di codifica HTML di base.
Condividere Condividere Tweet E-mail 17 semplici esempi di codice HTML che puoi imparare in 10 minutiVuoi creare una pagina web di base? Impara questi esempi HTML e provali in un editor di testo per vedere come appaiono nel tuo browser.
Leggi Avanti Argomenti correlati- Programmazione
- HTML
- Sviluppo web
- Strumenti per i Webmaster
Deputy Editor for Security, Linux, DIY, Programming e Tech Explained e Really Utile Podcast producer, con una vasta esperienza nel supporto desktop e software. Collaboratore della rivista Linux Format, Christian è un armeggiatore di Raspberry Pi, amante dei Lego e fan dei giochi retrò.
Altro da Christian CawleyIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti