27 HTML ọfẹ ati awọn kaadi CSS fun awọn bulọọgi, e-commerce ati diẹ sii

Rababa Awọn kaadi

Awọn orisun ori ayelujara fẹẹrẹ ailopin, ṣugbọn wiwa wọn ti didara jẹ gaan ohun ti o niraBotilẹjẹpe wiwa diẹ ati nini atokọ ti o dara ti awọn oju opo wẹẹbu ti a ṣe igbẹhin si apẹrẹ, awọn nkan di irọrun. Ni akoko kan nigbati awọn ede bii HTML ati CSS wa ni apẹrẹ nla, sunmọ sunmọ ọfẹ, awọn orisun ti o ni agbara giga fẹrẹ to jinna diẹ.

A yoo ṣe atokọ lẹsẹsẹ ti awọn kaadi ọfẹ ni HTML ati CSS ti o baamu ni pipe fun gbogbo awọn oriṣi bulọọgi, iṣowo, e-commerce ati pupọ diẹ sii. Gbigba ibiti o gun-gun ki o le ṣafikun diẹ ninu iṣẹ ti o n ṣe fun gbogbo iru awọn alabara. A yoo ṣe pẹlu atokọ yii ti o lo codepen.io ki o le gba koodu naa ni HTML ati CSS.

Blog Kaadi igbadun # 1

Kaadi Fun

una kaadi apẹrẹ nla ti o sọ fere ohun gbogbo aworan ti o duro fun, o le lọ nipasẹ codepen.io lati gba koodu ti o baamu ki o fi sii lori oju opo wẹẹbu rẹ.

Awọn kaadi iroyin CSS nikan CSS

Kaadi iroyin

Kaadi yi, pẹlu Ohun ajeji bi isale, duro fun iwara rẹ ti o han akoonu. O jẹ CSS mimọ.

Ohun kan Post Blog

Bulọọgi ifiweranṣẹ Awotẹlẹ ti oju opo wẹẹbu nipa kiko ijuboluwole asin sori rẹ. O ni CSS ati HTML fun iṣakojọpọ irọrun.

Awọn kaadi bulọọgi

Awọn kaadi bulọọgi

Apẹrẹ kaadi kaadi bulọọgi ti o ni idahun. Sare ati ki o dan awọn ohun idanilaraya ga didara ti ko fi ẹnikẹni silẹ.

Awọn kaadi owo idahun

Awọn kaadi idahun

Duro jade fun iwara diẹ nipa fifin ijuboluwole asin lori aworan kaadi.

Kaadi bulọọgi miiran

Blog rababa Kaadi

Han awọn ọrọ kaadi nigbati o ba n ṣaakiri ni kanna.

Awọn kaadi owo

Ibewo kaadi

una o rọrun ṣugbọn kaadi lọwọlọwọ ṣabẹwo pẹlu demo ati koodu ni HTML ati CSS.

3D kaadi owo

3D Flip Kaadi

Kaadi yi tọ iwara 3D kan pẹlu HTML ati CSS. Ti a ṣe nipasẹ Elena Nazarova, o jẹ pipe fun kaadi iṣowo ti o kọlu awọ.

Kaadi iṣowo CSS

Kaadi iṣowo CSS

Kaadi iṣowo ti o kọlu pupọ ni CSS pe yiyi pada ni 3D lati ṣe ọna fun lẹsẹsẹ awọn adirẹsi URL ti o dahun si itọka asin ni akoko ti a fi sii.

Awọn akopọ kaadi

Po Card

A lẹsẹsẹ ti awọn kaadi ti a gbe daradara pẹlu apẹrẹ oju-mimu. O jẹ iyalẹnu fun aesthetics simplistic rẹ, ṣugbọn pẹlu lilu to dara ni HTML, CSS ati koodu SCSS.

3D awọn kaadi ti wa ni fi han

3D kaadi

Yi jara ti awọn akoj kaadi ṣafihan alaye diẹ sii ni akoko yii pe a fi eku silẹ lori aami ni alawọ ewe. Ni akoko kanna ti a fi itọka silẹ, iyoku akoj naa n gbe ni ibamu.

Idahun Ohun elo Apẹrẹ Kaadi

awọn ohun elo ti Design

Pẹlu ede apẹrẹ google, jara awọn kaadi yii han ti o duro fun aami akojọ aṣayan ti o ṣii gbogbo alaye ti awọn olukopa bi ninu apẹẹrẹ apẹẹrẹ. Awọn ohun idanilaraya ti o lẹwa ati ti inu pẹlu irisi iwoye nla.

