27 karta falas HTML dhe CSS për bloge, tregti elektronike dhe më shumë

Kartat e rri pezull

Burimet në internet janë pothuajse të pafund, por gjetja e tyre me cilësi është vërtet gjëja e vështirëMegjithëse kërkoni pak dhe keni një listë të mirë të faqeve të internetit të dedikuara për dizajn, gjërat bëhen më të lehta. Në një kohë kur gjuhët si HTML dhe CSS janë në gjendje të shkëlqyeshme, afrimi me burimet falas dhe me cilësi të lartë është pothuajse disa klikime larg.

Ne do të rendisim një seri të karta falas në HTML dhe CSS që janë krejtësisht të përshtatshme për të gjitha llojet e blogut, biznesit, tregtisë elektronike dhe shumë më tepër. Një koleksion me rreze të gjatë në mënyrë që të mund të përfshihet në disa nga punët që ju po bëni për të gjitha llojet e klientëve. Ne do ta bëjmë atë me këtë listë që përdor codepen.io në mënyrë që ju të mund të merrni kodin si në HTML ashtu edhe në CSS.

Argëtim me Kartë Blog # 1

Argëtim me letra

një kartë e shkëlqyeshme e dizajnit që thotë pothuajse gjithçka imazhin që e përfaqëson atë, ju mund të shkoni në codepen.io për të marrë kodin përkatës dhe për ta instaluar në faqen tuaj të internetit.

Kartat e lajmeve CSS vetëm CSS

Karta e lajmeve

Kjo kartë, me Gjërat e huaja si sfond, shquhet për animacionin e saj të qetë që zbulon përmbajtjen. Isshtë CSS e pastër.

Artikulli i postimit në blog

Blog post

Një pamje paraprake e uebit duke sjellë treguesin e miut mbi të. Ka CSS dhe HTML për inkorporim të lehtë.

Kartat e blogut

Kartat e blogut

Një dizajn minimalist i përgjegjshëm i kartës së blogut. Animacione të shpejta dhe të lëmuara cilësi të lartë që nuk lënë askënd indiferent.

Kartat e biznesit të përgjegjshme

Kartat e përgjegjshme

Shquhet për animacioni i lehtë duke lëvizur treguesin e miut mbi imazhin e kartës.

Një tjetër kartë blog

Kartë rri pezull

Shfaqet teksti i kartës kur rri pezull ne te njejten.

Kartat e biznesit

Kartë vizite

një kartë e thjeshtë por aktuale vizitoni me demo dhe kod në HTML dhe CSS.

Kartë biznesi 3D

Kartolina 3D

Kjo kartë vlen një animacion 3D me HTML dhe CSS. Krijuar nga Elena Nazarova, është e përkryer për një kartëvizitë që bie në sy me ngjyra.

Karta e biznesit CSS

Karta e biznesit CSS

Një kartëvizitë shumë e habitshme në CSS që rrotullohet në 3D për të hapur rrugën për një seri adresash URL që i përgjigjen treguesit të miut në momentin kur e vendosim poshtë.

Rrjetat e kartave

Karta e Rrjetit

Një seri kartash të vendosura mirë me një dizajn tërheqës për sytë. Surprisingshtë befasuese për estetikën e saj të thjeshtë, por me një goditje të mirë në kodin HTML, CSS dhe SCSS.

Kartat 3D po zbulohen

Kartë 3D

Kjo seri e rrjetave të kartave zbulojnë më shumë informacion në këtë moment që e lamë miun në ikonë me jeshile. Në të njëjtën kohë kur largohemi nga treguesi, pjesa tjetër e rrjetit lëviz në përputhje me rrethanat.

Karta e Dizajnit të Materialit Responsive

material Projektimi

Me gjuha e dizajnit google, shfaqet kjo seri kartash që dallohen për ikonën e menusë që hap të gjithë informacionin e aktorëve si në rastin shembull. Animacione të bukura dhe intuitive me pamje të shkëlqyeshme vizuale.

Rrjeti i kartave Flexbox

Flexbox

Prototipi i kartës në të njëjtën lartësi që ato shquhen për përdorimin e formatit të rrjetit flexbox. Një tjetër vlerë e tij është përdorimi i raporteve të aspektit CSS dhe filtrave CSS.

