27 saamaynta qoraalka CSS ee muhiimka u ah qoraalka boggaaga

Abuurista khadka tooska ah

La qorista boggayagu waa muhiim taasi waxay ku habboon tahay nuxurka aan ka shaqeyneyno eCommerce, blog ama bogga soo degitaanka. Taasi waa sababta ay lagama maarmaanka u tahay in la ogaado sida saxda ah ee loo doorto ilaha nooga imaan kara baqdinta si akhristaha ama iibsadaha loogu dhiirrigeliyo inuu akhriyo sadarro kasta oo dhammaystiraya isla wixii.

Laakiin marka laga reebo qoraalka, xigmad leh wuu dalban karaa saamaynta qoraalka CSS si loo siiyo taabashadaas gaarka ah iyo "qabashada" macaamilka raadinaya badeecad aan ku hayno buugayaga eCommerce. Markaa waxaan la wadaagi doonnaa 25 saamaynta qoraalka CSS ee muhiimka ah si noocaas xitaa u muuqdo mid aad u badan indhaha qofka isticmaala booqda bartayada.

Qoraalka 3D

Saamaynta 3d

Saamaynta qoraalka CSS ee ku dheeleysa waxyaabo kala duwan 3D u keen cinwaanka qoraalka taasi waa mid soo jiidan karta xiisaha booqdaha websaydhkayaga. Garaacis shaki la'aan. Ha moogaan farriimahaan hadda socda ee loogu talagalay naqshadeeyayaasha.

3D CSS qoraal ahaan

3D CSS

Saameyntan 3D wuxuu inagu qaadaa wadooyin kala duwan kii hore oo loogu talagalay far-qoraal kaas oo qaadi doona masraxa dhexe meel kasta oo aan ku leenahay.

Masking animation Path

Jidka maaskaro

Este qoraalka saamayntiisa waa la dhaqaajiyaa in kastoo ay u muuqato mid aad u fududWaxay leedahay waxtarkeeda sidoo kale waa mid aad u adag. Sidii adoo gacanta wax ku qoraya. Xaqiiqdii waad awoodi doontaa inaad hesho meesha ugufiican ee goobtaada, maadaama ay tahay mid kamid ah kuwa ugufiican liiskaan.

Saamaynta xarafka

Saameyn

Waxaa la soo saaray saameyn balaaran iyo ku soo bood qoraalka ku soo saaraya dareenka xarrago iyo xirfad-yaqaannimo weyn.

qaboojiyay

qaboojiyay

Waxaa jira a saamaynta milicsiga qoraalka kaas oo ku qumman kara nooc gaar ah. Wax ay tahay in lagu sameeyo xilliga qaboobaha, guryaha miyiga ama barafka ayaa fiicnaan lahaa.

Hello

Hello

Saameyntan isku day inaad sawirto taxane qaabab yaryar ah si ay ugu dambayn u sameeyaan qoraalka. Koodhadhka CSS ee dhawaan la soo saaray oo muujinaya kakanaanta ay naqshadeynta websaydhku gaadhayso.

Animation khadka qoraalka

Soddognimo

Sida tii hore oo kale, a saamaynta qoraalka CSS oo leh khadad taxane ah oo sawiraya qoraalka loo adeegsaday koodhka.

Gacanta

Gacanta

Saamayn kale oo ka mid ah qoraal animated sare-hit kaas oo awood u leh inuu leexiyo mid kasta oo ka mid ah xarfaha si ay u soo saarto animation tayo sare leh.

CSS animation muujinta qoraalka

CSS

Animation kale oo loogu talagalay saameyn qoraal ah oo aad u qurux badan iyo inay awood u leedahay inay soo saarto dareenka xirfadeed ee booqdahaas ku yimaada websaydhkeenna.

SVG video maaskaro si qoraal ah

SVG

Mid kale oo ka mid ah saameynta ugu fiican liiska oo dhan iyo intaas wuxuu muujinayaa maaskaro fiidiyowga oo aan u hayno asal ahaan sidaa darteed qoraalka waa halyeeyada. Tayo sare leh dhammaan heerarka.

Wax qorida CSS oo kacsan

Galitaanka

Haddii aad awoodo inaad si sax ah u soo bandhigto saameyntan markaad galineyso qoraalka boggaaga, jumlad ahaan ayaa ku dari doonta tiro inta hal abuurka laga hadlayo.

Saamaynta qoraalka "Cool"

Saamaynta qabow

Maaskaro kale oo saameyn ku leh qoraalka taas wuxuu adeegsadaa sawir GIF ah si loo soo saaro natiijo kale oo weyn sida maaskaro muuqaal ah. Waxaad sifiican uga arki kartaa tusaalaha furaha ee Codepen.io.

