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.
Index
- 1 Blog txartela fun # 1
- 2 CSS Albiste Txartelak CSS soilik
- 3 Blogeko mezua
- 4 Blog txartelak
- 5 Erantzunezko bisita-txartelak
- 6 Beste blog txartel bat
- 7 Enpresa-txartelak
- 8 3D bisita txartela
- 9 CSS bisita txartela
- 10 Txartelen saretak
- 11 3D txartelak agerian
- 12 Material sentikorra diseinatzeko txartela
- 13 Flexbox txartelaren sareta
- 14 Clash of Clans kartak
- 15 Merkataritza elektronikorako diapositibak
- 16 Interfazearen diseinua - Produktu txartela
- 17 Produktu txartela
- 18 Flexy produktu txartelak
- 19 Irauli txartelak
- 20 Txartelak 3D produktu txartel gisa
- 21 Parallax txartela
- 22 Pasatu efektua kartetarako
- 23 Pasatzearen efektu sinplea
- 24 Parallax Sakonera Txartelak
- 25 Filmetarako UI txartela
- 26 Profil txartela
- 27 Polaroid sortutako txartelak
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
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.
Iruzkin bat, utzi zurea
Karta horietako edozein wordpress-ekin orri batean txertatzeko aukera izango da