7 Kule HTML-effekter som noen kan legge til på deres nettsted

Du vil ha ditt nettsted Hvordan lage et nettsted: For nybegynnere Hvordan lage et nettsted: For nybegynnere I dag vil jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke vær redd hvis dette høres vanskelig ut. Jeg vil lede deg gjennom det hvert skritt av veien. Les mer for å se fantastisk ut, men dine webutviklingsferdigheter mangler?

Ikke fortvil! Du trenger ikke å vite CSS Lær HTML og CSS med disse trinnvise opplæringene Lær HTML og CSS med disse trinnvise opplæringsprogrammene Nysgjerrig om HTML, CSS og JavaScript? Hvis du tror at du har mulighet til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise opplæringsprogrammer verdt å prøve. Les mer eller PHP for å bygge et fancy nettsted. Noen gode gamle HTML 5 trinn for å forstå grunnleggende HTML-kode 5 trinn for å forstå grunnleggende HTML-kode Les mer og vite hvordan du kopierer og limer vil gjøre.

Vi har samlet 7 gratis HTML-effektmaler. De vil forbedre funksjonaliteten og brukeropplevelsen av nettstedet ditt, mens du ikke bryter banken. Og de kan inneholde noen CSS og PHP også.

Kanskje en av disse er det du leter etter.

1. Parallax Effekt

Du har sikkert sett Parallax-effekten Hvordan lage en Parallax-skrivebordsbakgrunn med regnmåler Hvordan lage en Parallax-skrivebordsbakgrunn med regnmåler Hvis du ønsker et levende animert skrivebordsbakgrunn, se på Rainmeter! Her viser vi deg hvordan du lager en unik parallax-effekt for Windows-skrivebordsbakgrunnen. Les mer i fancy magazine-stil online artikler. Når du ruller ned en funksjonsartikkel, vises bakgrunnsbildet for å bla i et annet tempo. Når du skriver inn en annen del av artikkelen, endres bakgrunnsbildet. Det er en kul effekt som legger til visuell dybde til innholdet.

Siden dette ikke er en ren HTML-effekt, kan vi bare tilby animerte GIF-er for å demonstrere utdataene.

Nedenfor ser du en grunnleggende versjon av Parallax-effekten; En boks med tekst beveger seg over et statisk bakgrunnsbilde mens du ruller.

Du kan spille med effekten og kopiere koden for den ovennevnte enkle Parallax-rullingseffekten fra W3Schools.

I sin mest sofistikerte versjon er denne effekten en kombinasjon av HTML, CSS og JS.

Gå frem og hente kodene for den ovennevnte Parallax-effekten fra Header / Footer fra CodePen.

2. Skrollbar tekstboks

Dette er et enkelt, men nyttig HTML-element som lar deg pakke lange utdrag av tekst til et kompakt format. På denne måten tar det ikke opp hele plassen på siden.

HTML-inngang:

Output demo:

Din tekst vil vises her. Og du kan bla ned for å gå gjennom alt. Du må bare legge til en tilstrekkelig mengde tekst for å gjøre scrollbars-showet. Selvfølgelig er dette ikke nok, la oss anta at vi har litt mer å si. Til slutt vil rullestenger komme til nytte. Det er det! :)

Du kan spille med fargene og størrelsen på tekstboksen for å passe dine behov.

Hvis du ønsker noe litt mer avansert, kan du også hente kode for en tilpassbar kommentarboks fra Quackit. De tilbyr flere maler, men du kan også bruke redaktøren til å manuelt endre og teset (kjøre) din egendefinerte kode.

3. Marker tekst

Med en enkel HTML-tag kan du legge til mange effekter på teksten eller bildene dine. Vær oppmerksom på at ikke alle av dem jobber på tvers av nettlesere. De som er nevnt her, jobber i Google Chrome, Microsoft Edge og Mozilla Firefox.

inngang:

Din uthevet tekst her.

Output demo:

Din uthevet tekst her.

4. Legg til bakgrunnsbilde til tekst

På samme måte kan du endre fargen på teksten eller legge til et bakgrunnsbilde. Denne blir bare veldig spennende hvis teksten din har en stor nok størrelse, og derfor har jeg også økt skriftstørrelsen.