Cilad qoraal fudud

Dicumintiyo

Saamaynta qoraalka wuxuu si fiican ugu habboon yahay faylalka oo ah farshaxan weji kasta ama xitaa koox koox muusig ah oo aan ku raadineyno firfircooni. Gebi ahaanba indho-qabad.

Cillad maskaxeed

cilmi nafsiga

Sida tii hore, saameyn kale oo qarxin iyo gebi ahaanba qoraal aan rasmi ahayn websaydhyada doonaya inay ka soo baxaan inta kale. Si sax ah loo dhexgeliyey waxay ku ridi kartaa miraha keega.

Qoraalka VHS

Qoraalka VHS

Qaabkaas oo ah fiidiyow si aad ah loo yaqaan sanadihii 80-maadkii iyo 90-maadkii in aan ku soo saari karno CSS-kan.

Ku dul dhaqaaq qoraalka

dulsaar

Kaliya iska daa jiir tilmaame warqad kasta si loo helo saamaynta hover ee HTML, CSS iyo JS code soo saaraan. Aad u xiiso badan heer guud.

Hover Spring saamaynta qoraalka

Qoraalka guga

Wax farsamo ahaan tan hover saamaynta qoraalka kaas oo si aad ah ugu shaqeeya dhammaan noocyada websaydhka la xiriira teknoolojiyada cusub. Lagu dabaqay badhanka sidoo kale wuxuu leeyahay natiijo aad u fiican.

Sass Loops fudud CSS

SASS

Saamaynta kale ee qoraalka Tayada sare iyo xarrago CSS oo soo saari kara dhammaan noocyada kala duwan ee dareenka soo booqdaha. Aad loogu taliyay.

Laydi xarriiqyo badan

Span

Saamaynta qoraalka CSS oo aad u fudud, laakiin leh awood weyn oo wax ku ool ah Waa maxay.

Hoos ka daawo

Hoosta ka xariiqay

Haddii aad rabto muuji cutubka qoraalka ee booqdaha meeleeyaha tilmaamaha jiirka, saameyntan CSS waxay soo saartaa hoosta. Aad u xiiso badan sababtoo ah sida hal-abuurka iyo xiisaha leh ay tahay.

Waxyaabaha "Shisheeyaha"

Waxyaabaha shisheeye

Sida kuwa caanka ah taxane TV ochontera Waxyaabaha Shisheeye, Saameyntan hover waxay awood u yeelan doontaa inay sameyso qaab qorista taxanaha oo leh natiijo weyn.

Qoraalka wareegaya

qoqobada

Runtii waa a saamaynta biyo dhaca taasi waxay badaleysaa erayga muhiimka ah ee qoraalka aan shaashada ku heyno. Aad u gimmicky.

Saameynta CSS Groovy

Groovy

Saamaynta qaboojinta qoraalka qabow loogu talagalay waxyaabaha ku jira bogga mawduuc gaar ah.

Saamaynta Gradient

Hooska dushiisa

Saamayn muuqaal oo aad u layaab leh ayaa hadhka nooc. Weyn shaki la'aan shaki la'aan meelkasta oo aan leenahay midab badan.

Hooska parallax

parallax

A parallax hooska saamaynta maaddaama aan dul-dhigeyno tilmaameha qoraalka.

Saamaynta makiinada

guji saamaynta

Fudud iyo saamaynta moobil-qabasho ee qoraalka taas oo si aad u wanaagsan dib loo abuuray.

Qorista qoraalka

Waxaan qoraa qoraalka

Kuwa kale garaacid saameyn aanad seegi karin gudaha CSS, HTML iyo JS.


Nuxurka maqaalka wuxuu u hogaansamayaa mabaadi'deena anshaxa tifaftirka. Si aad u soo sheegto khalad guji Halkan.

Noqo kuwa ugu horreeya ee faallo bixiya

Ka tag faalladaada

cinwaanka email aan la daabacin doonaa. Beeraha loo baahan yahay waxaa lagu calaamadeeyay la *

*

*

  1. Masuul ka ah xogta: Miguel Ángel Gatón
  2. Ujeedada xogta: Xakamaynta SPAM, maaraynta faallooyinka.
  3. Sharci: Oggolaanshahaaga
  4. Isgaarsiinta xogta: Xogta looma gudbin doono dhinacyada saddexaad marka laga reebo waajibaadka sharciga ah.
  5. Kaydinta xogta: Macluumaadka ay martigelisay Shabakadaha Occentus (EU)
  6. Xuquuqda: Waqti kasta oo aad xadidi karto, soo ceshan karto oo tirtiri karto macluumaadkaaga.