27 HTML og CSS renna til að veita vefsíðunni þinni sérstaka snertingu

Cupcake renna

Við höldum áfram með umferð af CSS og HTML kóða sem hægt er að útfæra á vefsíðu okkar til að veita henni þann sérstaka snertingu sem hægt er að aðgreina hana frá hinum. Þökk sé + c stjórninni plús + v stjórnuninni sem við getum hafa í höndunum kóða sem gerir vefinn tilbúinn að vera birt í þróun eftir að hafa eytt dögum eða vikum í prófanir.

Nú er kominn tími fyrir 27 renna í HTML og CSS sem gera okkur kleift að undirbúa það rými þar sem við samþættum venjulega mikið af efni í nokkrum pixlum í öðru veldi. Þessar rennibrautir eru allt frá korti, samanburður, fullur skjár, móttækilegur og einfaldast, en jafnframt mjög glæsilegt. Við erum að fara með 27 renna sem munu ekki skilja neinn áhugalausan eftir, sérstaklega viðskiptavininn eða notandinn sem fer í gegnum vefsíðuna þína til að lesa efni, kaupa vöru eða einfaldlega nota samanburðarrennibraut til að bera saman mynd fyrir og eftir.

Skjár á kortum

um borð

Mjög innsæi renna í HTML og CSS sem fjallar um farðu með röð af kortum á vefsíðuna þína sem eru send frá einum til annars með fjör með frábærum stíl. Það er einmitt fjör og bakgrunns halli sem gefa þessum lúmska snertingu við þennan HTML og CSS kóða sem stendur einnig upp úr með smá JavaScript. Glæsilegt er orðið til að lýsa þessa gæðaslá.

Renna upplýsingakorta

Upplýsingasleði

Þessi rennibraut fyrir upplýsingakort er einnig kóði í HTML, CSS og JavaScript. Það er frekar um röð af kortum það vekur ekki mikla athygli fyrir hreyfimyndirnar, þó einfaldleiki þess sé mesta gildi þess. Önnur renna til að íhuga af þessum lista.

Samanburðar renna myndar

Samanburðar renna

Þessi renna er Til mikilla gagns Og örugglega hefurðu séð það á fjölda vefsíðna þar sem myndir fyrir og eftir eru bornar saman við lóðrétta stöng sem rennur lárétt. Það er frábær hjálp við samanburð, þannig að við gerðum það að einu meginatriðum á þessum lista yfir renna.

Samanburðar renna án JavaScript

Samanburðar renna án JS

Mikil gæði þessarar rennibrautar eru þessi kemur án JavaScript, þannig að þú þarft aðeins að innleiða CSS og HTML kóða á vefsíðunni þinni til að hafa annan samanburð. Þú verður að nota svarta reitinn neðst á myndinni til að renna henni frá annarri hliðinni til annarrar til að sjá samanburð myndarinnar. Ekki eins innsæi og það fyrra, en mjög gagnlegt án JavaScript.

Þriggja laga samanburðarmynd renna

Þriggja laga renna

Nafn þess segir allt, mynd renna það gerir þér kleift að bera saman allt að þrjá í einu. Dæmið sem gefið er er eitt til að sjá höfuðið í sniði, annað til að sýna vöðvana og önnur renna til að sjá beinin. Það notar HTML, CSS og JavaScript við rekstur þess.

Vanilla JS Image Renna

Samanburðar renna

Enn ein samanburðarmynd renna með stórum hnapp með því að renna myndinni frá einni hlið til annarrar. Minimalist, með litlum JavaScript og frábæru sjónrænu áferð. Ein sú sláandiasta til að bera saman myndir.

Skipta skjá á ská

Ská samanburðar renna

þetta samanburðar mynd renna Það er búið til af Envato Tuts og hefur þann greinarmun að renna er staðsett á ská til að valda öðrum tegundum skynjunar þegar bornar eru saman tvær myndir. Það notar JavaScript, CSS og HTML til að vera hágæða samanburðar renna.

Renna fyrir allan skjáinn

Umbreytingar renna

Við komum að þeim hluta af fullri skjár renna til að hitta Renna Umskipti sem einkennast af umskiptum framkvæmt með fjör með miklum áhrifum. Ef þú ætlar að sýna myndir á öllum skjánum og þú ert að fara mjög varlega framhjá skaltu kóða JavaScript, CSS og HTML.

Lárétt renna með parallax

Parallax renna

Fyrir aðdáendur parallax áhrifa þessa renna með Swiper.js, HTML og CSS. Burtséð frá því að vera fær um að renna með tvo hnappa sem eru staðsettir á hvorri hlið, á hægri hliðinni höfum við í litlu allar myndir af heill hringekju. Öðruvísi og vönduð sjónræna renna sem lætur engan sem heimsækir vefsíðu okkar áhugalausan.

Slétt 3D sjónarhorn renna

3D sjónarhorn slétt renna

Móttækilegur renna það fylgdu bendi hreyfingum mús. Það er til þess fallið að valda miklu sjónarhorni sem getur leitt til blandaðra tilfinninga hjá gestinum. Ef þú veist hvernig á að nota það á réttan hátt geturðu gefið vefsíðunni okkar þann frumlega og lúmska snertingu. JavaScript, CSS og HTML kóða vantar ekki.

Hetja í fullri skjá

Hetja mynd renna

Rennimynd fyrir heila skjámynd í HTML, CSS og JavaScript. Hafa a hoppáhrif í hverju hreyfimyndum það gefur það sitt og almennt stöndum við frammi fyrir gæðum fullri skjá renna eins og restin af listanum.

VELO.JS renna með landamærum