Kartat e Clash of Clans

Përplasja e klaneve

El lojë e njohur për celularë ka kartat e saj në HTML dhe CSS të krijuara nga Andre Madarang. Ne mund të kalojmë mes tyre me një animacion preciz dhe tepër vizual.

Kartela rrëshqitëse për tregtinë elektronike

Kartela e produkteve

Me një animacion i shkathëtKëto karta ju inkurajojnë të kërkoni elementet e tyre për të zbuluar se për çfarë bëhet fjalë. Me dizajn të shkëlqyeshëm nga Omar Dsoky.

Dizajni i ndërfaqes - Karta e produktit

UI i produktit

Një kartë perfekte për të hartuar ato të produkt i tregtisë tonë elektronike. Bërë në HTML dhe CSS.

Kartela e produktit

Produkt i tregtisë elektronike

Nga e njëjta kartë mundemi kalojnë nëpër disa imazhe për të parë më mirë produktin. Ai përfshin butonin shto në shportë dhe përmban HTML, CSS dhe kodin JavaScript.

Kartat e Produkteve Flexy

Kartë fleksi

Siç tregon emri i saj, përdor flexbox për të krijuar një animacion interesant kur klikojmë në butonin shto në shportë.

Kartat e rrokullisjes

Flip card

Kod i vogël për disa karta me një butë dhe animacion perfekt. Në pak minuta ju mund t'i përfshini ato. Kohët e fundit është shtuar në kod.

Kartat si Kartat e Produkteve 3D

Karta 3D

Duhet të theksohet se këto karta janë sikur të kishim një seri letrash në një tavolinë. Treguesi lihet dhe ata zmadhojnë, klikojnë në secilën dhe tregojnë pjesën e pasme të kartës për të treguar informacionin e produktit. Klikojmë përsëri dhe e lëmë siç ishte me pjesën e përparme. E përsosur për të mësuar vetitë 3D CSS.

Karta e Paralaksës

Kartë paralaksi

Një eksperiment shumë vizual me një efekti i rrokullisjes tërheqëse. Isshtë më mirë që ta shihni për të ditur se për çfarë po flet.

Efekt rri pezull për kartat

Kartë pezull

Një efekt i thjeshtë por rri pezull rreth kartave.

Efekt i thjeshtë rri pezull

Kartë e thjeshtë

Efekt goditës mjaft i thjeshtë, por që ka një efekt të madh në momentin kur e vizualizojmë atë.

Kartat e Thellësisë së Paralaksës

Thellësia e paralaksës

Këto karta mbajnë koncepti paralaks në krye për të formuar disa karta shumë të habitshme nga dizajni. Thjesht duhet ta shihni për të kuptuar më mirë efektin që prodhon te përdoruesi kur zgjidhni disa nga kategoritë në blogun tonë.

Kartë UI për filma

Kartë filmi

Një kartë e paraqitje e shkëlqyeshme e bërë me HTML dhe CSS.

Karta e profilit

Kartela e kontaktit

Shumë animacione te mira për një kartë kontakti në të cilën ne mund të zbatojmë qasjen në profilet e mediave sociale. HTML dhe CSS.

Kartat me pako Polaroid

Polaroid

Me veti, filtra dhe Kalimet e personalizuara të CSS Krijohen këto seri kartash të grupuara Polaroid; mos i humbisni këto imazhe SVG në internet.


Lini komentin tuaj

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar me *

*

*

  1. Përgjegjës për të dhënat: Miguel Ángel Gatón
  2. Qëllimi i të dhënave: Kontrolloni SPAM, menaxhimin e komenteve.
  3. Legjitimimi: Pëlqimi juaj
  4. Komunikimi i të dhënave: Të dhënat nuk do t'u komunikohen palëve të treta përveç me detyrim ligjor.
  5. Ruajtja e të dhënave: Baza e të dhënave e organizuar nga Occentus Networks (BE)
  6. Të drejtat: Në çdo kohë mund të kufizoni, rikuperoni dhe fshini informacionin tuaj.

      cristian dijo

    Do të jetë e mundur të futni ndonjë prej këtyre kartave në një faqe me wordpress

      Stan dijo

    I DUA ATA