27 kort af alle typer HTML og CSS til e-handel, blogs og mere

Online ressourcer er næsten uendelige, men at finde dem af kvalitet er virkelig den svære tingSelvom man søger lidt og har en god liste over websteder dedikeret til design, bliver tingene lettere. På et tidspunkt, hvor sprog som HTML og CSS er i god form, er det tæt på gratis ressourcer af høj kvalitet næsten et par klik væk.

Vi vil liste en række gratis kort i HTML og CSS der passer perfekt til alle typer blog, forretning, e-handel og meget mere. En langtrækkende samling, så den kan indarbejdes i noget af det arbejde, du laver for alle typer klienter. Lad os gøre det med denne liste, der bruger codepen.io, så du kan få koden i både HTML og CSS.

Blog Card sjov # 1

en godt designkort der siger næsten alt det billede, der repræsenterer det, kan du gå til codepen.io for at hente den tilsvarende kode og installere den på dit websted.

Kun CSS-nyhedskort CSS

Dette kort med Stranger Things som baggrund, skiller sig ud for sin glatte animation, der afslører indholdet. Det er ren CSS.

Blogindlæg

Et eksempel på internettet ved at bringe musemarkøren hen over det. Det har CSS og HTML for nem indbygning.

Blogkort

Et minimalistisk responsivt blogkortdesign. Hurtige og glatte animationer af høj kvalitet, der ikke efterlader nogen ligeglad.

Responsive visitkort

Skiller sig ud for den lille animation ved at holde musemarkøren over kortbilledet.

Et andet blogkort

Vises korttekst, når du svæver i det samme.

Visitkort

en simpelt, men aktuelt kort besøg med demo og kode i HTML og CSS.

3D-visitkort

Dette kort er værd en 3D-animation med HTML og CSS. Lavet af Elena Nazarova, det er perfekt til et farveslående visitkort.

CSS visitkort

Et meget slående visitkort i CSS det roterer i 3D at give plads til en række URL-adresser, der reagerer på musemarkøren i det øjeblik, vi lægger den ned.

Kortnet

En række velplacerede kort med et iøjnefaldende design. Det er overraskende for sin forenklede æstetik, men med et godt hit i HTML-, CSS- og SCSS-koden.

3D-kort afsløres

Denne serie kortgitre afslør mere information i øjeblikket vi forlod musen over det grønne ikon. På samme tid som vi forlader markøren, bevæger resten af gitteret sig i overensstemmelse hermed.

Responsivt materiale designkort

Med google design sprog, vises denne række kort, der skiller sig ud for menuikonet, der åbner al information om aktørerne som i eksemplet. Smukke og intuitive animationer med fantastisk visuelt udseende.

Flexbox-kortgitter

Kortprototype i samme højde, som de skiller sig ud ved at bruge gitterflexbox-formatet. En anden af dens værdier er brugen af CSS-formatforhold og CSS-filtre.

Clash of Clans Cards

El populært mobilspil har sine kort i HTML og CSS oprettet af Andre Madarang. Vi kan passere mellem dem med en præcis og meget visuel animation.

Slide-kort til e-handel

Med en smidig animationDisse kort opfordrer dig til at søge efter deres elementer for at finde ud af, hvad de handler om. Med fantastisk design fra Omar Dsoky.

Interface Design - Produktkort

Et perfekt kort til at designe dem af produkt af vores e-handel. Lavet i HTML og CSS.

Produktkort

Fra det samme kort kan vi gå gennem flere billeder for bedre at se produktet. Det inkluderer knappen Tilføj tilføj til indkøbskurv og indeholder HTML, CSS og JavaScript-kode.

Flexy produktkort

Som navnet antyder, bruger flexbox for at oprette en interessant animation, når vi klikker på knappen Tilføj til kurv.

Vend kort

Lille kode til nogle kort med en glat og perfekt animation. I løbet af få minutter kan du indarbejde dem. For nylig tilføjet til codepen.

Kort som 3D-produktkort

Det skal bemærkes, at disse kort er som om vi havde en række kort på et bord. Markøren er til venstre, og de zoomer ind, klikker på hver enkelt og viser bagsiden af kortet for at vise produktinformation. Vi klikker igen og lader det være, som det var med fronten. Perfekt til at lære 3D CSS-egenskaber.