inngang:

MakeUseOf presenterer ...

Legg merke til at du også kan legge stil- og skriftelementene til en tag for samme effekt, pluss fet skrifttekst.

Output demo:

MakeUseOf presenterer ...

5. Legg til Tittelverktøystip

En tittelverktøystip kommer opp når du ruller med musen over et stykke “manipulert” tekst eller bilde. Du kjenner disse fra bilder eller koblet tekst. Slik kan du legge til denne til vanlig tekst.

inngang:

Flytt musen over meg!

Output demo:

Flytt musen over meg!

6. Lag rulle eller fallende tekst

Når du søker etter “marquee html” På Google finner du et lite påskeegg. Se rulle søkeresultatet? Det er en effekt som er opprettet av den nå utdaterte merketaggen. Selv om denne HTML-funksjonen har blitt utdatert, støtter de fleste nettlesere den fortsatt.

inngang:

Gjør det bla, baby!

Output demo:

Gjør det bla, baby!

Du kan legge til flere attributter for å kontrollere rullingsadferd, bakgrunnsfarge, retning, høyde og mer. Disse effektene kan bli ganske irriterende hvis du overdriver det.

For en kul fallende tekst-effekt, hør til Quackit igjen og kopier deres svært tilpassede teltkode.

7. Legg til en brytermeny

De mest spennende HTML-effektene er dynamiske HTML-effekter. Imidlertid er de ofte skriptbaserte. Her er en effekt for menyer som jeg har kommet for å elske. Det er litt mer komplisert enn HTML-taggen din fordi den fungerer med et stilark og skript. Fordelen er at du ikke trenger å laste opp en CSS eller skriptfil for å få det til å fungere, du kan plante all nødvendig informasjon inn i delen av nettstedet ditt.

inngang:

Legg til følgende kode i delen av siden din:

Og denne koden går hvor du vil at den dynamiske menyen skal vises.

emner

- Nettlesere / Addons

- Web Apps

- Hvordan-tips

- Cool programvare

… og mer!

Personaleforfattere

- Karl Gechlik

- Tina

- Varun Kashyap

… og mer!

Diverse

- Handle om

- Ta kontakt med

- Arkiv

- Ansvarsfraskrivelse

Output demo:

Dessverre kan vi ikke demonstrere denne effekten her. Men den opprinnelige kilden, Dynamic Drive, har en arbeidskopi av denne dynamiske HTML-effekten.

Bonus: Tableizer!

Hvis du vil vise et regneark på nettstedet ditt, la Tableizer! forvandle dataene dine til et HTML-tabell. Bare lim inn de rå dataene fra Excel, Google Doc eller et annet regneark i det respektive feltet, tweak the tabellalternativer, og klikk Tabell det! for å motta HTML-utgangen.

Nå kan du kopiere HTML-koden og legge den til din nettside. Vurder å redigere bakgrunnsfarger for å gjøre det ser mye kulere ut.

Selv om dette ikke egentlig er en HTML-effekt, er det ganske praktisk.

Hvilken effekt velger du?

Vi har vist deg syv (for det meste) HTML-effekter du kan bruke til å forbedre nettstedet ditt. Noen er grunnleggende, andre kommer med bjeller og fløyter. Alle er enkle å implementere.

For mer merker ideer, besøk HTML Goodies. Hvis du er interessert i dynamisk HTML, sjekk ut Dynamic Drive for mange utrolige skript. Gå til Quackit for mer rene HTML-koder.

Hvis du vil gå dypere og skrive din egen HTML, kan du begynne med disse enkle å lære og enkle HTML-kodeeksempler. Og når du er klar for HTML5, har vi også dekket deg.

Til slutt, når du utvikler nettstedet ditt, må du holde sidens hastighet 7 måter å gjøre nettstedet ditt eller bloggen hurtigere for besøkende. 7 måter å gjøre nettstedet ditt eller bloggen lastes raskere for besøkende Her er noen topp tips for å øke hastigheten på nettstedet ditt og sørge for at de besøkende holder seg fast. Les mer i tankene.

Utforsk mer om: HTML, Webutvikling, Verktøy for nettredaktører.