Renna blæjukantar

Eitt af því sem stendur upp úr sem fullur skjár renna með einfaldlega frábæru umbreytingar hreyfimyndum. Við mælum með að þú farir til að sjá það í gangi til að fara að hugsa um hvernig á að útfæra það á vefnum. Notaðu Velocity effect Til að bæta þá hreyfimynd sem notar örvatakkana, smelltu í flakkið og jafnvel skrunað, einfaldlega fullkomið.

Móttækileg CSS lóðrétt renna með smámyndum

Móttækilegur CSS renna

Við höldum áfram að renna Móttækileg CSS fyrir farsíma frábær gæði eins og þessi. Þú verður að hafa röð smámynda til hægri sem þegar ýtt er á hana byrjar fjör í lóðréttu falli. Frábær áhrif sem nota aðeins CSS til að skilja eftir renna af því besta á þessum lista.

Flexbox mynd renna

Flexbox mynd renna

Annað Móttækileg mynd renna með JavaScript og að það sé meira en einfalt að vera nokkuð glæsilegur. Stuttur, einfaldur og lægstur með ekkert meira en þetta. Það hefur sinn stað á þessum lista yfir Flexbox renna.

Hreyfingar óskýr með SVG síum

Renna hreyfingar óskýr

Tilraun sem hermir eftir áhrifum af hreyfingar óskýr í hvert skipti sem rennibraut er virkjað. Það notar SVG Gaussian þoka síu og nokkra CSS fjörlykla. Kóðinn sem notaður er í JavaScript er eingöngu fyrir dæmið og virkni rennibrautarinnar.

Hreyfimyndir

Hreyfimyndir

Hreyfimynd móttækilegur með JavaScript, HTML og CSS. Við erum með örvarnar hægra megin sem gera okkur kleift að fara í gegnum myndirnar sem eiga uppruna sinn með tignarlegu og hnitmiðuðu fjöri. Mikil áhrif nást í hverri glærunni til að láta sjá sig. Mjög núverandi í hreyfimyndum.

Mynd renna með SVG mynstri

Renna aðeins CSS SVG

Önnur af þessum tilraunum sem reyna bera svg mynstur til að búa til nokkrar grímumyndir fyrir CSS renna. Það gerir mjög sláandi óskýr áhrif með frábærum áferð. Önnur af þessum rennibrautum til að vekja góðar tilfinningar hjá gesti vefsíðu okkar.

Einföld lag renna

Lagskipt renna

Renna með einum meira en áberandi fjör sem býður upp á þessi bylgjuáhrif í hvert skipti sem við smellum á táknið til að renna nýrri mynd. Gjört í HTML, CSS og JavaScript það verður önnur mynd renna.

Hrein CSS renna

Hrein CSS renna

Önnur einfaldasta renna og það er hreint CSS. Einn af kostum þess að setja í neðst til vinstri röð af punktum sem munu þjóna sem hnappar til að ná til hverrar þeirra mynda sem munu líða fyrir okkur án sérstaks fjörs.

Cupcake aðeins CSS renna

Renna bollakaka

El sætasta renna á listanum og að það sé aðeins í CSS og HTML. Það er einna sértækastur á öllum listanum að hafa hægri hlið mismunandi afbrigði af bollakökum. Smellið á einn og bollakaka birtist með frábæru fjöri sem endar með frábærum hoppáhrifum. Einn sá besti án efa.

Renna fjör áhrif

Renndur hreyfimynda

Ein glæsilegasta renna í hreyfimyndum og hvað tekst að koma okkur á óvart við fyrstu breytinguna. Frá fyrstu stundu sem hreyfimyndir koma upp, HTML kóða hennar, CSS og JavaScript skilur okkur eftir á óvart. Annað það besta í naumhyggjulegu snertingu sem það gefur.

Renna sneið

Rennibraut

Un umbreytingar renna sem notar einfaldan add class og það einkennist af mjög sléttum hreyfimyndum til að verða einn af eftirlætunum á þessum lista. Ef þú vilt aðgreina þig í farsímaútgáfu vefsins er það eitt af nauðsynjunum. Mikið sjónrænt.

Renna Parallax New York

Renna New York

Einn stærsti kosturinn við þetta parallax renna í CSS er að það er hægt að aðlaga það mikið. Þetta þýðir að þú getur breytt letri, stærð þess, lit þess og hraða hreyfimyndarinnar. Fyrsti stafur hverrar borgar í nýjum JavaScript fylkisstreng birtist á nýrri skyggnu. Önnur dýrmæt renna þessarar færslu.

Rennibraut

Rennibraut

Með lægstur stíll þessi renna er kynnt þar sem hver hluti myndarinnar kemur út með hverri skyggnu. Mjög skapandi og frábrugðið því sem sést á listanum yfir renna og það stendur á sínum stað.

Renna með gáraáhrifum

Renna gára

Un frábær áhrif fullur skjár renna með flötum litum til að fá allan safann. JavaScript, HTML og CSS fyrir aðra renna með áberandi áhrif.

Renna með forskoðun myndar

Fyrri renna

renna GSAP með forsýningu á næstu glærum sem verður kynnt fyrir notandanum. Fullkomið til að móta á vefsíðu tísku eða hönnunar.

Rennibreytingar

Rennibreytingar

Við endum listann með a hágæða renna með bombastísk áhrif og röð hreyfimynda sem fá þennan sérstaka snertingu á vefsíðu okkar. Hægt er að virkja samhliða áhrifin.

Ekki missa af þessu annar CSS kóðalisti fyrir hnappa.


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

Vertu fyrstur til að tjá

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.