የሲ.ሲ.ቲ. ሽግግሮች አዳዲስ ቅጣትን መፍታት ይፍጠሩ
የዌብ ዲዛይነሮች የሲስተን 3 ሲሰቅሉ በሚፈልጓቸው ገፆች ላይ ተጨማሪ ቁጥጥር ይፈልጋሉ. በ CSS3 ውስጥ የተካተቱት አዳዲስ ቅጦች የድር ባለሙያዎች ለገጽዎቻቸው Photoshop-like ተጽዕኖዎችን የመጨመር ችሎታ አላቸው. ይህም እንደ ማራዘሚያ ጥላዎች እና ቀስቶች , ዙሪያውን ጠርዞችን እና ተጨማሪ ነገሮችን ያካትታል. CSS3 በጣቢያዎች ላይ ጥሩ መስተጋብር ለመፍጠር ሊያገለግሉ የሚችሉ እነማን እነዛን ተፅእኖ ያመጣሉ.
በድረ-ገጽዎ ውስጥ CSS3 ን በመጠቀም ወደ አባል ክፍሎች ውስጥ ማከል የሚችሉት አንድ እጅግ በጣም ጥሩ የሆነ ገጽታ ለክፍለ- ግይነትና ለሽግግሩ ጥራትን በመጠቀም ድብልቅን ወደ ውስጥ እና ወደ ታች እንዲገባ ማድረግ ነው. ይህ በአንድ ጣቢያ ላይ የሚያንዣብብ አንድ ነገር ሲያደርግ በአንድ ገጽ ላይ የጎብኚዎችን አንድ ነገር ሲያደርግ ገፆችዎ የበለጠ በይነተገናኝ እንዲፈጥሩበት ቀላል እና የተደገፈ መንገድ ነው.
ይህንን በድረ-ገፆችዎ ላይ ለሚገኙ የተለያዩ ክፍሎችን ይህን የመስተጋብራዊ ተፅእኖ ለማከል ምን ያህል ቀላል እንደሆነ እንመልከታቸው.
በማንዣበብ ላይ የአሳፍ ለውጥን እናጣር
አንድ ደንበኛ በዚያ ኤሌመንት ላይ ሲያሽከረክር የአንድ ምስል ብርሃንነት እንዴት እንደሚቀይሩ በመመልከት እንጀምራለን. ለዚህ ምሳሌ (ኤች ቲ ኤም ኤል ከታች ታይቷል) እኔ ከግሪ-ዲደር የክፍፍ መገለጫ ባህሪ ጋር እየተጠቀምኩኝ ነው.
እንዲለሰል ለማድረግ, የሚከተለው የቅጥ ደንቦችን ለ CSS ቅርጸ ቁምፊችን እናክላቸዋለን:
.greydout {
-webkit-opacity: 0.25;
-ሞጽ-ብርሃን-አክል: 0.25;
ብርሃን-ከል-0.25;
}
እነዚህ የማጋለጫ ቅንጅቶች ወደ 25% ይተረጉማሉ. ይህ ማለት ምስሉ ትክክለኛውን የግልጽነት አንድ ግማሽ ሆኖ ይታያል ማለት ነው. ሙሉ በሙሉ ግልጽ ባልሆነ ግልጽነት 100% ሲሆን 0% ሙሉ በሙሉ ግልጽ ይሆናል.
በመቀጠልም, ምስሉ በላዩ ላይ ሲከፈት ምስሉን (ወይም በበለጠ በትክክል ሙሉ በሙሉ እንዲዳሰስ) እንዲሆን ለማድረግ የሚከተለውን ያካትቱ: የሁኔታ ደብዛዛ-ዘንግ -
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
ብርሃን-አልባነት: 1;
}
እነኚህ ምሳሌዎች, ለእነዚያ አሳሾች የቆየ ስሪቶች ኋላ አቻ መሆኑን ለማረጋገጥ, የአንድን ደንበኛ ቅድመ ቅጥያ ስሪቶች እጠቀማለሁ. ይህ ጥሩ ልምምድ ቢሆንም, እውነታው ግን የደጋግሞቹን ደንብ አሁን በአሳሽዎች በሚገባ የተደገፈ ነው, እና እነዚያን ቀዳዳዎች ቅድመ ቅጥያ መስመሮችን ለመጣል በጣም ጥሩ ነው. ሆኖም ግን, ለአሮጌ የአሳሽ ስሪቶች ድጋፍ መቀበል ከፈለጉ እነዚህን ቅድመ-ቅጥሮች ለማካተት ምንም ምክንያት የለም. መግለጫውን ከተለመደው መደበኛ, ቅድመ-ቅጣቱ የአፈፃፀም ስሪት ጋር ማብቃቱን ተቀባይነት ያለው ጥሩ ልምድ መከተልዎን እርግጠኛ ይሁኑ.
ይህንን በጣቢያው ላይ ካሰራጩት, ይህ የብርሃን ማስተካከያ በጣም አስቸኳይ ለውጥ ነው. በመጀመሪያ ግራጫ ነው, ከዚያ ግን በእነዚያ በሁለቱ መካከል የጊዜ ገደብ የለም. እንደ ብርሃን ማብሪያ - አብራ ወይም ጠፍቷል. ይህ ምናልባት እርስዎ የፈለጉትን ሊሆኑ ይችላሉ, ነገር ግን ቀስ በቀስ በተለወጠ ለውጥ ላይ ሙከራ ማድረግ ሊፈልጉ ይችላሉ.
በጣም ጥሩ ውጤት ለማከል እና ይሄንን ቀስ በቀስ ለማደለብ, የሽግግር ንብረትን ወደ .greydout ክፍል ማከል ይፈልጋሉ:
.greydout {
-webkit-opacity: 0.25;
-ሞጽ-ብርሃን-አክል: 0.25;
ብርሃን-ከል-0.25;
-ዌብ-ኪት-ሽግግር-ሁሉም 3 መረጋጋት;
-ሞዝ-ሽግግር-ሁሉም ሶስቶች ቀላል ናቸው;
-ms-transition: ሁሉም 3 ዎች ቀላል ናቸው;
-ኦ-ሽግግር ሁሉም ሶስቶች ቀላል ናቸው;
ሽግግር ሁሉም ሶስቶች ቀላል ናቸው.
}
በዚህ ኮድ, ለውጡ በድንገት ከመቀየር ይልቅ ቀስ በቀስ የሚተላለፍ ይሆናል.
አንዴ በድጋሚ ከዚህ ቀደም ቅድመ ቅጥያ ያላቸው በርካታ ደጋፊዎች እንጠቀማለን. ሽግግር ምንም እንኳን እንደ ብርሃን-አልባ አይደገፍም, ስለዚህ እነዚህ ቅድመ ቅጥያዎች ትርጉም የሚሰጡ ናቸው.
እነዚህን ግንኙነቶች በሚያቅዱበት ጊዜ ማስታወስ ያለብዎት አንድ ነገር ቢኖር የማሳያ ማያ ገጽ መሣሪያዎች "አንዣብቦ" አንቀበልም ብለው ስለሚያስቡ እነዚህ ተፅእኖዎች እንደ ተንቀሳቃሽ ስልክ እንደ ማይክሮ ሴንዲያ ያሉ ማይ ሴሎችን የሚጠቀሙ ናቸው. ብዙውን ጊዜ ሽግግሮቹ ይከሰታሉ, ነገር ግን በጣም ፈጣን በመሆኑ በፍፁም ሊታዩ አይችሉም. ያንን እንደ መልካም የቅናሽ ውጤት ሲያክሉ ቢያደርጉት ጥሩ ቢሆንም, ግን ለሚገባው ይዘት ሊታዩ የሚያስፈልገውን ማንኛውንም ለውጦች ያስወግዱ.
ጭራቅ ማውጣት ይቻላል
በዝሙጥ ምስል መጀመር የለብዎትም, ከሸሽት ምስሉ ላይ ሽግግሮችን እና የብርሃን ድግግሞሽ እንዲጠቀሙ ይጠቀማሉ. ተመሳሳዩን ምስል በመጠቀም, ከጥፋቱ ክፍል ጋር ብቻ:
class = "infadeout">
ልክ እንደ በፊት, የ "ድባብ" በመጠቀም: "ማደጊያው መራጭ"
.withfadeout {
-ዌብ-ኪት-ሽግግር ሁሉም የሁለት-ሰከንዶች ርቀት;
-moz-ሽግግር-ሁሉም የሁሉንም ውስጣዊ ውጣ ውረድ;
-ms-transition: ሁሉም 2-እሽግ-ውጭ;
-ኦ-ሽግግር ሁሉም የሁሉንም ውስጣዊ ውጣ ውረድ;
ሽግግር ሁሉም የ 2 ዎች እቃዎች ውስጣዊ ናቸው.
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-ሞጽ-ብርሃን-አክል: 0.25;
ብርሃን-ከል-0.25;
}
በዚህ ምሳሌ, ምስሉ ሙሉ በሙሉ ግልጽ ወደ ተለወጠው ይለወጥ - የመጀመሪያ ምሳሌዎቻችን ተለዋዋጭ ነው.
ከምስሎች በላይ መሄድ
እነዚህን ምስላዊ ሽግግሮች መተግበር እና ምስሎች ላይ ማደብለቁ ጥሩ ነው, ነገር ግን በእነዚህ የሲ ኤስ ኤስ ተጽእኖዎች ብቻ ምስሎችን ብቻ በመጠቀም ላይ ብቻ የተወሰነ አይደለም. ሲነበብ እና ሲያያዝ በ CSS-የተዋቀሩ አዝራሮችን በቀላሉ ማቃለል ይችላሉ. የሚጠቀመው የ "ድባብ" (ቻርጅ) በ
ሲጎበኙ ወይም ጠቅ ሲያደርጉ ማንኛውም የቪድዮ ክፍል እንዲደበዝዝ ማድረግ ይቻላል. በዚህ ምሳሌ ላይ መዳሱ ሲያርፍ የቃሉን እና የፅሁፍ ቀለሙን መቀየር እፈልጋለሁ. እዚህ CSS ነው.
#myDiv {
ወርድ: 280px;
የዳራ-ቀለም-# 557A47;
ቀለም: #dfdfdf;
ድብድብ: 10px;
-ዌብ-ኪት-ሽግግር: ሁሉም 4 ዎችን ነጻ መውጫ 0 ቶች;
-ሞዝ-ሽግግር: ሁሉም 4 ቱን ታች 0 ቶች;
-ስ-ሽግግር: ሁሉም 4 ቱን ታጋሽ 0 ቶች;
-o-ሽግግር: ሁሉም 4 ቱን ታች 0s;
ሽግግር ሁሉም የ 4 ዎችን ነጻ መውጣት 0 ቶች;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-ሞጽ-ብርሃን-አክል: 0.25;
ብርሃን-ከል-0.25;
ቀለም # 000;
}
የዝውውር ምናሌዎች ከቀላለ ዳራ ቀለሞች ይጠቀማሉ
በዚህ ቀላል የማውጫ ምናሌ ላይ በማውጫ ዝርዝሮች ላይ በምናነሳበት ጊዜ የጀርባው ቀለም ወደ ውስጥ እና ዘግይቶ ይጠፋል. እዚህ HTML ነው:
- ቤት
- የ CSS3 አጋዥ ሥልጠናዎች
- CSS3 ባህሪያቶች
እና እዚህ CSS ነው.
ul # ናሙና {ዝርዝር-ቅጥ: ምንም; }
ኡል # ናሙናአንቪ {
ማሳያ: መስመር ውስጥ;
ተንሳፈው: ግራ;
ሽፋን: 5 ፒክስ 15 ፒክስል;
ኅዳግ: 0 5px;
-ዌብ-ኪት-ሽግግር-ሁሉም የ 2 ዎቹ ተራሮች;
-ሞዝ-ሽግግር: ሁሉም 2 ሠንጠረዥ;
-ms-ሽግግር: ሁሉም 2 ሠንጠረዥ;
-ኦ-ሽግግር: ሁሉም 2 ሠንጠረዥ;
ሽግግር: ሁሉም 2s መስመሮች;
}
ኡል # ናሙናአይቪ {text-decoration: none; }
ኡል # ናሙናይቭ: ማረፊያ {
የዳራ-ቀለም-# DAF197;
}
የአሳሽ ድጋፍ
ቀደም ብሎ ጥቂት ጊዜያት ስነካ እነዛን ስፖርቶች በጣም ጥሩ የአሳሽ ድጋፍ አላቸው, ስለዚህ ያለ ምንም ፍራቻ በነፃነት ለመጠቀም ሊሰማዎ ይገባል. የዚህ አይነቱ ልዩነት በጣም የበዙ የ Internet Explorer ስሪቶች ናቸው, ነገር ግን የሶፍትዌሩ ከ 11 ዓመት በታች ለሆኑ ሁሉም የ IE ስዕሎች ድጋፍን ለማቆም ከቅርብ ጊዜዎቹ ውሳኔዎች, እነዚህ የቆዩ ማሰሻዎች ከጉዳዩ ያነሰ እና እየቀነሰ እየመጣ ነው - እና በእውነተኛ መልኩ, አሮጌ አሳሽ ካልመጣ ይህንን የቀዘቀዘ ሽግግር ተመልከት, ዋነኛው ችግር መሆን የለበትም. እነዚህን አይነት ተጽዕኖዎች አስደሳች በሆኑ ግንኙነቶች እስክታስገቡ እና ለእነሱ ተግባራዊ ለማድረግ ወይም ቁልፍ ይዘትን ለመግለፅ በእነሱ ላይ እስካልተቀመጡ ድረስ, ተጽዕኖውን የማይደግፉ የቆዩ አሳሾች ዝቅተኛ ተሞክሮ ያገኛሉ, ነገር ግን በእነዚያ አሳሾች ላይ ያሉ ተጠቃሚዎች እንኳ ልዩነቱን ይወቁ, በተለይም ጣቢያውን እንደ መደበኛ አድርገው መጠቀም እና የሚፈልጉትን መረጃ ማግኘት ከቻሉ.
ተጨማሪ ትርዒት; ሁለት ምስሎችን ቀያይር
አንድ ምስል ወደ ሌላ እንዴት መቀነስ እንደሚቻል እዚህ ምሳሌ ይኸውና. ኤች.ቲ.ኤም.ኤል ተጠቀም
እና አንድ ሙሉ ፍፁም ግልጽ ሲያደርግ እና ሁለቱም ሙሉ ለሙሉ ያልተቃለሉ ሲሆኑ የሽግግሩ ሁለቱንም ይለዋወጣል:
.swapMe img {-webkit-transition-all-ease-in-out; -moz-transition (የውስጠ-መስመር) ሁሉም-ሁሉም-ቀላል-ግልገል; -ም-ሽግግር - ሁሉም-1s ውስጣዊ-ምልልስ; -ኦ-ሽግግር ሁሉም የዋጋ ቅናሾች ናቸው. ሽግግር ሁሉም የ 1 ዎች ውስጣዊ ውጣ ውረድ; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; ብርሃን-አልባነት: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; ድነት: 0; }