Olùpilẹ̀ṣẹ̀ Gradient CSS

Kàn yan àwọ̀ àti igun láti ṣẹ̀dá kóòdù gradient CSS pẹ̀lú àkíyèsí àkọ́kọ́

Ìsọfúnni ìmúdójúìwọ̀nA fi ẹ̀rọ ìṣẹ̀dá gradient CSS kun, yan awọ àti igun láti ṣẹ̀dá kóòdùWo Alaye Imudojuiwọn

Àwọn Àbùdá

Àkíyèsí àti Kóòdù ń ṣàtúnṣe pọ̀

Ìrísí àti CSS ń yípadà ní àkókò kan náà bí o ṣe ń yí àwọ̀ tàbí igun padà

Ó gbà fún Linear, Radial, àti Conic

Ṣe àfibọ̀ igun, ìrísí, àti ipò àárín fún ọ̀kọ̀ọ̀kan irú

Àtúnṣe àwọ̀ tó dé 10 pẹ̀lú fífà

Fa ipò àwọ̀ lórí báàrì, kí o sì lo sláìdà fún ìrísí aláwọ̀

Àwòrán 8 àti ṣíṣẹ̀dá láìlérò

Bẹ̀rẹ̀ pẹ̀lú àwọn àwòrán tàbí àyànfẹ́ àwọ̀ láìlérò, kí o sì ṣàtúnṣe díẹ̀díẹ̀

Bí Á Ṣe Ń Lò Ó

Yan irú

Yan irú gradient láti inú linear, radial, tàbí conic

Pinnu àwọ̀

Yan àwọ̀ nípasẹ̀ kóòdù àwọ̀ tàbí àwòrán, kí o sì lo "Fi àwọ̀ kún" láti fi àwọ̀ síi, kí o sì ṣàtúnṣe ipò àti ìrísí aláwọ̀

Ṣàtúnṣe ìtọ́sọ́nà

Fún linear, lo igun tàbí bọ́tìnnì ìtọ́sọ́nà; fún radial àti conic, sọ ipò àárín

Kọ́pì kóòdù

Lo bọ́tìnnì "Kọ́pì" láti fi CSS ọ̀kan-líìnì sí ara ìrísí rẹ

Àwọn Lílò

Ṣíṣẹ̀dá àtẹ̀yìnwá fún àwòrán Hero

Pinnu àwọ̀ àtẹ̀yìnwá orí ojú-ìwé tàbí bọ́tìnnì láìkọ kóòdù

Yíyan àwọ̀ fún orí-ọ̀rọ̀ bulọ́ọ̀gì

Yan àwọ̀ tó súnmọ́ láti inú àwòrán láti ṣàtúnṣe àtẹ̀yìnwá orí-ọ̀rọ̀ àpilẹ̀kọ

Àtẹ̀jáde lórí àwòrán fọ́tò

Ṣẹ̀dá ìpele tí ó dàbí onítòótọ́-díẹ̀ lórí fọ́tò pẹ̀lú àwọ̀ tí ìrísí aláwọ̀ rẹ̀ dín kù

Àtúnṣe gradient ọ̀pọ̀lọpọ̀ àwọ̀

Fa ẹ̀gbẹ́ àárín àwọ̀ mẹ́ta tàbí jù bẹ́ẹ̀ lọ díẹ̀díẹ̀ súnmọ́ra

Ìmọ̀ Ìpìlẹ̀

Ìyàtọ̀ láàrín linear, radial, àti conic

Gradient CSS ní àwọn iṣẹ́ mẹ́ta tí ọ̀nà ìyípadà àwọ̀ wọn yàtọ̀, gbogbo rẹ̀ sì ni a kọ sí inú ohun-ìní background.

linear-gradient：linear-gradient jẹ́ gradient onítòótọ́ tí àwọ̀ rẹ̀ ń yípadà ní ìbámu pẹ̀lú ìlà tààrà ti igun tí a sọ.
radial-gradient：radial-gradient jẹ́ gradient àyíká tí àwọ̀ rẹ̀ ń tàn láti ipò àárín síta ní ìrísí Circle tàbí Ellipse.
conic-gradient：conic-gradient jẹ́ gradient fanimọ́ra tí àwọ̀ rẹ̀ ń yípadà bí ó ṣe ń yí yípo ipò àárín ní ìtọ́sọ́nà aago.

Ìbámu láàrín igun àti ọ̀rọ̀-ìtọ́sọ́nà

Igun ti linear-gradient, 0deg túmọ̀ sí ìtọ́sọ́nà láti ìsàlẹ̀ lọ sí òkè, bí nọ́mbà náà ṣe ń pọ̀ sí i, ó ń yípo ní ìtọ́sọ́nà aago. A lè tún kọ igun pẹ̀lú ọ̀rọ̀-ìtọ́sọ́nà bí "to right"; 90deg dọ́gba pẹ̀lú "to right", 180deg sì dọ́gba pẹ̀lú "to bottom".

Bí a ṣe ń kọ àwọn ibùdúró àwọ̀ àti ìrísí aláwọ̀

Ibùdúró àwọ̀ (color stop) jẹ́ ipò nínú gradient tí àwọ̀ náà ti farahàn, 0% sì jẹ́ ibi tí ó bẹ̀rẹ̀, 100% sì jẹ́ ibi tí ó parí. Fún àpẹẹrẹ, "#3B82F6 0%, #8B5CF6 100%" túmọ̀ sí pé àwọ̀ náà ń yípadà láti ibi tí ó bẹ̀rẹ̀ aláwọ̀ búlúù sí ibi tí ó parí aláwọ̀ àlùkò.

Ìrísí #RRGGBB：Ìrísí #RRGGBB jẹ́ ọ̀nà kíkọ àwọ̀ tí ó fi agbára pupa, àwọ̀ewé, àti búlúù hàn ní ọ̀nà-nọ́mbà hẹ́kísádẹ́sìmàlì oni-digiti méjì kọ̀ọ̀kan, #FF0000 sì túmọ̀ sí àwọ̀ pupa tí kò lè rí nà.
Ìrísí rgba：Ìrísí rgba jẹ́ ọ̀nà kíkọ àwọ̀ tí ó fi ìrísí aláwọ̀ (0 sí 1) kún iye pupa, àwọ̀ewé, àti búlúù (0 sí 255), ìrísí aláwọ̀ 0.5 sì túmọ̀ sí àwọ̀ tí ó jẹ́ ìdajì tí ó lè rí nà.