7 fantastici effetti HTML che chiunque può aggiungere al loro sito web

Volete il vostro sito Web Come creare un sito Web: Per i principianti Come creare un sito Web: Per i principianti Oggi vi guiderò attraverso il processo di creazione di un sito Web completo da zero. Non ti preoccupare se questo sembra difficile. Ti guiderò in ogni fase del percorso. Leggi di più per apparire fantastici, ma le tue capacità di sviluppo web mancano?

Non disperare! Non devi sapere CSS Imparare HTML e CSS con questi tutorial Step by Step Imparare HTML e CSS con questi tutorial passo-passo Curioso su HTML, CSS e JavaScript? Se pensi di avere un talento per imparare a creare siti Web da zero, ecco alcuni tutorial dettagliati che vale la pena provare. Leggi di più o PHP per costruire un sito di fantasia. Alcuni buoni vecchi HTML 5 passaggi per capire il codice HTML di base 5 passaggi per capire il codice HTML di base Leggi di più e sapere come faremo copia e incolla.

Abbiamo compilato 7 modelli di effetti HTML gratuiti. Miglioreranno la funzionalità e l'esperienza utente del tuo sito, senza compromettere la banca. E possono contenere anche CSS e PHP.

Forse uno di questi è quello che stavi cercando.

1. Effetto Parallax

Probabilmente hai visto l'effetto Parallax Come creare uno sfondo del desktop Parallax con Rainmeter Come creare uno sfondo del desktop Parallax con Rainmeter Se desideri uno sfondo animato animato dal vivo, guarda in Rainmeter! Qui ti mostreremo come creare un effetto di parallasse unico per lo sfondo del desktop di Windows. Leggi di più sugli articoli online in stile rivista. Mentre scorri verso il basso un articolo, l'immagine di sfondo sembra scorrere con un ritmo diverso. Quando entri in una sezione diversa dell'articolo, l'immagine di sfondo cambia. È un effetto interessante che aggiunge profondità visiva al contenuto.

Poiché questo non è un puro effetto HTML, possiamo offrire solo GIF animate per dimostrare l'output.

Sotto vedrai una versione base dell'effetto Parallax; una finestra di testo si sposta su un'immagine di sfondo statica mentre scorri.

Puoi giocare con l'effetto e copiare il codice per l'effetto di scorrimento Parallax semplice di cui sopra da W3Schools.

Nella sua versione più sofisticata, questo effetto è una combinazione di HTML, CSS e JS.

Vai avanti e recupera i codici per l'effetto Parallax Header / Footer sopra riportato da CodePen.

2. Casella di testo scorrevole

Questo è un elemento HTML semplice ma utile che ti consente di impacchettare lunghi frammenti di testo in un formato compatto. In questo modo non occupa l'intero spazio sulla pagina.

Input HTML:

Demo di uscita:

Il tuo testo verrà mostrato qui. E puoi scorrere verso il basso per passare attraverso tutto questo. Devi solo aggiungere una quantità sufficiente di testo per mostrare le barre di scorrimento. Ovviamente, questo non è abbastanza, o supponiamo di avere un po 'di più da dire. Alla fine, le scrollbar saranno utili. Questo è tutto! :)

Puoi giocare con i colori e le dimensioni della casella di testo per adattarla alle tue esigenze.

Se desideri qualcosa di un po 'più elaborato, puoi anche recuperare il codice per una casella di commenti personalizzabile da Quackit. Offrono diversi modelli, ma puoi anche usare il loro editor per cambiare manualmente e testare (eseguire) il tuo codice personalizzato.

3. Evidenzia testo

Con un semplice Tag HTML è possibile aggiungere una tonnellata di effetti al testo o alle immagini. Nota che non tutti funzionano su tutti i browser. Quelle menzionate qui funzionano in Google Chrome, Microsoft Edge e Mozilla Firefox.

Ingresso:

Il tuo testo evidenziato qui.

Demo di uscita:

Il tuo testo evidenziato qui.

4. Aggiungi l'immagine di sfondo al testo

Allo stesso modo, puoi cambiare il colore del tuo testo o aggiungere un'immagine di sfondo. Questo diventa davvero eccitante se il tuo testo ha una dimensione abbastanza grande, motivo per cui ho anche aumentato la dimensione del carattere.

