DevTulz Online

CSS ግራዲያንት ጀነሬተር

የቀለም ቆሚዎች

CSS ግራዲያንት ምንድን ነው?

CSS ግራዲያንቶች ምስሎችን ሳይጠቀሙ ሁለት ወይም ከዚያ በላይ ቀለሞች መካከል ለስላሳ ሽግግር እንዲያሳዩ ያስችሉዎታል። በሦስት ዓይነቶች ይመጣሉ፦ linear-gradient (በቀጥታ መስመር)፣ radial-gradient (ከማዕከላዊ ነጥብ ወደ ውጭ)፣ እና conic-gradient (በማዕከላዊ ነጥብ ዙሪያ)። ግራዲያንቶች ለዳራዎች፣ አዝራሮች፣ ሽፋኖች እና ማስጌጫ አካላት ያገለግላሉ።

CSS ግራዲያንት ጀነሬተርን እንዴት መጠቀም እንደሚቻል

  1. ከናሙናዎቹ ቅድሚያ የተዘጋጀን ምረጥ ወይም የራስዎን ግራዲያንት ያዋቅሩ።

  2. የግራዲያንት አይነቱን ይምረጡ፦ linear፣ radial ወይም conic።

  3. ማዕዘኑን (ለ linear/conic) ወይም ቅርፁን (ለ radial) ያስተካክሉ።

  4. የቀለም ቆሚዎችን ያርትዑ — ቀለሞች እና ቦታዎችን (0–100%) ይቀይሩ።

  5. እንደፈለጉ የቀለም ቆሚዎችን ይጨምሩ ወይም ያስወግዱ።

  6. CSS ቅዱ እና ወደ ዘይቤ ወረቀትዎ ይለጥፉ።

ተደጋግሞ የሚጠየቁ ጥያቄዎች

ግልጽ ቅልጥፍና እንዴት አደርጋለሁ? rgba() ወይም hsla() ቀለም እሴቶችን alpha channel ወደ 0 ጋር ይጠቀሙ ሙሉ ግልጽነት ለ. ለምሳሌ, rgba(0,0,0,0) ውስጥ ሙሉ ግልጽ ጥቁር ነው, ሥዕሎች ላይ ደካማ-ውጽኢት overlays ለ ጠቃሚ.

ግትር ቀለም ማቆሚያ (ምንም ሽግግር ሌላ) እንዴት እንደሚሠራ? ሁለት ቀለም ማቆሚያዎች በተመሳሳይ ሚዛን ላይ ያስቀምጡ — አንዱ ማቆሚያ እና ሌላው ቅጂ በዚህ ነጥብ. ለምሳሌ, ቀይ 50%, ሰማያዊ 50% ይልቅ ምንም ቅልጥፍና ሽግግር ከምንም ቀይ ወደ ሰማያዊ አፍታ ላይ.

ምን አይነት ተንሳፊዎች conic gradients ይደግፉታል? Conic gradients በሁሉም ዘመናዊ ተንሳፊዎች ይደገፋሉ (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). በ Internet Explorer ውስጥ አይደገፉም.

በተመሳሳይ element ላይ ብዙ ቅልጥፍናዎችን ልጠቀም ይችላለሁ? አዎ. CSS background comma-separated ሪስተ ንብርብሮች ይቀበላል. ቅልጥፍናዎችን ስታ, background ሥዕሎች ጋር ያጣምሩ, እና ለእያንዳንዱ ንብርብር ሚዛን እና ንብርብር ንብርብር ለየሌላ መቆጣጠር.

Keywords: CSS ግራዲያንት ጀነሬተር፣ linear gradient፣ radial gradient፣ conic gradient፣ CSS ዳራ ጀነሬተር፣ ግራዲያንት ቀለም መምረጫ፣ CSS ግራዲያንት መሳሪያ