27 tasuta HTML- ja CSS-kaarti ajaveebide, e-kaubanduse ja muu jaoks

Hõljutage kaarte

Veebiressursid on peaaegu lõpmatud, kuid kvaliteetsete leidmine on tõesti keeruline asiEhkki natuke otsitakse ja kui teil on hea disainile pühendatud veebisaitide loend, muutuvad asjad lihtsamaks. Ajal, mil sellised keeled nagu HTML ja CSS on suurepärases vormis, on kvaliteetsete tasuta ressursside lähedale jõudmine peaaegu mõne hiireklõpsu kaugusel.

Loetleme seeria tasuta kaardid HTML-is ja CSS-is mis sobivad suurepäraselt igat tüüpi ajaveebi, äri, e-kaubanduse ja palju muu jaoks. Kaugekogumik, et seda saaks lisada igasse töösse, mida teete igat tüüpi klientide jaoks. Teeme seda selle loendiga, mis kasutab koodepen.io, nii et saate koodi nii HTML-is kui ka CSS-is.

Blogikaardi lõbusus nr 1

Kaardi lõbu

A. suurepärane disainikaart mis ütleb peaaegu kõik pildi, mis seda esindab, võite vastava koodi hankimiseks ja veebisaidile installimiseks minna läbi koodepen.io.

Ainult CSS-i uudiskaardid

Uudiste kaart

See kaart koos Võõrad asjad taustaks, paistab silma sujuva animatsiooni poolest, mis paljastab sisu. See on puhas CSS.

Blogipostituse üksus

Blogikirja Veebi eelvaade, tuues hiirekursori selle kohale. Sellel on CSS ja HTML hõlpsaks ühendamiseks.

Blogikaardid

Blogikaardid

Minimalistlik tundlik ajaveebikaardi kujundus. Kiired ja sujuvad animatsioonid kvaliteetne, mis ei jäta kedagi ükskõikseks.

Reageerivad visiitkaardid

Reageerivad kaardid

Torkab silma kerge animatsioon hõljutades hiirekursorit kaardipildi kohal.

Teine ajaveebikaart

Blogi hõljukikaart

Ilmub kaarditekst hõljutades samas.

Visiitkaardid

Visiitkaart

A. lihtne, kuid praegune kaart külastage koos demo ja koodiga HTML-is ja CSS-is.

3D visiitkaart

3D klappkaart

See kaart on väärt 3D-animatsioon HTML-i ja CSS-iga. Elena Nazarova valmistatud, sobib see suurepäraselt värve löövaks visiitkaardiks.

CSS visiitkaart

CSS-i visiitkaart

CSS-is väga silmatorkav visiitkaart, mis pöörleb 3D-s selleks, et leida rida URL-i aadresse, mis vastavad hiirekursorile hetkel, kui selle alla paneme.

Kaardivõrgud

Võrgukaart

Hästi paigutatud kaartide seeria pilkupüüdev disain. See on üllatav lihtsustatud esteetika poolest, kuid HTML-, CSS- ja SCSS-koodi hea tabamusega.

3D-kaardid ilmuvad

3D-kaart

See kaardivõrkude seeria paljastada hetkel rohkem teavet et jätsime hiire rohelisele ikoonile. Samal ajal, kui me kursori jätame, liigub ülejäänud ruudustik vastavalt.

Reageeriva materjali kujunduse kaart

Materjal Design

Mis google disainikeel, ilmub see kaartide seeria, mis on esile tõstetud menüüikooniga, mis avab näitlejate kogu teabe nagu näitejuhul. Suurepärase visuaalse välimusega ilusad ja intuitiivsed animatsioonid.

Flexboxi kaardi võre

Flexbox

Kaardi prototüüp samal kõrgusel, mis paistab silma ruudustiku flexbox-vormingu kasutamisega. Teine selle väärtus on CSS-i kuvasuhete ja CSS-filtrite kasutamine.

Klannide kaartide kokkupõrge

Clash of Klannid

El populaarne mobiilimäng tema HTML- ja CSS-kaardid on loonud Andre Madarang. Nende vahel saame edasi liikuda täpse ja väga visuaalse animatsiooniga.

E-kaubanduse slaidikaardid

Toote kaart

Mis vilgas animatsioon, julgustavad need kaardid otsima nende elemente, et teada saada, mis need on. Omar Dsoky suurepärase kujundusega.

Liidese disain - tootekaart

Toote kasutajaliides

Ideaalne kaart nende kujundamiseks meie e-kaubanduse toode. Valmistatud HTML-is ja CSS-is.

Tootekaart

Pood

Samalt kaardilt saame läbida mitu pilti et toodet paremini näha. See sisaldab nuppu Lisa ostukorvi ning sisaldab HTML-i, CSS-i ja JavaScripti koodi.

Flexy tootekaardid

Painduv kaart

Nagu nimigi osutab, kasutab flexboxi huvitava animatsiooni loomiseks, kui klõpsame nupul Lisa ostukorvi.

Pöörake kaarte

Pöörake kaarti

Väike kood mõnede kaartide jaoks, millel on sile ja täiuslik animatsioon. Mõne minuti jooksul saate need lisada. Hiljuti lisatud koodipulgale.

Kaardid 3D-tootekaartidena

3D-kaart

Tuleb märkida, et need kaardid on nagu oleks meil kaardil seeria laual. Kursor jäetakse positsioonile ja suumitakse, klõpsatakse igaühel ja näidatakse toote teabe kuvamiseks kaardi tagakülge. Klõpsame uuesti ja jätame selle nagu esiosaga. Ideaalne 3D CSS-i omaduste õppimiseks.

Parallaksi kaart

Parallaksi kaart

Väga visuaalne katse a pilkupüüdev klapiefekt. Parem on, et te seda näeksite, et teada, millest see räägib.

Kaardil hõljutusefekt

Hõljutatud kaart

Lihtne efekt, kuid trikklik hõljuk kaartide kohta.

Lihtne hõljutusefekt

Lihtne kaart

Rabav üsna lihtne efekt, kuid sellel on suurepärane mõju hetkel, kui seda visualiseerime.

Parallaksi sügavuskaardid

Parallaksi sügavus

Nendel kaartidel on parallaksi mõiste tippu kujunduse järgi moodustada mõned väga silmatorkavad kaardid. Mõne kategooria valimisel meie ajaveebis peate seda lihtsalt nägema, et paremini mõista selle mõju kasutajale.

UI-kaart filmide jaoks

Filmikaart

Kaart HTML-iga tehtud suurepärane paigutus ja CSS.

Profiilikaart

Kontaktikaart

Väga head animatsioonid kontaktikaardi jaoks, milles saame juurutada juurdepääsu sotsiaalmeedia profiilidele. HTML ja CSS.

Polaroid komplekteeritud kaardid

Polaroid

Omaduste, filtrite ja CSS-i kohandatud üleminekud See seeria Polaroid grupeeritud kaarte on loodud; ära igatse neid SVG-piltide veebi.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Kommentaar, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   Cristian DIJO

    Kõiki neid kaarte on võimalik lisada WordPressiga lehele