27 gratis HTML- och CSS-kort för bloggar, e-handel och mer

Hover Cards

Online-resurser är nästan oändliga, men att hitta dem av kvalitet är verkligen det svåraÄven om du söker lite och har en bra lista över webbplatser som är dedikerade till design, blir saker lättare. I en tid då språk som HTML och CSS är i fin form, närmar sig gratis resurser av hög kvalitet är det bara några få klick bort.

Vi ska lista en serie av gratis kort i HTML och CSS som passar perfekt för alla typer av blogg, affärer, e-handel och mycket mer. En långdistanssamling så att den kan integreras i en del av det arbete du gör för alla typer av kunder. Vi kommer att göra det med den här listan som använder codepen.io så att du kan få koden i både HTML och CSS.

Bloggkul # 1

Kort kul

en bra designkort det säger nästan allt bilden som representerar den, du kan gå till codepen.io för att få motsvarande kod och installera den på din webbplats.

Endast CSS-nyhetskort CSS

Nyhetskort

Detta kort, med Stranger Things som bakgrund, sticker ut för sin smidiga animering som avslöjar innehållet. Det är ren CSS.

Blogginlägg

Blogginlägg En förhandsgranskning av webben genom att föra muspekaren över den. Den har CSS och HTML för enkel inkorporering.

Bloggkort

Bloggkort

En minimalistisk responsiv bloggkortsdesign. Snabba och smidiga animationer hög kvalitet som inte lämnar någon likgiltig.

Responsiva visitkort

Responsiva kort

Står ut för den lilla animationen genom att hålla muspekaren över kortbilden.

Ett annat bloggkort

Blog Hover Card

Visas korttext när du svävar i samma.

Visitkort

Visitkort

en enkelt men aktuellt kort besök med demo och kod i HTML och CSS.

3D-visitkort

3D-vändkort

Det här kortet är värt en 3D-animation med HTML och CSS. Gjord av Elena Nazarova, det är perfekt för ett färgslående visitkort.

CSS-visitkort

CSS-visitkort

Ett mycket slående visitkort i CSS det roterar i 3D för att ge plats för en serie URL-adresser som svarar på muspekaren när vi lägger ner den.

Kortnät

Grid Card

En serie välplacerade kort med en iögonfallande design. Det är förvånande för sin enkla estetik, men med en bra träff i HTML-, CSS- och SCSS-koden.

3D-kort avslöjas

3D-kort

Denna serie kortnät avslöja mer information just nu att vi lämnade musen på ikonen i grönt. Samtidigt som vi lämnar pekaren rör sig resten av rutnätet i enlighet därmed.

Responsivt materialdesignkort

material design

Med google design språk, denna serie kort visas som sticker ut för menyikonen som öppnar all information från aktörerna som i exemplet. Vackra och intuitiva animationer med fantastiskt visuellt utseende.

Flexbox-kortnät

Flexbox

Kortprototyp i samma höjd som de sticker ut för att använda rutan flexbox-format. En annan av dess värden är användningen av CSS-bildförhållanden och CSS-filter.

Clash of Clans Cards

Clash of Klaner

El populärt mobilspel har sina kort i HTML och CSS skapat av Andre Madarang. Vi kan passera mellan dem med en exakt och mycket visuell animering.

Skjutkort för e-handel

Produktkort

Med en smidig animering, dessa kort uppmuntrar dig att söka efter deras element för att ta reda på vad de handlar om. Med fantastisk design från Omar Dsoky.

Gränssnittsdesign - produktkort

Produktgränssnitt

Ett perfekt kort för att designa de av produkt från vår e-handel. Tillverkad i HTML och CSS.

Produktkort

E-handelsprodukt

Från samma kort kan vi gå igenom flera bilder för att bättre se produkten. Den innehåller knappen Lägg till i kundvagn och innehåller HTML, CSS och JavaScript-kod.

Flexy produktkort

Flexy-kort

Som namnet antyder, använder flexbox för att skapa en intressant animation när vi klickar på knappen Lägg till i kundvagn.

Vänd kort

Vänd kort

Lite kod för vissa kort med en slät och perfekt animering. På några minuter kan du införliva dem. Nyligen tillagd till codepen.

Kort som 3D-produktkort

3D-kort

Det bör noteras att dessa kort är som om vi hade en serie kort på ett bord. Pekaren är kvar och de zoomar in, klickar på var och en och visar baksidan av kortet för att visa produktinformation. Vi klickar igen och lämnar det som det var med fronten. Perfekt för att lära sig 3D CSS-egenskaper.

Parallax-kort

Parallax-kort

Ett mycket visuellt experiment med en iögonfallande flip-effekt. Det är bättre att du ser det för att veta vad det talar om.

Hover-effekt för kort

Hover-kort

En enkel effekt men gimmicky sväva om kort.

Enkel svävareffekt

Enkelt kort

Slående ganska enkel effekt, men det har stor effekt i det ögonblick vi visualiserar det.

Parallax Djupkort

Parallax djup

Dessa kort bär parallax koncept till toppen för att bilda några mycket slående kort efter design. Du måste bara se det för att bättre förstå effekten det ger på användaren när du väljer några av kategorierna i vår blogg.

UI-kort för filmer

Filmkort

Ett kort av bra layout gjord med HTML och CSS.

Profilkort

Kontaktkort

Muy bra animationer för ett kontaktkort där vi kan implementera åtkomst till sociala medieprofiler. HTML och CSS.

Polaroid buntade kort

Polaroid

Med egenskaper, filter och CSS anpassade övergångar Denna serie av Polaroid-grupperade kort skapas; missa inte dessa SVG-bilder på nätet.


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

En kommentar, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   cristian sade

    Det kommer att vara möjligt att infoga något av dessa kort på en sida med wordpress