Amakhadi angama-27 asimahla e-HTML kunye ne-CSS kwiiblogi, ezentengiso ze-e kunye nokunye

Amakhadi okuHover

Izixhobo ezikwi-Intanethi ziphantse zangapheliyo, kodwa ukuzifumana komgangatho yeyona nto inzimaNangona ukhangela kancinci kwaye unoluhlu olufanelekileyo lwewebhusayithi ezinikezelwe kuyilo, izinto ziba lula. Ngexesha apho iilwimi ezinje nge-HTML kunye ne-CSS zikwixesha elimnandi, ukusondela simahla, izibonelelo ezikumgangatho ophezulu ziphantse zonqakraza kude.

Siza kudwelisa uthotho lwe amakhadi asimahla kwi-HTML nakwi-CSS Ezifanele zonke iintlobo zeblogi, ishishini, i-e-commerce nokunye okuninzi. Ingqokelela yexesha elide ukuze ibandakanywe komnye wemisebenzi oyenzayo kuzo zonke iintlobo zabaxumi. Masenze ngolu luhlu olusebenzisa codepen.io ukuze ufumane ikhowudi kuzo zombini i-HTML kunye ne-CSS.

Ikhadi leBlog blog # 1

Ukuzonwabisa kweKhadi

Omnye ikhadi elikhulu loyilo ethi phantse yonke into emelwe ngumfanekiso, ungaya kwi codepen.io ukufumana ikhowudi ehambelana nokuyifaka kwiwebhusayithi yakho.

Amakhadi eeNdaba zeCSS kuphela i-CSS

Ikhadi leendaba

Eli khadi, kunye Izinto ezingaqhelekanga njengemvelaphi, ivelela oopopayi bayo abagudileyo obuveza umxholo. Icocekile iCSS.

Umxholo wePosti yeBhlog

Iposi yebhlog

Imboniso yewebhu ngokuzisa isikhombisi semouse phezu kwayo. Ine-CSS kunye ne-HTML ngokudibanisa ngokulula.

Amakhadi ebhlog

Amakhadi ebhlog

Uyilo lwekhadi lebhlog eliphendulayo elincinci. Ukukhawuleza kunye nokugqithisa umgangatho ophezulu ongashiyi nabani na ongenamdla.

Amakhadi oshishino aphendulayo

Amakhadi aphendulayo

Ukuma ngaphandle kwe- oopopayi abancinci ngokuhambisa isikhombisi semouse ngaphezulu komfanekiso wekhadi.

Elinye ikhadi lebhlog

Ikhadi leBlog Blog

Ivela i ikhadi xa ubhabha ngokufanayo.

Amakhadi oshishino

Ikhadi lokundwendwela

Omnye ikhadi elilula kodwa langoku ndwendwela kunye nedemo kunye nekhowudi kwi-HTML nakwi-CSS.

Ikhadi leshishini le3D

Ikhadi le-3D Flip

Eli khadi lifanelekile oopopayi be3D ngeHTML kunye neCSS. Yenziwe ngu-Elena Nazarova, ilungile kwikhadi leshishini elibetha umbala.

Ikhadi leshishini leCSS

Ikhadi leshishini leCSS

Ikhadi leshishini elibalaseleyo kwi-CSS leyo ujikeleza kwi-3D ukwenza uluhlu lothotho lweedilesi ze-URL eziphendula kwisikhombisi semouse ngeli xesha silibeka phantsi.

Iigridi zekhadi

Ikhadi leGridi

Uthotho lwamakhadi abekwe kakuhle ane uyilo olutsala amehlo. Kuyamangalisa ukusebenza kwayo ngokulula, kodwa ngokubetha okuhle kwikhowudi ye-HTML, CSS kunye ne-SCSS.

Amakhadi e-3D atyhilwa

Ikhadi le-3D

Olu luhlu lweigridi zamakhadi kutyhila ulwazi oluninzi ngalo mzuzu ukuba sishiye imouse kwi-icon eluhlaza. Ngexesha elifanayo lokushiya isikhombisi, yonke iigridi ihamba ngokufanelekileyo.

IKhadi loYilo lweMpahla

material Design

Nge ulwimi loyilo lukaGoogle, olu luhlu lwamakhadi lubonakala luphawu lwe menyu oluvula lonke ulwazi lwabadlali njengakwimeko yomzekelo. Oopopayi abahle kunye nabanomdla ngokubonakalayo okuhle.

Igridi yekhadi leFlexbox

I-Flexbox

Umzekelo wekhadi kubude obufanayo ababonakala bevela ukusebenzisa ifomathi yebhokisi ye-flexbox. Elinye lamaxabiso aso kukusetyenziswa kwemilinganiselo yeCSS kunye neefilitha zeCSS.

Ukuxabana kwamakhadi ezindlu

