ویژگی هایی از CSS که امروز میتونیم استفاده کنیم!

سازمان استاندارد جهانی وب در حال اظافه کردن ویژگی های جدیدی به css است. توی این آموزش میخوام بعضی ویژگی هایی از CSS که کاربردی هستن رو براتون توضیح بدم.

۱- blend modes : این ویژگی در سی اس اس برای ترکیب کردن رنگ و تصویر یا دو تصویر به کار میرود به مثال زیر دقت کنید: (تصویر نهایی سمت راست است.)

css-blend-mode-mult

در مثال بالا رنگ پس زمینه و عکس باهم ترکیب شدن و رنگ پس زمینه یک حالت ته رنگ به عکس افزود.

شما میتونید این خاصیت رو با جاوا اسکریپت یا CSS چک کنید و در صورتی که مرورگر شما اون رو ساپورت میکرد به صفحه اظافه کنیدش که نحوه ی کار به صورت زیر خواهد بود:

چک کردن پشتیبانی مرورگر از دستور css با استفاده از خودِ CSS به صورت زیر خواهد بود:

چک کردن پشتیبانی مرورگر از دستورات CSS با استفاده از جاوا اسکریپت نیز به صورت زیر است:

دوستانی که علاقه دارند راجب این خاصیت بیشتر مطالعه کنند میتونن اینجا کلیک کنن و به سایت مرجع برن.

۲ – clip-path : با استفاده از این دستور میتونیم ناحیه ای از المان (element) مورد نظر رو که میخوایم نمایش داده بشه رو مشخص کنیم که نحوه ی کار به صورت زیر خواهد بود:

clip-path-1

با استفاده از دستور clip-path در CSS میتونید کارهای جالبی انجام بدید و عکس های سایت خودتون رو به صورت لوزی یا ستاره و … نمایش بدید. کافیه تا نقاطی که میخواید از اونجا برش داده بشه رو تایید کنید. میتونید از این سایت نیز دیدن کنید.

۳- css filters : فیلتر ها در css میتونن خیلی براتون جالب و جذاب باشن. مثلا فرض کنید که شما یه عکس دارید و میخواید اون رو سیاه سفید نشون بدید یا اینکه میخواید اون رو تار کنید و بعد از اینکه موس روی عکس اومد عکس به حالت عادی برگرده و یه افکت خیلی خفن به وجود بیارید.

لیست فیلتر های موجود و نحوه ی استفاده ی آنها به صورت زیر می باشد:

دقت کنید که فرق drop-shadow و box-shadow در هنگامی اشکار میشود که شما به یه تصویر با فرمت png با خاصیت Drop-shadow سایه بدید که در این حالت سایه به دور نقاطی از تصویر که قسمت های رنگ از قسمت های بدون رنگ جدا شده اعمال میشود ولی در حالت box-shadow سایه به دور عکس اعمال میشود.

برای اینکه بهتر متوجه بشید به عکس زیر توجه کنید. (تصویر سمت راست با drop-shadow و تصویر سمت چپ با box-shadow است.)

Capture

همچنین میزان ساپورت شدن از دستورات بالا رو میتونید از اینجا بررسی کنید.

ببخشید اگه مختصر توضیح دادم . هرکسی بد متوجه شد یا اینکه سوالی داشت میتونه از بخش نظرات بپرسه و جوابشو بگیره. موفق باشید. 🙂

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