27 saamaynta qoraalka CSS ee muhiimka u ah qoraalka boggaaga

Abuurista khadka tooska ah

La typography of our website waa lagama maarmaan taas oo ku habboon nuxurka aan ku soo bandhigayno eCommerce, blog ama bogga degitaanka. Taasi waa sababta ay lagama maarmaan u tahay in la ogaado sida saxda ah ee loo dooran karo isha nooga iman karta cabsida si akhristaha ama iibsadaha loogu dhiirigeliyo inuu akhriyo mid kasta oo ka mid ah cutubyada dhamaystiraya nuxurka isku midka ah.

Laakiin marka laga reebo qoraalka, si xikmad leh codsan kartaa saamaynta qoraalka CSS si loo siiyo taabashadaas gaarka ah oo "qabso" macmiilka raadinaya badeecad aan ku hayno buug-gacmeedkayaga eCommerce. Markaa waxaanu wadaagi doonaa 25 saamaynta qoraalka muhiimka ah ee CSS si wejigani uu uga soo muuqdo indhaha isticmaalaha soo booqda boggayaga.

Qoraalka 3D

Saamaynta 3d

Saamaynta qoraalka CSS ee ku ciyaara canaasiirta kala duwan si keen 3D si aad u qorto taas oo awood u leh inay qabato xiisaha booqdaha boggayaga internetka. Indho-qabasho shaki la'aan. Ha seegin kuwan xarfaha hadda jira ee naqshadeeyayaasha.

3D CSS qaab-qoraal

3D CSS

Saameyntan 3D waxay nagu haysaa wadooyin kala duwan tii hore oo loogu talagalay far-qoraalka oo qaadan doona heerka dhexe meel kasta oo aanu dhigno.

Masking Path animation

Dariiqa indho-shareerka

Este saamaynta qoraalku waa firfircoon, inkastoo ay u muuqato mid aad u fududWaxay leedahay waxtarkeeda sidoo kale waa mid aad u adag. Sida gacan wax ku qora. Waxaa hubaal ah inaad awood u yeelan doonto inaad hesho meesha ugu fiican ee goobtaada, maadaama ay tahay mid ka mid ah kuwa ugu fiican liiskan.

Saamaynta xarfaha

Saameyn

Waxaa la soo saaray saamayn ballaaran iyo ku bood qoraalka soo saara dareenka xarrago iyo xirfad-yaqaannimo.

qaboojiyay

qaboojiyay

Waxaa jira a saamaynta milicsiga qoraalka kaas oo ku haboonaan kara waji gaar ah. Wax la sameeyo jiilaalka, guryaha waddanka ama barafka ayaa ku habboonaan lahaa.

Hello

Hello

Saameyntan isku day in aad sawirto qaabab kala duwan oo cabbir yar si ay ugu dambeyntii u sameeyaan qoraalka. Koodhka CSS ee dhawaan la soo saaray kaas oo muujinaya kakanaanta in naqshadaynta shabakadu gaadho.

animation line text

Soddognimo

Sida kii hore, a saamaynta qoraalka CSS oo cajiib ah oo leh sadar taxane ah oo sawiraya qoraalka koodka lagu dabaqay.

Gacanta

Gacanta

Saamayn kale oo ka mid ah qoraal animated natiijada weyn kaas oo awood u leh inuu leexiyo mid kasta oo ka mid ah xarfaha si uu u soo saaro animation tayo badan leh.

CSS animation muujinaya qoraalka

CSS

animation kale oo loogu talagalay saameyn qoraal ah oo aad u qurux badan iyo in ay awood u leedahay in ay soo saarto dareenka xirfad-yaqaanka ee booqdaha ee yimaada boggayaga.

Maaskaro muuqaalka SVG qoraal ahaan

SVG

Mid kale oo ka mid ah saamaynta ugu fiican ee liiska oo dhan iyo in wuxuu muujinayaa maaskarada muuqaalka aan hayno asal ahaan si qoraalku u noqdo jilaagii. Tayada sare ee dhammaan heerarka.

galinta qoraalka CSS ee firfircoon

