CSS ግራዲያንት ጀነሬተር
CSS ግራዲያንት ምንድን ነው?
CSS ግራዲያንቶች ምስሎችን ሳይጠቀሙ ሁለት ወይም ከዚያ በላይ ቀለሞች መካከል ለስላሳ ሽግግር እንዲያሳዩ ያስችሉዎታል። በሦስት ዓይነቶች ይመጣሉ፦ linear-gradient (በቀጥታ መስመር)፣ radial-gradient (ከማዕከላዊ ነጥብ ወደ ውጭ)፣ እና conic-gradient (በማዕከላዊ ነጥብ ዙሪያ)። ግራዲያንቶች ለዳራዎች፣ አዝራሮች፣ ሽፋኖች እና ማስጌጫ አካላት ያገለግላሉ።
CSS ግራዲያንት ጀነሬተርን እንዴት መጠቀም እንደሚቻል
-
ከናሙናዎቹ ቅድሚያ የተዘጋጀን ምረጥ ወይም የራስዎን ግራዲያንት ያዋቅሩ።
-
የግራዲያንት አይነቱን ይምረጡ፦ linear፣ radial ወይም conic።
-
ማዕዘኑን (ለ linear/conic) ወይም ቅርፁን (ለ radial) ያስተካክሉ።
-
የቀለም ቆሚዎችን ያርትዑ — ቀለሞች እና ቦታዎችን (0–100%) ይቀይሩ።
-
እንደፈለጉ የቀለም ቆሚዎችን ይጨምሩ ወይም ያስወግዱ።
-
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 ግራዲያንት መሳሪያ