اعمال افکت بر روی تصاویر در CSS

اعمال افکت بر روی تصاویر در CSS

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

isolation

از ویژگی isolation برای ایزوله کردن یک گروه از عناصر در برابر آمیخته شدن با محتوای پشت سرشان استفاده می شود. معمولا از isolation در زمانی که از ویژگی mix-blend-mode استفاده می کنیم, بهره می بریم. فرض کنید یک متن در تگ <h1> را بخواهیم با محتوای پشت سرش ترکیب کنیم, ساختار بصورت زیر است: […]

<blend-mode>

از نوع داده ای <blend-mode> برای تعیین فرمول ترکیب کردن رنگ های یک عنصر با محتوای پشت سرش استفاده می شود. به بیان دیگر blend-mode دو پیکسل که روی هم قرار دارند را گرفته و برای نمایش, به روشی آنها را با هم ترکیب و یا یکی از آنها را انتخاب می کند. مثلا در […]

ساخت افکت ویژه آشکارسازی تصویر

در این مطلب با ساختن این افکت در پنچ قدم آشنا خواهیم شد. این تکینک از انیمیشن و خاصیت mix-blend-mode در CSS و از SVG کمک می گیرد. قدم اول در اولین مرحله عنصر SVG مورد نظر را در نرم افزاری مثل adobe illustrator و یا نرم افزاری مشابه آن رسم می کنیم. توجه داشته […]

css-blender

CSS Blender

در اینجا قصد معرفی ابزار آنلاینی برای تست و بررسی blend mode ها در دنیای CSS را داریم. اگر تا به حال در مورد blend mode ها نشنیده اید این مطلب کمک خوبی برای شما خواهد بود. این ابزار از طریق کلیدهای نوار بالا به شما این امکان را می دهد تا بتوانید تصویر و […]