Doako 27 HTML eta CSS txartel blog, merkataritza elektroniko eta bestelakoetarako

Lineako baliabideak ia infinituak dira, baina kalitatez aurkitzea da zailenaPixka bat bilatu eta diseinuari eskainitako webguneen zerrenda ona izan arren, gauzak errazago bihurtzen dira. HTML eta CSS bezalako hizkuntzak sasoi betean daudenean, kalitate handiko doako baliabideetara hurbiltzea ia klik gutxi falta da.

Serie bat zerrendatuko dugu doako txartelak HTML eta CSS formatuan blog, negozio, merkataritza elektroniko eta askoz gauza gehiagorako oso egokiak direnak. Irismen luzeko bilduma, bezero mota guztientzako egiten ari zaren lan batzuetan sar dadin. Egin dezagun codepen.io erabiltzen duen zerrenda honekin kodea HTML zein CSS formatuan eskuratu ahal izateko.

Blog txartela fun # 1

a diseinu txartel bikaina irudikatzen duen irudia ia guztia esaten duena, codepen.io-ra joan zaitezke dagokion kodea lortzeko eta zure webgunean instalatzeko.

CSS Albiste Txartelak CSS soilik

Txartel hau, batera Stranger Things atzeko plano gisa, edukia agerian uzten duen animazio leunagatik nabarmentzen da. CSS hutsa da.

Blogeko mezua

Webaren aurrebista saguaren erakuslea gainean jarriz. CSS eta HTML ditu erraz sartzeko.

Blog txartelak

Erantzuten duen blog txartelen diseinu minimalista. Animazio azkarrak eta leunak inor axolagabe uzten ez duten kalitate handikoak.

Erantzunezko bisita-txartelak

Nabarmentzen da animazio arina saguaren erakuslea txartelaren irudiaren gainean kokatuz.

Beste blog txartel bat

Agertzen da txartelaren testua pasatzean berean.

Enpresa-txartelak

a txartel sinplea baina unekoa bisitatu demo eta kodea HTML eta CSS bidez.

3D bisita txartela

Karta honek merezi du HTML eta CSS 3Dko animazioa. Elena Nazarovak egina, ezin hobea da kolore deigarrien bisita txarteletarako.

CSS bisita txartela

CSSn oso txartel deigarria 3Dan biratzen du jartzen dugun momentuan saguaren erakusleari erantzuten dioten URL helbide sorta bat egiteko.

Txartelen saretak

Ongi kokatutako karta sorta diseinu deigarria. Harrigarria da estetika sinplistagatik, baina arrakasta handia izan du HTML, CSS eta SCSS kodean.

3D txartelak agerian

Karta sareta sorta hau informazio gehiago agerian une honetan sagua ikono berdearen gainean utzi dugu. Erakuslea uzten dugun aldi berean, gainerako sareta horren arabera mugitzen da.

Material sentikorra diseinatzeko txartela

Con el google diseinu hizkuntza, aktoreen informazio guztia irekitzen duen menu ikonoagatik nabarmentzen diren karta sorta hau agertzen da adibidean bezala. Animazio eder eta intuitiboak itxura bisual bikainarekin.

Flexbox txartelaren sareta

Txartelaren prototipoa sareta flexbox formatua erabiltzeagatik nabarmentzen diren altuera berean. Bere beste balioetako bat CSS aspektu erlazioak eta CSS iragazkiak erabiltzea da.

Clash of Clans kartak

El mugikorreko joko ezaguna bere txartelak Andre Madarang-ek sortutako HTML eta CSS formatuan ditu. Animazio zehatz eta oso bisual batekin igaro gaitezke haien artean.

Merkataritza elektronikorako diapositibak

Batekin animazio arina, karta hauek beren elementuak bilatzera bultzatzen zaituzte zertaz ari diren jakiteko. Omar Dsoky-ren diseinu bikainarekin.

Interfazearen diseinua - Produktu txartela

Hauek diseinatzeko txartel ezin hobea gure merkataritza elektronikoaren produktua. HTML eta CSS bidez egina.

Produktu txartela

Ahal dugun txartel beretik hainbat irudi pasatu produktua hobeto ikusteko. Gehitu saskira botoia eta HTML, CSS eta JavaScript kodea ditu.

Flexy produktu txartelak

Bere izenak adierazten duen moduan, flexbox erabiltzen du animazio interesgarria sortzeko saskira gehitu botoian klik egiten dugunean.

Irauli txartelak

Kode txikia txartel leun eta leun batekin animazio ezin hobea. Minutu gutxitan sartu ditzakezu. Berriki kodepen gehitu da.

Txartelak 3D produktu txartel gisa

Kontuan izan behar da karta horiek direla mahai gainean karta sorta bat izango bagenu bezala. Erakuslea atsedenean uzten da eta handitzen dute, bakoitzaren gainean klik egiten dute eta txartelaren atzealdea erakusten dute produktuaren informazioa erakusteko. Berriro klik egiten dugu eta aurrekoarekin bezalaxe uzten dugu. Ezin hobea 3D CSS propietateak ikasteko.

Parallax txartela

A-rekin egindako esperimentu oso bisuala irauli efektu deigarria. Hobe da ikustea zertaz ari den jakiteko.

Pasatu efektua kartetarako

Efektu sinplea baina gimmicky pasatzean kartei buruz.

Pasatzearen efektu sinplea

Eragin nahiko deigarria, baina horrek eragin handia du ikusten dugun momentuan.

Parallax Sakonera Txartelak

Karta hauek paralax kontzeptua goialdera diseinuaren arabera oso karta deigarriak osatzeko. Ikusi besterik ez duzu gure blogeko kategoria batzuk hautatzean erabiltzaileak sortzen duen efektua hobeto ulertzeko.

Filmetarako UI txartela

Ren karta bat HTMLrekin egindako diseinu bikaina eta CSS.

Profil txartela

oso animazio onak sare sozialetako profiletarako sarbidea ezar dezakegun harreman txartel baterako. HTML eta CSS.

Polaroid sortutako txartelak

Propietateekin, iragazkiekin eta CSS trantsizio pertsonalizatuak Polaroid taldekatutako karta sorta hau sortzen da; ez galdu SVG irudi hauek.