Ukugqibana kwentlanga

El umdlalo weselula othandwayo inamakhadi ayo kwi-HTML nakwi-CSS eyenziwe ngu-Andre Madarang. Singadlula phakathi kwabo ngokuchanekileyo nangokubonwayo.

Isilayidi amakhadi eCommerce

Ikhadi leMveliso

Nge oopopayi be-agile, la makhadi ayakukhuthaza ukuba ukhangele izinto zabo ukuze ufumanise ukuba zingantoni na. Uyilo olukhulu oluvela ku-Omar Dsoky.

Uyilo lojongano-iKhadi leMveliso

Imveliso ye-UI

Ikhadi elifanelekileyo lokuyila ezo Imveliso yeCommerce yethu. Yenziwe nge-HTML kunye ne-CSS.

Ikhadi lemveliso

Imveliso ye-ECommerce

Ukusuka kwikhadi elifanayo sinakho yiya kwimifanekiso eliqela ukubona ngcono imveliso. Ibandakanya ukongeza kwiqhosha lenqwelo kwaye iqulethe i-HTML, CSS kunye nekhowudi yeJavaScript.

Amakhadi eMveliso yeFlexy

Ikhadi leFlexy

Njengoko igama layo libonisa, isebenzisa i-flexbox ukwenza oopopayi abanomdla xa ucofa ukongeza kwiqhosha lenqwelo.

Amakhadi eflip

Ikhadi leflip

Ikhowudi encinci yamanye amakhadi agudileyo kunye oopopayi abagqibeleleyo. Kwimizuzu nje embalwa ungazibandakanya. Kutshanje kufakwe kwi-codepen.

Amakhadi njengamakhadi eMveliso ye3D

Ikhadi le3D

Kufuneka kuqatshelwe ukuba la makhadi ngokungathi sinothotho lwamakhadi etafileni. Isikhombisi sishiyekile kwaye sondeza, cofa nganye, kwaye ubonise umva wekhadi ukubonisa ulwazi ngemveliso. Sicofa kwakhona kwaye sishiya njengoko bekunjalo ngaphambili. Ukugqibelela ekufundeni iipropathi ze-3D CSS.

Ikhadi leParallax

Ikhadi leParallax

Uvavanyo olubonakalayo olubonakalayo iflip yokubamba iso. Kungcono ukuba uyibone ukuze uyazi ukuba ithetha ngantoni.

Ukuhambisa isiphumo samakhadi

Ikhadi lokuhambisa ngaphezulu

Iziphumo ezilula kodwa hover gimmicky malunga namakhadi.

Impembelelo elula yokuhamba

Ikhadi elilula

Ukubetha isiphumo esilula, kodwa oko kunefuthe elikhulu kumzuzu esiwubonayo.

Amakhadi anzulu eParallax

Ubunzulu beParallax

La makhadi athwele i Ingqondo yeparallax ukuya phezulu ukwenza amakhadi aqaqambe kakhulu ngokuyilwa. Kuya kufuneka uyibone ukuze uqonde ngcono isiphumo esivelisayo kumsebenzisi xa ukhetha ezinye zeendidi kwibhlog yethu.

Ikhadi le-UI leemovie

Ikhadi lemuvi

Ikhadi le Uyilo olukhulu olwenziwe nge-HTML kunye neCSS.

Ikhadi leprofayile

Ikhadi loqhakamshelwano

Kakhulu oopopayi abalungileyo Ikhadi lokunxibelelana apho sinokuphumeza ukufikelela kwiiprofayili zemidiya yoluntu. I-HTML kunye neCSS.

Amakhadi ahlanganisiweyo ePolaroid

Polaroid

Ngeepropathi, amacebo okucoca kunye Ukutshintsha kwesiko kweCSS Olu luhlu lwamakhadi angamaqela ePolaroid ayenziwe; ungaphoswa yile mifanekiso ye-SVG.


Izimvo ezi-2, shiya ezakho

Shiya uluvo lwakho

Idilesi yakho ye email aziyi kupapashwa. ezidingekayo ziphawulwe *

*

*

  1. Uxanduva lwedatha: UMiguel Ángel Gatón
  2. Injongo yedatha: Ulawulo lwe-SPAM, ulawulo lwezimvo.
  3. Umthetho: Imvume yakho
  4. Unxibelelwano lwedatha: Idatha ayizukuhanjiswa kubantu besithathu ngaphandle koxanduva lomthetho.
  5. Ukugcinwa kweenkcukacha
  6. Amalungelo: Ngalo naliphi na ixesha unganciphisa, uphinde uphinde ucime ulwazi lwakho.

  1.   cristian sitsho

    Kuya kuba nakho ukufaka naliphi na kula makhadi kwiphepha elinamagama

  2.   Stan sitsho

    NDIYABATHANDA