box-shadow
ویژگی، تغییر سایه را تنظیم کنید، اسپرد را تعریف کنید و به آن رنگ بدهید. این یک راه عالی برای عمق بخشیدن به چیزی است که ممکن است یک طراحی مسطح باشد! نویسنده Yair Even Or با الهام گرفتن از سایهها، چیزهای مشابهی را خلق میکند، فقط با جلوهای تار در جای سایه. برای توضیح گام به گام در مورد چگونگی ترکیب آن با استفاده از ترکیبی از ماسک ها، گرادیان ها و چیزهای خوب همراه باشید. backdrop-filter
ویژگی.
تصور کن box-shadow
اما برای جلوه تاری، جایی که پسزمینه یک عنصر در اطراف آن عنصر محو میشود و به تدریج قدرت تاری کاهش مییابد. زمانی که سعی میکردم کنتراست یک پنجره بازشو را در یک منطقه تاریک بهبود بخشم، به این ایده رسیدم box-shadow
زیرا پنجره بازشو از نظر طراحی چندان منطقی نخواهد بود. سپس فکر کردم، خوب، چه راه های دیگری می تواند یک اثر کنتراست خوب ایجاد کند؟ و بنابراین ناگهان، ایده یک اثر تاری تدریجی در اطراف جسم به ذهنم رسید.
بسیار عالی خواهد بود اگر ما یک box-blur
دارایی یا شاید نوعی blur
کلمه کلیدی که می توانستیم روی آن تنظیم کنیم box-shadow
راهی که برای آن انجام می دهیم inset
سایه ها. متاسفانه CSS چنین خاصیتی ندارد. اما از آنجایی که CSS عالی و انعطافپذیر است، ما همچنان میتوانیم با ترکیب چند ویژگی CSS و هک کردن آن، اثر را به دست آوریم.
چیزی که از اینجا به بعد به شما نشان خواهم داد، فرآیند فکری است که برای ایجاد اثر انجام دادم. گاهی اوقات، برای من آسانتر است که بدانم چه چیزی در حال پیشروی است تا اینکه در روایتی از پیچ و خمها بچرخم. بنابراین، برای کسانی از شما که مانند من هستند و می خواهند مستقیماً وارد این روند شوند، این رویکرد من بود.
با نشانه گذاری شروع کنید
این اثر به گونه ای است که به آن اعمال می شود ::before
شبه عنصر برخی از عناصر، مثلاً برخی از پنجره های بازشو/دیالوگ/popover/tooltip. اینها “هدف”های رایج برای این نوع اثر هستند. من فکر میکنم استفاده از شبه عنصر در اینجا رویکرد خوبی است زیرا به این معنی است که میتوانیم از نظر فنی سبکها را به شبه عنصر اختصاص دهیم و اثر را روی عناصر دیگر بدون هیچ تغییری در HTML قرار دهیم.
<!-- This is literally it for this demo -->
<div></div>
می توانید به عنصر یک کلاس بدهید، هر ابعادی که دوست دارید، محتوا و سایر عناصر فرزند را در آن وارد کنید یا از یک عنصر کاملاً متفاوت استفاده کنید. HTML عنصر اصلی برای سس مخفی ما نیست.
موقعیت عنصر شبه
ما می خواهیم ::before
شبه عنصر برای اشغال کل منطقه <div>
عنصری که برای این نسخه ی نمایشی خاص استفاده می کنیم. ما نه تنها می خواهیم که کل منطقه را پوشش دهد، بلکه حتی سرریز به این دلیل که ناحیه قابل مشاهده را ایجاد می کند، که دارای اثر تاری است، بنابراین به سمت بیرون گسترش می یابد.
::before {
content: '';
/* Make sure the parent element is at least relatively positioned to contain the pseudo-element. */
position: absolute;
/* The blur size should be anything below `0` so it will extend to the outside. */
inset: -100px;
/* This layer is positioned between the parent element and page background. */
/* Make sure this value is one below the `z-index` of the parent element. */
z-index: -1;
}
نظرات کد قسمت های کلیدی را مشخص می کند. یک رشته خالی باید برای content
دارایی بنابراین ::before
رندر می شود، سپس با دادن موقعیت مطلق آن را از جریان سند خارج می کنیم. این به ما اجازه می دهد inset
موقعیت عنصر است و در نهایت جهت افکت تاری را همانطور که روی آن قرار می دهیم تنظیم می کند box-shadow
دارایی – فقط ما از آن استفاده می کنیم inset
برای کنترل اندازه آن ما می خواهیم یک منفی inset
مقدار، که در آن اثر بیشتر گسترش می یابد هر چه مقدار کمتر می شود.
تا به حال، ما پایه و اساس اثر را تنظیم کرده ایم. واقعاً هنوز چیزی برای دیدن وجود ندارد. اکنون، سرگرمی شروع می شود!
پوشش با گرادیان های شفاف
گرادیان ها از نظر فنی هستند تصاویر – تولید شده توسط مرورگر – که می تواند به عنوان ماسک CSS برای مخفی کردن بخش هایی از یک عنصر برای ایجاد اشکال مختلف استفاده شود. ممکن است چندین مقاله مرتبط با مجله Smashing را دیده باشید که در آنها ماسک CSS به نمایش گذاشته شده است، مانند این مقاله توسط Temani Afif.
این در این مورد عالی است زیرا میخواهیم اثر قویتر، نزدیکتر به جسم باشد و با دورتر شدن از شدت آن محو شود.
ما از دو گرادیان استفاده خواهیم کرد: یکی که به صورت افقی و دیگری به صورت عمودی می رود. من این مسیر را انتخاب کردم زیرا شبیه یک مستطیل خشن است که به سمت لبه ها محو می شود.
همانطور که گفتم، شفافیت کلیدی است. هر دو شیب شروع می شوند transparent
، سپس انتقال به black
تا درست قبل از پایان، جایی که آنها به آنجا برمی گردند transparent
برای محو کردن چیزها به یاد داشته باشید، این شیب ها هستند ماسک ها به جای تصاویر پسزمینه، بنابراین آنها بر روی اعلام میشوند mask
ویژگی، که کنترل می کند کدام پیکسل ها باید رندر شوند و کدورت آنها.
mask:
linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
- گرادیان عمودی (
to top
) یک محو شدن از شفاف در پایین به سیاه در وسط ایجاد می کند، سپس دوباره به شفاف در بالا باز می گردد. - شیب افقی (
to left
) یک محو شدن از شفاف در سمت راست به مشکی در وسط ایجاد می کند و سپس به شفاف در سمت چپ برمی گردد.
این رویکرد شیب دوگانه، نواحی سیاه را در موقعیت مکانی قرار می دهد، بنابراین آنها با هم ادغام می شوند و خط پایه ناهموار یک شکل مستطیلی را ایجاد می کنند که در مرحله بعدی اصلاح می شود. را mask
ویژگی بهتر است ابتدا به عنوان پیشوند و سپس بدون پیشوند اعلام شود تا پشتیبانی بیشتر مرورگرها را پوشش دهد:
-webkit-mask:
linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
mask:
linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
پالایش با استفاده از mask-composite
ویژگی
را mask-composite
ویژگی بخشی از ماژول پوشاندن CSS است و کنترل پیکسلی بر ترکیب محتوای ماسکشده را امکانپذیر میکند و امکان ترکیببندی پیچیده را فراهم میکند.
را source-in
مقدار این ویژگی برای افکتی که به دنبال آن هستیم بسیار مفید است زیرا به مرورگر میگوید که فقط قسمتهای همپوشانی ماسک را حفظ کند، بنابراین تنها پیکسلهایی که حاوی هر دو گرادیان (ذکر شده در بالا) هستند رندر میشوند. این به شکل مستطیل قفل میشود، که میتوان آن را روی هر عنصر DOM که دارای گوشههای خمیدهای بدون تا متوسط است، اعمال کرد.border-radius
).
به تدریج تار کردن پس زمینه
اکنون که ماسکی برای کار داریم، تنها کاری که باید انجام دهیم استفاده از آن است. را backdrop-filter
ویژگی CSS میتواند هر چیزی را که «پشت» یک عنصر با استفاده از رندر میشود، محو کند blur()
تابع:
::before {
/* etc. */
backdrop-filter: blur(10px);
}
هر چه مقدار بزرگتر باشد، تاری شدیدتر است. من استفاده میکنم 10px
خودسرانه در واقع، میتوانیم این موارد را بعداً تغییر دهیم تا پیادهسازی را انعطافپذیرتر و به راحتی پیکربندی کنیم.
اما صبر کن! همانطور که مشخص است، Safari به یک نسخه پیشوند فروشنده نیاز دارد backdrop-filter
برای اینکه اونجا کار کنه:
::before {
/* etc. */
-webkit-backdrop-filter: blur(10px); /* Required for Safari */
backdrop-filter: blur(10px);
}
توجه داشته باشید: ترجیح داده می شود که ویژگی های پیشوندی را اعلام کنید قبل از نوع بدون پیشوند، بنابراین آنها به عنوان یک بازگشت برای مرورگرهایی که (هنوز) از آنها پشتیبانی نمی کنند یا اجرای آنها متفاوت است، استفاده می شود.
لمس سایه هم افزایی
من فکر می کنم اضافه کردن کمی سیاه و سفید نیمه مات box-shadow
که ناحیه تاری را می پوشاند، عمق کمی به جلوه می دهد. تنها چیزی که وجود دارد این است که شما می خواهید آن را به خود عنصر اضافه کنید تا به آن ::before
شبه:
div {
box-shadow: 0 0 40px #00000099;
}
اگرچه این کاملا اختیاری است.
آوردن همه چیز با هم
وقتی همه چیز را با هم ترکیب می کنیم، CSS چگونه ظاهر می شود.
/* This can be set on the ::before pseudo of the element it is applied to. */
::before {
content: '';
/* This layer is positioned between some element and its background. */
position: absolute;
/* This should not affect the contents of the container. */
z-index: -1;
/* The blur size should be anything below `0` so it will extend to the outside. */
inset: -100px;
/* The blur effect */
-webkit-backdrop-filter: blur(10px); /* Required for safari */
backdrop-filter: blur(10px);
/* A mask fades the blur effect, so it gets weaker. */
/* towards the edges, further from the container box. */
/* (The fill color is irrelevant, so "red" is used as it's the shortest color name.) */
mask:
linear-gradient(
to top,
transparent 0%,
red 100px calc(100% - 100px),
transparent 100%),
linear-gradient(
to left,
transparent 0%,
red 100px calc(100% - 100px),
transparent 100%);
/* This merges the masks above so only the overlapping pixels are rendered. */
/* This creates the illusion of a fade-out mask. */
mask-composite: intersect;
-webkit-mask-composite: source-in; /* Required for Safari */
}
نسخه ی نمایشی نهایی، یک بار دیگر
من همچنین یک را آماده کرده ام نسخه ساده شده با حداقل کد و بدون متغیرهای CSS که خواندن و استفاده مجدد آسان تر است.
(gg, yk)