መእተዊ ን CSS Background Blur ኣብ CSS ድብዝዝ ድሕረ ባይታ ጽልዋ ምፍጣር ከምዚ ቀሊል ኮይኑ ኣይፈልጥን። ብሓደ መስመር ኮድ ጥራይ፡ ንተመኩሮ ተጠቃሚን ስነ-ጽባቐ ዲዛይንን ዘዕብዩ ሞያዊ ዝመስል ስእላዊ ጽልዋታት ክትረክብ ትኽእል። እዚ ሜላ እዚ ብፍላይ ንሞዳል መስኮታት፣ ምስሊ ምድብላቕን ዘመናዊ መርበብ ሓበሬታ መተሓላለፍቲን ጠቓሚ ኮይኑ ኣብኡ ድማ ንፍሉይ ትሕዝቶ ኣቓልቦ ክትስሕብ ኣብ እትደልየሉ ኮይኑ ነቲ ድሕረ ባይታ ብስዉር መንገዲ ከተጉልሕ ኢኻ።
እቲ ምስጢር ኣብቲ ናይ CSS backdrop-filter property እዩ ዝርከብ፣ እዚ ድማ ኣብቲ ብድሕሪ ሓደ ባእታ ዘሎ ከባቢ ስእላዊ ጽልዋታት ይትግብር። እዚ ሓያል ናይ CSS ባህሪ፡ ንደቨሎፐራት ብዘይ ዝተሓላለኸ ጃቫስክሪፕት ወይ ተወሳኺ ምስሊ ኣርትዖት ዘደንጹ ስእላዊ ጽልዋታት ክፈጥሩ የኽእሎም። ኣብ ፖርትፎሊዮ ዌብሳይት፡ ኢ-ኮሜርስ ፕላትፎርም፡ ወይ ዌብ ኣፕሊኬሽን ትሰርሕ ትኹን፡ ነዚ ሜላ ምምላኽ ንዓቕሚ ዲዛይንካ ልዕል ከብሎ እዩ።
ከመይ ጌርና Background Blur ብሓደ መስመር ኮድ ነተግብር እቲ ስሕበት በዚ ቀሊል ኣዋጅ CSS እዩ ዝፍጸም፤
ድሕረ ባይታ-መጽረዪ: ድብዝዝ (5px);
እዚ ንጽል መስመር ኮድ ኣብቲ ብድሕሪ ባእታኻ ዘሎ ድሕረ ባይታ ትሕዝቶ ጋውስያዊ ድብዝዝ ጽልዋ ይገብር። ኣብ ውሽጢ እቲ ናይ ምድብዛዝ ተግባር ዘሎ ዋጋ (5px ኣብዚ ኣብነት) ንጽዓት ናይቲ ምድብዛዝ ጽልዋ ይውስን። ነዚ ዋጋ እዚ ካብ ረቂቕ ምልስላስ ክሳብ ኣዝዩ ድብዝዝ ዝበለ ድሕረ ባይታ ዝኾነ ነገር ንምዕዋት ከተመዓራርዮ ትኽእል ኢኻ።
መሰረታዊ ኣተገባብራ ኣብነት ከመይ ጌርና ድሕረ ባይታ ድብዝዝ ኣብ ሞዳል ምድብላቕ ከም እነተግብር ዘርኢ ምሉእ ኣብነት ኣብዚ ኣሎ፤
.ሞዳል-ድርብ { . መርገጺ: ጽኑዕ፤ ላዕሊ: 0፤ ጸጋም፡ 0፤ ስፍሓት: 100%፤ ቁመት: 100%፤ ድሕረ ባይታ-ሕብሪ: rgba (0, 0, 0, 0.5); ድሕረ ባይታ-መጽረዪ: ድብዝዝ (5px); }
እዚ ኮድ እዚ ኣብቲ መሰረታዊ ትሕዝቶ ዝተተግበረ 5 ፒክሰል ድብዝዝ ጽልዋ ዘለዎ ፍርቂ ግሉጽ ምድብላቕ ይፈጥር። እቲ rgba ድሕረ ባይታ ሕብሪ ነቲ ጸሊም ምድብላቕ ይህብ ኣብ ርእሲኡ ድማ እቲ ድብዝዝ ትሕዝቶ ብእኡ ኣቢሉ ክረአ የፍቅድ።
ምዕቡል ሜላታት ምድብዛዝን ምምዕርራይን እቲ መሰረታዊ ድብዝዝ ጽልዋ ሓያል እኳ እንተኾነ፡ ምስ ድሌታት ዲዛይንካ ዝሰማማዕ ዝያዳ ክትቅይሮ ትኽእል ኢኻ። እቲ ድሕረ ባይታ-መጽረዪ ባህሪ ንዝያዳ ዝተሓላለኸ ውጽኢት ክውሃሃዱ ዝኽእሉ ብዙሓት ናይ ምፍታሕ ተግባራት ይድግፍ።
ምውህሃድ ብዙሕ ጽልዋታት ፍልተር ዝተራቐቐ ስእላዊ ጽልዋታት ንምፍጣር ብዙሓት ናይ ፍልተር ተግባራት ብሓባር ብሰንሰለት ክትሰርሕ ትኽእል ኢኻ፤
ድሕረ ባይታ-መጽረዪ: ድብዝዝ (10px) ድምቀት (0.8); - ድብዝዝ ይውስኽን ድሕረ ባይታ የጸልምቶን። ድሕረ ባይታ-መጽረዪ: ድብዝዝ(5px) ምጽጋብ(150%); - ድብዝዝ ይገብርን ምጽጋብ ሕብሪ ይውስኽን። ድሕረ ባይታ-መጽረዪ: ድብዝዝ(8px) ግራጭ(50%); - ድብዝዝ ምስ ከፊላዊ ግራይስኬል ውጽኢት የወሃህድ
እዞም ውህደታት እዚኦም፡ ትኹረት ትሕዝቶን ተሳትፎ ተጠቀምትን ዘዕብዩ ፍሉያት ስእላዊ ተመኩሮታት ክትፈጥር የኽእሉኻ። ንዲዛይንካ ፍጹም ሚዛን ንምርካብ ዝተፈላለዩ ክብርታት ፈትን።
ናይ መርበብ ሓበሬታ ምትእስሳር ኣብ ግምት ዘእተወ backdrop-filter ኣብ መብዛሕትኦም ዘመናውያን ዳህሰስቲ ዝድገፍ እኳ እንተኾነ፡ ንኣረጊት ዳህሰስቲ ንድሕሪት ምምላስ ግን ኣገዳሲ እዩ። ድልዱል ኣገባብ ኣተገባብራ ኣብዚ ኣሎ፤
.ሞዳል-ድርብ { . ድሕረ ባይታ-ሕብሪ: rgba (0, 0, 0, 0.7); /* Fallback ናይ ቀደም ዳህሰስቲ */ }
@supports (ድሕረ ባይታ-መጽረዪ: ድብዝዝ (5px)) { .ሞዳል-ድርብ { . ድሕረ ባይታ-ሕብሪ: rgba (0, 0, 0, 0.5); ድሕረ ባይታ-መጽረዪ: ድብዝዝ (5px); } }
እዚ ገስጋሲ ዝኾነ ናይ ምዕባይ ኣገባብ ዲዛይንካ ኣብ ኩሎም ዳህሰስቲ ከም ዝሰርሕ የረጋግጽ ኣብ ርእሲኡ ድማ ንዘመናዊ ዳህሰስቲ ዝተማዕበለ ስእላዊ ጽልዋታት ይህብ።
ግብራዊ ኣተገባብራን ኣጠቓቕማን ድሕረ ባይታ ምድብዛዝ ጽልዋታት ኣብ ዘመናዊ ዲዛይን መርበብ ሓበሬታ ብዙሕ ግብራዊ ኣተገባብራታት ኣለዎ። ገለ ካብቶም ኣዝዮም ውጽኢታውያን ዝኾኑ ናይ ኣጠቓቕማ ኣጋጣሚታት እዞም ዝስዕቡ እዮም፤
ሞዳል ዊንዶውስን ዲያሎግ ቦክስን ድሕረ ባይታ ምድብዛዝ ንሞዳል መስኮታት ፍጹም እዩ ኣብኡ ኣቓልቦ ተጠቃሚ ኣብ ትሕዝቶ ዝርርብ ከተተኩር ትደሊ። እቲ ድብዝዝ ዝበለ ድሕረ ባይታ ንናይ ምርኣይ ምጽባብ ይቕንሶን ንጹር ስእላዊ ስርዓተ-መሰረት ይፈጥርን። እዚ ሜላ ኣብ መእተዊ ቅጥዕታት፡ ናይ ምርግጋጽ ዝርርባትን ናይ መፍለጢ መልእኽትታትን ብሰፊሑ ይጥቀመሉ።
ምስሊ ጋለሪታትን ፖርትፎሊዮ ሳይታትን ተጠቀምቲ ኣብ ንኣሽቱ ምስልታት ክጥውቑ ከለዉ፡ ኣብ ትሕዝቶ ቀንዲ ገጽ ድሕረ ባይታ ምድብዛዝ ምትግባር ነቲ ዝዓበየ ምስሊ ፍሉይ ክኸውን ይሕግዞ። እዚ ኣገባብ ብፍላይ ኣብ ፖርትፎሊዮታት ስእሊ፡ ጋለሪታት ፍርያት፡ ከምኡ’ውን ስእላዊ ትኹረት ወሳኒ ኣብ ዝኾነሉ ምርኢት ስነ-ጥበባዊ ስርሓት ውጽኢታዊ እዩ።
ናይ ምድህሳስ ዝርዝርን ጎናዊ ባርን ዘመናዊ ናይ ሞባይል መተግበሪታትን መርበባት ሓበሬታን መብዛሕትኡ ግዜ ንዝንቀሳቐሱ ናይ ምድህሳስ ምልክታታት ድሕረ ባይታ ድብዝዝ ይጥቀሙ። እቲ ዝርዝር መግቢ እናተሰሓበ ምስ ከደ፡ እቲ ቀንዲ ትሕዝቶ ኣብ ድሕሪት ብዝተረቐቐ መንገዲ ይደብዝዝ፡ እዚ ድማ ዝተራቐቐ ንጣር ውጽኢት ይፈጥር። እዚ ሜላ እዚ ንሞባይል ናቪጌሽን ፓተርንን ሕቡእ ጎድናዊ ባርን ጽቡቕ ይሰርሕ።
ኣብ ግምት ዘእተወ ኣፈፃፅማን ብሉፃት ኣሰራርሓታትን ድሕረ ባይታ-ፍልተር ሓያል እኳ እንተኾነ፡ ምቹእ ኣፈጻጽማ ንምዕቃብ ብብልሓት ምጥቃም ኣገዳሲ እዩ። ቁልፊ ኣብ ግምት ዝኣትዉ ነገራት እዞም ዝስዕቡ እዮም፤
ብውሑድ መጠን ምጥቃም፦ ናይ ምድብዛዝ ጽልዋታት ኣብ ጥራይ ምጥቃምንኣፈጻጽማ ምውቃዕ ንምክልኻል ኣድለይቲ ባእታታት ኣብ ሞባይል ፈተነ፦ ገለ ሞባይል መሳርሒታት ከቢድ ድብዝዝ ጽልዋ ዘለዎም ናይ ኣፈጻጽማ ጸገማት ከጋጥሞም ይኽእል። ኣማራጺታት ሕሰብ፦ ንስታቲክ ድሕረ ባይታታት፡ ቅድሚ ሕጂ ዝተደብዘዙ ምስልታት ዝያዳ ውጽኢታዊ ክኾኑ ይኽእሉ ገስጋሲ ምዕባይ፦ ኩሉ ግዜ ነቲ ባህሪ ዘይድግፉ ዳህሰስቲ ውድቀት ምሃብ
ኣብ ቀረባ እዋን ኣብ ኢንዱስትሪ ዝተራእየ ምዕባለታት፡ ስእላዊ ጽልዋታት ብኸመይ ይቕጽሉ ከምዘለዉ ዘርኢ እዩ። ንኣብነት፡ ዙክስ ኣብዚ ዓመት ኣብ ቬጋስ ኣብ ዝርከብ ኣፕ ኡበር ሮቦታክሲስ ከቐምጦ መደብ ኣለዎ፡ እዚ ድማ ምህዞታት መተሓላለፊ ተጠቃሚ ከመይ ጌሮም ሰፊሕ ቴክኖሎጂካዊ ምቕባል ይድርኹ ከምዘለዉ ዘርኢ እዩ።
መደምደምታን ቀጻሊ ስጉምትታትን CSS background blur ብbackdrop-filter property ምልማድ መሳጢ ናይ ዲዛይን ተኽእሎታት ይኸፍት። እዚ ሓደ መስመር ዘለዎ መፍትሒ ንተመኩሮ ተጠቃሚ ዘዕብዩን ንናይ መርበብ ሓበሬታ መተሓላለፍቲኻ ዘመናዊ ዝገብሩን ሞያዊ ስእላዊ ጽልዋታት ይህብ። ቅኑዕ ኣፈጻጽማ ንምርግጋጽ ኣብ መላእ መርበብ ሓበሬታን መሳርሕታትን ምፍታን ኣይትረስዕ።
ምዕቡላት ሜላታት ሲኤስኤስ ክትድህስስ ከለኻ፡ ዝቕልቀሉ ዘለዉ ቴክኖሎጂታት ንዲዛይን መርበብ ሓበሬታ ብኸመይ ክጸልዉ ከም ዝኽእሉ ኣብ ግምት ኣእቱ። ኣብ ስእላዊ ቴክኖሎጂ ዘሎ ውድድር ብርቱዕ እዩ፡ ከምቲ ኣብ ሓላፊ ርእሰ-ምምሕዳር ምዝዋር Nvidia ብዛዕባ ንዋይሞን ተስላን ንምስዓር ዝሓሰቦ መደብ ክኸፍት ዝረአ። ብተመሳሳሊ፡ ዓለማዊ ፍጻመታት ኣብ ምቕባል ቴክኖሎጂ ጽልዋ ከሕድር ይኽእል እዩ፡ ልክዕ ከምቲ ትራምፕ ኣብ ልዕሊ ኢራን ዝገበሮ ኲናት ንሚልዮን ነፈርቲ ዝዓጸወሉን ነቲ ኣብ ወሽመጥ ዓረብ ዝፈትዎ መጻወቲ ቦታ ኣብ ህውከት ዝተጸልወ ቴክኖሎጂ ጉዕዞ ከምዘጥሕሎን እዩ።
ኣብ ፕሮጀክትታትካ ዘደንጹ ስእላዊ ጽልዋታት ንምትግባር ድሉው ዲኻ? ሎሚ ብbackdrop-filter ምፍታን ጀምር እሞ ሓደ መስመር ኮድ ከመይ ጌሩ ንዲዛይናትካ ክቕይሮ ከም ዝኽእል ርአ። ንዝማዕበሉ ባህርያት CSS ብዘይ ገለ ጸገም ንምትግባር፡ ንዋሕዚ ስራሕ ምዕባለኻ ንምምሕያሽን ሞያዊ ውጽኢት ብቕልጡፍ ንምዕዋትን Seemless ምጥቃም ኣብ ግምት ኣእቱ።
