අවධාරණය කිරීම සඳහා වෙබ් පිටුවක ග්ලැඩිව එක් කරන්න
ඔබේ වෙබ් පිටුවෙහි මූලද්රව්යයකට එකතු කරන මෘදු පිටත දීප්තිමත් ආලෝකයක් නරඹන්නාට නැගී සිටීමට හේතු වේ. වැදගත් වස්තුවක බාහිර කවච වටා අඳුරු ආලේප කිරීම සඳහා CSS3 සහ HTML භාවිතා කරන්න. මෙම ප්රයෝගය Photoshop හි ඇති වස්තුවකට බාහිර පෙනුමකට සමාන වේ.
මුලින්ම ගිනිකෙලට මූලද්රව්යයක් සාදන්න
ඕනෑම වර්ණ පසුබිමක දී වර්ණ ආවරණ සිදු කළ හැකි වුවද, අඳුරු පසුබිම් වලදී වඩාත් හොඳ පෙනුම ඇතිවේ. මෙම වටකුරු කෝණයක සෘජුකෝණාස්රාකාර පෙට්ටියෙහි උදාහරණයක් ලෙස, DIV මූලද්රව්යය කළු පැහැති පසුබිමක් සහිත වෙනත් DIV මූලද්රව්යයක තැන්පත් කර ඇත. පිටත DIV අඳුරු කිරීම සඳහා අවශ්ය නොවේ. නමුත් එය සුදු පැහැති පසුබිමක දැකිය නොහැකි ය.
DIV පංතියේ පන්තියට දෙන්න:
මූලද්රව්යයේ ප්රමාණය සහ වර්ණය සකසන්න
ඔබ අඳුරු ආලේප කිරීමට සැරසෙන පසු, ඔබ ඉදිරියට යාමට අවශ්ය නම්, ඔබට පසුබිම් වර්ණය, ප්රමාණය සහ අකුරු වැනි වෙනත් විලාසිතා එක් කරන්න . මෙම උදාහරණය නිල් පැහැති සෘජුකෝණාස්රය වේ; විශාලත්වය 147px වන විට 90px; පසුබිම් වර්ණය # 1f5afe, රාජකීය නිල්. කළු කන්ටේනර් මූලයේ මැද කොටසෙහි මූලද්රව්යය සඳහා ආන්තිකයක් ඇතුළත් වේ.
width: 147px;
උස: 90px;
පසුබිම් වර්ණය: # 1f5afe;
}
කෝනර් වටා
වටකුරු කොන්ක්රීට් සමග සෘජුකෝණාසයක් නිර්මාණය කිරීම CSS3 පහසුය. මායිම් රේඩියස් ආකාරයේ දේපල ඔබේ ග්ලැවුම් පන්තියට එක් කරන්න. ඉහළම අනුකූලතාව සඳහා -webkit- සහ -moz-prefixes භාවිතා කිරීමට පමණක් මතක තබා ගන්න.
-webkit-මායිම්-අරය: 15px;
-moz-මායිම්-අරය: 15px;
දේශසීමා අරය: 15px;
Box Shadow සමඟ දීප්තිය එකතු කරන්න
එහි දීප්තිමත් ආලෝකයක් නිර්මාණය කර ඇත. ඔබ එය මුලුමනින්ම අවහිර කිරීමට අවශ්ය නිසා, සෙවණැල්ලක් මෙන් එක පැත්තක් අඳිනු නොලැබෙන නිසා, ඔබ තිරස් දිග සහ සිරස් දිගින් 0px දක්වා තැබිය යුතුය. මෙම උදාහරණයේ දී, විකෘත විකිරණය 15px දක්වා වන අතර විවරය 5px පමණ වේ. නමුත් ඔබට එම සැකසීම් සමඟ කොතරම් පුළුල් හා විසංයෝජනය කළ යුතුද යන්න තීරණය කිරීමට ඔබට හැකිය. වර්ණ RGB (255,255,190) යනු කහ පැහැය වන RGBa ඇල්ෆා පාරදෘශ්යතාවය සමඟ 75% -Rgba (255,255,190, .75) වේ. ඔබේ ව්යාපෘතිය සඳහා හොඳම ක්රියාකාරී වර්ණ වර්ණ තෝරන්න. හොඳම කොන්ක්රීට් සඳහා බ්රව්සර උපසර්ග (-webkit- සහ -moz-) භාවිතා කිරීමට අමතක නොකරන්න.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
දිලිසෙන පෙට්ටිය පරීක්ෂා කරන්න
බ්රව්සර් එකක් හෝ වැඩි ගණනක් දීප්තිමත් පෙට්ටියක් පරීක්ෂා කරන්න. ඔබේ වෙබ් පිටුව සඳහා හොඳම ක්රියාකාරී වන ගුප්ත බලපෑම ලබා දීම සඳහා අවශ්ය ඕනෑම ගැලපීම් සිදු කරන්න.