سلام دوستان. قصد دارم یه دستی به سر و روی نوت های CSS ام بکشم و به عنوان مطالب کوتاه باهاتون به اشتراک بزارم.
سایه رنگی با کمی خلاقیت اولین یادداشت از سری یادداشت های CSS من هست که آماده کردم. امیدوارم لذت ببرید و نظرتون رو حتما بنویسید که بدونم باید ادامه بدم یا نه. :)
هدفم ایجاد سایه رنگی برای یک باکس مطابق با رنگ بندی خودش هست. یعنی به جای اینکه از box-shadow معمولی استفاده کنم از یک روش متفاوت استفاده کردم.
در واقع کار سختی انجام نشده. من از ارث بری ویژگی ها و همینطور شبه عناصر (psuedo-elements) در CSS استفاده کردم.
عنصر before کلاس box رو دقیقا هم اندازه با خود box ایجاد کردم و position اش رو absolute قرار دادم. و طوری که میخوام موقعیتش رو تنظیم کردم. پس زمینه رو از عنصر مادر، یعنی کلاس box ارث بری کردم و در نهایت هم یک فیلتر بلور (blur) براش اعمال کردم.
نتیجه رو در تصویر پایین می بینید، دقیقا همان طوری که بک گراند کلاس box یک گرادیان از رنگ سیاه به قرمز هست، سایه هم دقیقا با همون رنگ ها درست شده.
تنها مشکلی که این کد داره اینه که css-filters و در نتیجه ویژگی filter توسط Internet Explorer و Opera Mini پشتیبانی نمیشه.
امیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید. :)
