01 ቀን 04
የበይነመረብ አሳሽ የመስመሮች ቅልቅል በ CSS3 ለመፍጠር
ሊኒያድ ግራድዮች
በጣም የተለመደው የንጥል ዓይነቱ ሁለት ቀለሞች ባለ መስመራዊ ቀለም ያላቸው ናቸው. ይህ ማለት ደረጃው (ቀስ በቀስ) ቀስ በቀስ በቀይ ቀለም ወደ ሁለተኛው ቀስ ብሎ እየተቀየረ ይሆናል. በዚህ ገጽ ላይ ያለው ምስል ከ # -9-ወደ-ቀኝ (ከግራ-ወደ-ቀኝ) ቀስ በቀስ ወደ #fff (ነጭ) # 999 (ጥቁር ግራጫ) ያሳያል.
የመስመሮች ቀስ በቀስ ለመግለጥ ቀላል እና በአሳሾች ውስጥ በጣም አጋዥ ድጋፍ አላቸው. የ CSS3 የመስመር አቀራረቦች በ Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ እና Safari 4+ ላይ የተደገፉ ናቸው. ኢንተርኔት ኤክስፕሎረር ማጣሪያ በመጠቀም ማጣሪያዎችን ማከል ይችላል እና ወደ IE 5.5 ይደግፋቸዋል. ይሄ CSS3 አይደለም, ነገር ግን የአሳሽ-አሳሽ ተኳሃኝነት አማራጭ ነው.
ቀስ በቀስ ፍቃድን ሲገልጹ ብዙ የተለያዩ ነገሮችን መግለፅ አለብዎት.
- ምን አይነት ቀጭን) - ሌዘር ወይም ራዲል
- ቀስ በቀስ መጀመር ያለበት
- ቀስ በቀስ መቆም ያለበት
- በመስተካከያው ውስጥ ምን ቀለሞች ናቸው እና የት መጀመር እና ማቆም እንዳለባቸው
የሲኤስ 3 ን በመጠቀም የመስመሮች ቅኝቶችን ለመግለጽ የሚከተለውን ይጽፋሉ-
መስመራዊ-ቀስታ ( ማዕዘን ወይም የጎን ወይም ጥግ , ቀለም ማቆም , የቀለም ማቆም )
- በመጀመሪያ የስም መስመር (ቀመር) - ዘርዝሩ (ዲግሪ) ያለው የዲስትሬትድ አይነት ታረጋግጣላችሁ.
- በመቀጠልም የዲግሪዎቹን መጀመርያ እና የማቆሚያ ነጥቦች በሁለት መንገዶች ይገልፃሉ-የመደዳው አንግል ከ 0 ወደ 359 እና በ 0 ዲግሪ ቀጥታ ወደላይ የሚያመለክት. ወይም እንደግራ, ቀኝ, ግርጌ, እና አናት ያሉት በ "ጎን ወይም ማእዘን" ተግባር. እነዚህ በሚቀጥለው ገጽ ላይ በበለጠ ማብራሪያ ይሰጣቸዋል. እነዚህን ትተው ከሄዱ, ቀስታው (ቀስ በቀስ) ከላይ ወደ አሮጌው ክፍል ይፈስሳል.
- ከዛም ቀለሙ ቆም ይላል. ቀለሙ ከቀለም ቀለም እና በአማራጭ መቶኛ ይቆማል. መቶኛ በዛው መስመር መስመር ላይ የትኛው ማሰሪያ እንደሚጀምረው ወይም እንደሚጨምር ይነግረዋል. ነባሪው ቀለሙን በአንድ ላይ ቀለል አድርጎ ማስቀመጥ ነው. ስለ ገጽ 3 ቀለማት መቼት የበለጠ ይማሩ.
ስለዚህ, ከላይ ያለውን ዲግሪ በ CSS3 ለመግለጽ,
ቀጥ ያለ-ቀለም (በስተግራ, # 999999 0%, #ffffff 100%);
እና እንደ DIV ዳራ ለማዘጋጀት እንደ "
div {
የጀርባ-ምስል: ቀጥ ያለ-ቀለም (በስተግራ, # 999999 0%, #ffffff 100%;
}
የአሳሽ ቅጥያዎች የ CSS3 የመስመሮች ቅልቅል
ቀጠናው የበይነመረብ አሳሽ ለመስራት, በአብዛኛዎቹ አሳሾች የአሳሽ ቅጥያዎች እና ለ Internet Explorer 9 እና ታች ማጣሪያ (በእርግጥ 2 ማጣሪያዎች) ማጣራት ይኖርብዎታል. እነዚህ ሁሉ የዝቅተኛውን ፍቺ ለመወሰን ተመሳሳይ አንድ ነገር ይጠቀማሉ (በ IE ውስጥ ባለ 2-ቀለም ዲግሪ ብቻ ነው ከሚለው ብቻ).
የ Microsoft ማጣሪያዎች እና ቅጥያ- የበይነመረብ አሳሽ ለየት ያሉ የተለያዩ አሳሽ ስሪቶችን ለመደገፍ ሶስት የተለያዩ መስመሮችን ለመደገፍ በጣም ፈታኝ ነው. ከላይ ያለውን ግራጫን ወደ ነጭ ዲግሪ ለመመለስ;
/ * IE 5.5-7 * /
ማጣሪያ: ፕሮጂው: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "ፕሮጅዩ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (በስተ ግራ, # 999999 0%, #ffffff 100%);
የ ሞዚላ ቅጥያ -The -moz- ቅጥያው እንደ CSS3 ንብረት, ከ--moz-ቅጥያ ጋር ይሰራል. ከላይ ያለውን ቅኝት ለፋየርፎክስ ለማግኘት የሚከተለውን ይጻፉ:
-moz-linear-gradient (በስተ ግራ, # 999999 0%, #ffffff 100%);
የኦፔራ ቅጥያ-The -o-ቅጥያው ወደ ፐሮሶ 11.1+ ደረጃዎችን ያክላል. ከላይ ያለውን ዲግሪ ለማግኘት, ይፃፉ
-o-linear-gradient (በስተ ግራ, # 999999 0%, #ffffff 100%);
የ Webkit ቅጥያ -The-webkit- ቅጥያው እንደ CSS3 ንብረት ብዙ ይሰራል. ከላይ ያለውን ስሪት ለ Safari 5.1+ ወይም Chrome 10+ ለማብራራት:
-webkit-linear-gradient (በስተ ግራ, # 999999 0%, #ffffff 100%);
ከ Chrome 2+ እና Safari 4+ ጋር አብሮ የሚሰራ የድሮው የ Webkit ቅጥያ ስሪት አለ. በውስጡም የንብረቱ ስም ሳይሆን የበረዶው አይነት እንደ እሴት ነው ይገልጻሉ. በዚህ ቅጥያ አማካኝነት ግራጫውን ወደ ነጭ ዲግሪ ለመድረስ የሚከተለውን ይጻፉ:
-ዌብ-ኬንት-ቀለም (ቀመር, ግራ ከላይ, ቀኝ ከላይ, የቀለም-አቁም (0%, # 999999), የቀለም-አቁም (100%, # ffffff));
ሙሉ የ CSS3 ዘይቤ ቀለም ያለው የ CSS ኮድ
ግራጫውን ወደ ነጭ ቀለም ለመድረስ ሙሉ የመስመር አሳሽ ድጋፍ ለማግኘት ቀስ በቀስ ለመረጡት አሳሾች የመጠባበቂያ ጠንካራ ጥቁር ቀለም እና የመጨረሻው ንጥል ሙሉ ለሙሉ የተስማሙ የ CSS3 ቅጥ ነው. ስለዚህ, እንደሚከተለው ጻፉ,
በስተጀርባ: # 999999;
በስተጀርባ: -moz-linear-gradient (በስተ ግራ, # 999999 0%, #ffffff 100%);
በስተጀርባ -webkit-gradient (መስመር, ግራ ከላይ, ቀኝ ከላይ, የቀለም-አቁም (0%, # 999999), የቀለም-ማቆም (100%, # ffffff));
በስተጀርባ: -ዌብኬይት-ሌይር-ዲግሪ (በስተግራ, # 999999 0%, #ffffff 100%);
ጀርባ--የ-መስመር-ቀለም (በስተግራ, # 999999 0%, #ffffff 100%);
ጀርባ: -ms-linear-gradient (በስተ ግራ, # 999999 0%, #ffffff 100%);
ማጣሪያ: ፕሮጂው: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
ዳራ: ቀጥ ያለ-ቀራሚ (በስተ ግራ, # 999999 0%, #ffffff 100%);
በዚህ መማሪያው ውስጥ የሚገኙት ቀጣይ ገጾች የዝግሪቱን ክፍሎች በበለጠ ዝርዝር ያብራራሉ, እና የመጨረሻው ገጽ የ CSS3 ቀዳዳዎችን በራስ ሰር ለመፍጠር እጅግ በጣም ጥሩ ዘዴ ነው.
በሲኤስ ብቻ በመጠቀም ይህን የቀጥታ መስረያ በሂደት ይመልከቱ.
02 ከ 04
ሰያፍ ቀስቶችን በመፍጠር-የዲግሪድ አንግል
የመነሻ እና የማቆሚያ ነጥቦች የመንገዱን አንግል ይወስናሉ. አብዛኞቹ የመስመሮች ቀስቶች ከላይ እስከ ከታች ወይም ከግራ ወደ ቀኝ ናቸው. ነገር ግን ቀጥ ያለ መስመር ላይ የሚንቀሳቀስ ቀለም መገንባት ይቻላል. በዚህ ገጽ ላይ ያለው ምስል ከቀኝ ወደ ግራ በሚገኘው ባለ 45 ዲግሪ ማጉያ ወደ ሚቀይር ቀለል ያለ ቀስ በቀስ ያሳያል.
ቀዳዳውን መስመር የሚለዩት አንግል
አንግሉ በአባሉ መሀከል ላይ በሚገኝ ምናባዊ ክብ ላይ መስመር መስመር ነው. 0 ዲግ ይመለሳል, በስተግራ 90 ዲግግ ነጥቦች, 180 ዲጂት ወደታች, እና 270 ዲግ በጥቁር ነጥብ. ማንኛውም ማዕዘን ከ 0 እስከ 359 ዲግሪ ሊገለጹ ይችላሉ.
በካሬው ውስጥ የ 45 ዲግሪ ማእዘን ከላይ ከግራ ወደ ታች በቀኝ በኩል ይንቀሳቀሳል, ነገር ግን በአራት ማዕዘን ግርጌ, በጀርባው ላይ እና በጨረታው ላይ እንደታየው የጀርባው እና የመጨረሻዎቹ ነጥቦች ከቅርጹ ትንሽ ከፍለው ይገኛሉ.
ስፋት ያለው ዲግሪን ለመግለፅ በጣም የተለመደው መንገድ እንደ ከላይ የላይኛው ቀኝ እና ጥግ ቀስ ማለት ከጎን ወደ ጠፍ ማዕዘን ይወጣል. የመጀመሪያውን ልጥፍ በሚከተሉት ቁልፍ ቃላት መግለጽ ይችላሉ:
- ከላይ
- ቀኝ
- ታች
- ግራ
- ማዕከላዊ
እንዲሁም ይበልጥ ዝርዝር ነገሮችን ለማድረግ ሊጣመሩ ይችላሉ, ለምሳሌ:
- የላይኛው ቀኝ
- ከላይ በስተግራ
- የላይኛው ማዕከል
- ከታች በስተቀኝ
- ከታች ግራ
- የታችኛው ማዕከል
- ቀኝ
- ግራ ማእከል
ከዚህ በታች ከተቀመጠው ጋር ተመሳሳይነት ያለው ሲዲ (CSS) ይህ ነው, ከቀይ ወደ ግራ ከታች ወደ ላይ ከታች ወደ ቀይ ወደ ነጭ:
ዳራ: ## 901A1C;
የጀርባ-ምስል--ሞዝ-ሰረዝ-ቀለም (በቀኝ ከላይ, # 901A1C 0%, # ከ FFFFFF 100%);
የጀርባ-ምስል--webkit-gradient (መስመር, ቀኝ ከላይ, የግራ ታች, የቀለም-አቁም (0, # 901A1C), የቀለም-አቁም (1, #FFFFFF));
በስተጀርባ: -webkit-linear-gradient (በቀኝ ከላይ, # 901A1C 0%, #ffffff 100%);
በስተጀርባ: -o-linear-gradient (በቀኝ ከላይ, # 901A1C 0%, #ffffff 100%);
ጀርባ: -ms-linear-gradient (በቀኝ ከላይ, # 901A1C 0%, #ffffff 100%);
የጀርባ-ቀዋሚ-ቀለም (በስተቀኝ ከላይ, # 901A1C 0%, #ffffff 100%);
በዚህ ምሳሌ ውስጥ ምንም የ IE ማጣሪያዎች እንደሌሉ አስተውለዋል. ይሄ IE ሁለት ዓይነት ማጣሪያዎችን ብቻ የሚፈቅደው ነው: ከላይ ወደ ታች (ነባሪ) እና ከግራ ወደ ቀኝ (በ GradientType = 1 መቀየሩ).
ብቻ የሲኤስሲን በመጠቀም ይህ ሰያፍ መስመሮች ቀስ በቀስ በተግባር ላይ ይሁኑ.
03/04
የቀለም ማቆም
በ CSS3 መስመሮች ቀስ በቀስ, እንኳን ዘመናዊ ውጤቶችን ለመፍጠር በደረጃዎ ላይ ብዙ ቀለማት ማከል ይችላሉ. እነዚህን ቀለማት ለማከል, በንብረቶችዎ መጨረሻ, በነጠላ ሰረዝ በመለየት ተጨማሪ ቀለሞችን ያክሉ. እንዲሁም ቀለሞቹን መጀመር ወይም ማቆም እንዳለበት መስመር መስመር ላይ ማካተት ይኖርብዎታል.
ኢንተርኔት ኤክስፕሎረር ማጣሪያ ሁለት ቀለም ማቆሚያዎችን ብቻ ይደግፋል, ስለዚህ ይህንን ቀለምን ሲገነቡ ማሳየት የሚፈልጉትን የመጀመሪያ እና ሁለተኛ ቀለሞች ብቻ ማካተት ይገባዎታል.
ከላይ ላለው 3-ቀለም ዲግሪ (ሲኤስኤስ) እነሆ:
ጀርባ: #ffffff;
የጀርባ--ሞዝ-ሌ-ቀለም (በስተግራ, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
በስተጀርባ: -ዌብካይት-ቀለም (ቀዛፊ, ግራ ከላይ, ቀኝ ከላይ, የቀለም-አቁም (0%, # ffffff), የቀለም-አቁም (51%, # 901A1C), ቀለም-ማቆም (100%, # ffffff));
ጀርባ: -webkit-linear-gradient (በስተ ግራ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
በስተጀርባ: -o-linear-gradient (በስተ ግራ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ጀርባ: -ms-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
በስተጀርባ: የመስመር-ቀደም-አልጋ (በስተ ግራ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ሲኤስኤስ በመጠቀም በሂደት ላይ ባለ ሶስት የቀለም ማቆሚያዎችን ይመልከቱ ይህን መስመራዊ ቀስ በቀስ ይመልከቱ.
04/04
የግንባታ ቀስቶችን ቀለል ይበሉ
እዚያው ለእያንዳንዳቸው ጥቅማጥቅሞችን እና መሰናክሎችን ለመገንባት እንዲረዱዎ የምመክሩት ሁለት ቦታዎች አሉ, እስካሁን ድረስ ሁሉንም ነገር የሚያደርግ ቀስ በቀስ ገንቢ ዲግሪ አላገኘሁም.
የመጨረሻ የሲ ኤስ ኤስ ግራድዲ ጀነሬተር
እንደ ፍሮንስፕ በሚገኙ መርሃግብሮች ውስጥ ከሚታዩ ቀስቃሽ ሠሪዎች ጋር ተመሳሳይ ተመሳሳይነት ያለው ይህ ቀስቃሽ ፈጣሪያ በጣም ተወዳጅ ነው. እኔ ደግሞ እዚያው Webkit እና Mozilla ብቻ ሳይሆን ሁሉንም የ CSS ቅጥያዎች ይሰጥዎታል. በዚህ ጄነሬተር ላይ ያለው ችግር የሚዳግረው አግድም እና ቀጥታ ቀስ በቀስ ብቻ ነው. ግራጫ ቀለም ያላቸውን መስመሮች ማድረግ ከፈለጉ, እኔ ወደ ሌላው ላከለው ሌላ ጄነሬተር መሄድ አለብዎት.
የ CSS3 ግራድዲየር ጀነሬተር
ይህ ጄነር ከመጀመሪያው ለመገንዘብ ትንሽ ረዘም ያለ ጊዜ ወስዶት ነበር, ነገር ግን አቅጣጫውን ወደ ግራ በኩል ለመለወጥ ይደግፋል.
እርስዎ ከሚወዷቸው የሲ ኤም ዲዲዲ ጀነሬሽን የሚያውቁ ከሆነ, እባክዎ ያሳውቁን .