Ingresso:

MakeUseOf presenta ...

Nota che potresti anche aggiungere lo stile e gli elementi del carattere a a tag per lo stesso effetto, più il testo in grassetto.

Demo di uscita:

MakeUseOf presenta ...

5. Aggiungi descrizione comando Titolo

Una descrizione del titolo viene visualizzata quando si scorre con il mouse su un pezzo di “manipolato” testo o immagine. Li conosci da immagini o testi collegati. Ecco come puoi aggiungere questo al testo normale.

Ingresso:

Muovi il tuo mouse sopra di me!

Demo di uscita:

Muovi il tuo mouse sopra di me!

6. Fai scorrere o testo che cade

Quando cerchi “tendina html” su Google, scoprirai un piccolo uovo di Pasqua. Vedi il conteggio dei risultati della ricerca a scorrimento? Questo è un effetto creato dal tag di selezione ora obsoleto. Sebbene questa funzione HTML sia stata deprecata, la maggior parte dei browser lo supporta ancora.

Ingresso:

Fatelo scorrere, piccola!

Demo di uscita:

Fatelo scorrere, piccola!

È possibile aggiungere ulteriori attributi per controllare il comportamento di scorrimento, il colore di sfondo, la direzione, l'altezza e altro. Questi effetti possono diventare piuttosto irritanti se si esagera.

Per un effetto di testo che cade di fresco, vai di nuovo su Quackit e copia il loro codice di selezione altamente personalizzato.

7. Aggiungi un menu Switch

Gli effetti HTML più eccitanti sono effetti HTML dinamici. Tuttavia, sono spesso basati su script. Ecco un effetto per i menu che sono venuto ad adorare. È un po 'più complicato del tag HTML avar perché funziona con un foglio di stile e script. Il vantaggio è che non è necessario caricare un file CSS o di script per farlo funzionare, è possibile inserire tutte le informazioni necessarie in sezione del tuo sito web.

Ingresso:

Aggiungi il seguente codice nel sezione della tua pagina:

E questo codice va dove vuoi che appaia il menu dinamico.

Temi

- Browser / Addons

- App Web

- Consigli pratici

- Software fresco

... e altro ancora!

Scrittori del personale

- Karl Gechlik

- Tina

- Varun Kashyap

... e altro ancora!

miscellaneo

- Di

- Contatto

- archivio

- disconoscimento

Demo di uscita:

Sfortunatamente, non possiamo dimostrare questo effetto qui. Ma la fonte originale, Dynamic Drive, presenta una copia di lavoro di questo dinamico effetto HTML.

Bonus: Tableizer!

Se vuoi visualizzare un foglio di calcolo sul tuo sito, lascia Tableizer! trasforma i tuoi dati in una tabella HTML. Basta incollare i dati grezzi da Excel, Google Doc o qualsiasi altro foglio di calcolo nel rispettivo campo, modificare il opzioni di tabella, e fare clic Tableize It! per ricevere l'output HTML.

Ora puoi copiare il codice HTML e aggiungerlo al tuo sito web. Valuta di modificare i colori di sfondo per renderlo molto più bello.

Anche se questo non è proprio un effetto HTML, è abbastanza utile.

Che effetto scegli?

Ti abbiamo mostrato sette (soprattutto) effetti HTML che puoi utilizzare per migliorare il tuo sito web. Alcuni sono fondamentali, altri sono dotati di campane e fischietti. Tutti sono facili da implementare.

Per più etichetta idee, visita HTML Goodies. Se sei interessato all'HTML dinamico, prova Dynamic Drive per un sacco di incredibili script. Vai a Quackit per più codici HTML puri.

Se desideri approfondire e scrivere il tuo codice HTML, inizia con questi esempi di codice HTML facili da imparare e semplici. E quando sei pronto per HTML5, anche noi ti abbiamo coperto.

Infine, quando sviluppi il tuo sito web, mantieni la velocità della pagina 7 modi per rendere il tuo sito web o blog più veloce per i visitatori 7 modi per rendere il tuo sito web o blog più veloce per i visitatori Ecco alcuni suggerimenti per accelerare il tuo sito e assicurarti i tuoi visitatori restano attaccati. Leggi di più in mente.

Scopri di più su: HTML, Sviluppo Web, Strumenti per i Webmaster.