Galitaanka

Haddii aad awood u leedahay inaad si habboon u soo bandhigto saamayntan markaad qoraalka geliso boggaaga, si xad dhaaf ah ayaa ku dari doona tirooyin marka laga hadlayo hal-abuurka.

Saamaynta qoraalka "qabow".

Saamaynta Qabow

Maaskaro kale oo saameyn qoraal ah taas isticmaala sawirka GIF si loo soo saaro natiijo kale oo weyn sida maaskarada fiidiyowga. Si fiican ayaad uga arki kartaa tusaalaha koodka ee Codepen.io.

Cilad qoraal fudud

Dicumintiyo

Saamaynta qoraalkan si fiican ugu habboon faylalka fannaanka weji kasta ha lahaadee ama xitaa kooxda muusiga oo aan ku raadinayno firfircooni. Gebi ahaanba il-qabad

Cilad maskaxeed

cilmi nafsiga

Sida kii hore, saameyn kale oo ka mid ah qoraal bam ah oo gebi ahaanba random mareegahaas doonaya in ay ka soocaan inta kale. Si sax ah isku dhafan waxay ku dhejin kartaa jeexjeexyada keega.

qoraalka VHS

qoraalka VHS

Qaabkaas oo ah Fiidiyow aad loo yaqaan 80-meeyadii iyo 90-meeyadii in aan ku soo saari karno CSS-kan.

Saamaynta qoraalka

dulsaar

Kaliya ka tag tilmaame jiirka xaraf kasta si loo helo saamaynta dullidda ee HTML, CSS iyo code-ka JS soo saarto. Aad u xiiso badan oo heer guud ah.

Saamaynta qoraalka Guga Hover

Qoraalka guga

Wixii teknooloji ah tan saamaynta qoraalka dulbeeya Kaas oo si aad u wanaagsan ugu shaqeeya dhammaan noocyada mareegaha ee la xiriira tignoolajiyada cusub. Codsaday badhanka waxay sidoo kale leedahay natiijo fiican.

Sass Loops fudud CSS

SASS

Saamaynta qoraalka kale CSS tayo sare leh iyo xarrago leh taas oo soo saari karta dhammaan noocyada dareenka ee booqdaha. Aad loogu taliyay.

Dhan khadadka badan

Span

Saameyn qoraal ah oo aad u fudud CSS, laakiin oo leh karti weyn oo wax ku ool ah Waa maxay.

Xariiqda toosan

Hoosta ka xariiqay

Haddii aad rabto Muuji cutubka qoraalka kaas oo booqdaha dhig tilmaame jiirka, saameeyntan CSS waxay soo saartaa hoosta. Aad u xiiso badan sababtoo ah sida hal-abuurka iyo xiisaha ay u leedahay.

"Waxyaabaha shisheeye" saamaynta

Waxyaabaha shisheeye

Sida caanka ah ochontera TV taxane ah oo qalaad, Saamayntan hover waxay awood u yeelan doontaa inay samayso qoraalka taxanaha ah natiijo weyn.

Qoraalka wareega

qoqobada

Runtii waa a saamaynta biyo-dhac kaas oo bedelaya ereyga muhiimka ah ee qoraalka aan ku hayno shaashadda. Aad u qosol badan.

Saamaynta CSS Groovy

Groovy

Saamaynta hadhka qoraalka qabow Wixii ku jira mareegaha mowduuc gaar ah.

Saamaynta gradient

Hooska hoose

Saameyn muuqaal ah oo aad u cajiib ah oo loogu talagalay hadhka qoraalka. Way fiican tahay shaki la'aan meel kasta oo aan ku leenahay midab badan.

Parallax hadh

parallax

A saamaynta hooska parallax marka aynu dulmareyno tilmaanta qoraalka.

Saamaynta qorista

saamaynta guji

A fudud iyo Saamaynta qorista ee indhaha soo jiidata taas oo si aad u wanaagsan dib loo abuuray.

Qorista qoraalka

Waxaan ku qoraa qoraal

Kuwa kale saamaynta ku-qorista ma seegi kartid 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.

*

*

  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.