Akoj kaadi Flexbox

Flexbox

Afọwọkọ kaadi ni giga kanna ti wọn duro jade fun lilo ọna kika flexbox akoj. Omiiran ti awọn iye rẹ ni lilo awọn ipin abala CSS ati awọn asẹ CSS.

Figagbaga ti awọn kaadi Awọn idile

Figagbaga ti awọn idile

El gbajumo mobile game ni awọn kaadi rẹ ni HTML ati CSS ti a ṣẹda nipasẹ Andre Madarang. A le kọja laarin wọn pẹlu iwara deede ati iwara wiwo ga julọ.

Awọn kaadi ifaworanhan fun eCommerce

Ọja Card

Pẹlu a Yara iwara, awọn kaadi wọnyi gba ọ niyanju lati wa awọn eroja wọn lati wa ohun ti wọn jẹ. Pẹlu apẹrẹ nla lati Omar Dsoky.

Apẹrẹ Ọlọpọọmídíà - Kaadi Ọja

Ọja UI

Kaadi pipe lati ṣe apẹrẹ awọn ti ọja ti eCommerce wa. Ṣe ni HTML ati CSS.

Kaadi ọja

Ọja ECommerce

Lati kaadi kanna a le lọ nipasẹ ọpọlọpọ awọn aworan lati rii ọja dara julọ. O pẹlu ifikun si bọtini rira ati pe o ni HTML, CSS ati koodu JavaScript.

Awọn kaadi Ọja Flexy

Kaadi Flexy

Bi orukọ rẹ ṣe tọka, nlo flexbox lati ṣẹda iwara ti o nifẹ nigbati a tẹ lori ifikun si bọtini rira.

Awọn kaadi isipade

Isipade kaadi

Kekere koodu fun diẹ ninu awọn kaadi pẹlu kan dan ati pipe iwara. Ninu ọrọ ti awọn iṣẹju o le ṣafikun wọn. Laipe ni a fi kun si codepen.

Awọn kaadi bi Awọn kaadi Ọja 3D

3D Kaadi

O yẹ ki o ṣe akiyesi pe awọn kaadi wọnyi jẹ bi ẹni pe a ni awọn kaadi ti kaadi lori tabili kan. O ijuboluwole ti osi ati pe wọn sun-un sinu, tẹ lori ọkọọkan, ki o fihan ẹhin kaadi lati fi alaye ọja han. A tẹ lẹẹkansi ki o fi silẹ bi o ti wa pẹlu iwaju. Pipe fun kikọ awọn ohun-ini 3D CSS.

Parallax Kaadi

Parallax kaadi

A gan visual ṣàdánwò pẹlu kan ipa isipade oju-mimu. O dara ki o rii lati mọ ohun ti o n sọ.

Rababa ipa fun awọn kaadi

Rababa kaadi

Ipa ti o rọrun ṣugbọn gimmicky rababa nipa awọn kaadi.

Ipa rababa ti o rọrun

Kaadi ti o rọrun

Ijqra kuku rọrun ipa, ṣugbọn iyẹn ni ipa nla ni akoko ti a fi oju inu wo o.

Awọn kaadi Ijinle Parallax

Ijinle Parallax

Awọn kaadi wọnyi jẹri awọn imọran parallax si oke lati dagba diẹ ninu awọn kaadi idaṣẹ pupọ nipasẹ apẹrẹ. O kan ni lati rii lati ni oye daradara ipa ti o ṣe lori olumulo nigba yiyan diẹ ninu awọn isori ninu bulọọgi wa.

Kaadi UI fun awọn fiimu

Kaadi fiimu

A kaadi ti ipilẹ nla ti a ṣe pẹlu HTML ati CSS.

Kaadi profaili

Kan si kaadi

Arakunrin ti o dara awọn ohun idanilaraya fun kaadi olubasọrọ ninu eyiti a le ṣe iraye si awọn profaili media media. HTML ati CSS.

Awọn kaadi lapapo ti Polaroid

Polaroid

Pẹlu awọn ohun-ini, awọn awoṣe ati Awọn iyipada aṣa CSS A ṣẹda jara ti awọn kaadi akojọpọ Polaroid; maṣe padanu oju opo wẹẹbu awọn aworan SVG wọnyi.


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Ọrọìwòye kan, fi tirẹ silẹ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade. O beere aaye ti wa ni samisi pẹlu *

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.

  1.   cristian wi

    Yoo jẹ ṣeeṣe lati fi sii eyikeyi awọn kaadi wọnyi lori oju-iwe pẹlu ọrọ-ọrọ