جلوه های شناور CSS جالب که از برش پس زمینه، ماسک و سه بعدی استفاده می کنند

ما در حال حاضر از طریق یک سری پست در مورد رویکردهای جالب به جلوه های شناور CSS قدم زده ایم. ما با یک شروع کردیم مجموعه ای از نمونه هایی که از CSS استفاده می کنند background املاک، سپس به سمت text-shadow ملکی که در آن ما از نظر فنی از هیچ سایه ای استفاده نکردیم. ما همچنین آنها را با متغیرهای CSS و calc() برای بهینه سازی کد و آسان کردن مدیریت آن.

در این مقاله، این دو مقاله را برای ایجاد انیمیشن‌های شناور CSS پیچیده‌تر می‌سازیم. ما در مورد برش پس‌زمینه، ماسک‌های CSS و حتی خیس شدن پاهایمان با پرسپکتیوهای سه بعدی صحبت می‌کنیم. به عبارت دیگر، ما این بار تکنیک های پیشرفته را بررسی می کنیم و محدودیت های کاری که CSS می تواند با افکت های شناور انجام دهد را از بین ببریم!

---

در اینجا فقط یک مزه از آنچه ما درست می کنیم:

با استفاده از جلوه های شناور background-clip

اجازه دهید در موردش صحبت کنیم background-clip. این ویژگی CSS a را می پذیرد text ارزش کلمه کلیدی که به ما امکان می دهد شیب ها را به متن یک عنصر به جای واقعی زمینه.

بنابراین، برای مثال، می‌توانیم رنگ متن را در حالت شناور همانطور که با استفاده از آن تغییر می‌دهیم، تغییر دهیم color ویژگی، اما به این ترتیب تغییر رنگ را متحرک می کنیم:

تنها کاری که کردم اضافه کردن بود background-clip: text به عنصر و transition la background-position. لازم نیست پیچیده تر از این باشد!

اما اگر چندین گرادیان را با مقادیر مختلف برش پس‌زمینه ترکیب کنیم، می‌توانیم بهتر عمل کنیم.

در آن مثال، من از دو گرادیان مختلف و دو مقدار با استفاده می کنم background-clip. اولین گرادیان پس‌زمینه به متن بریده می‌شود (به لطف text مقدار) برای تنظیم رنگ روی شناور، در حالی که گرادیان پس‌زمینه دوم زیرخط پایین را ایجاد می‌کند (به لطف padding-box ارزش). بقیه چیزها مستقیماً از آن کپی شده است کاری که در مقاله اول انجام دادیم از این سری

در مورد یک افکت شناور که در آن نوار از بالا به پایین به گونه‌ای می‌لغزد که به نظر می‌رسد متن اسکن شده، سپس رنگ می‌شود:

این بار برای ایجاد خط، اندازه اولین گرادیان را تغییر دادم. سپس آن را با شیب دیگری که رنگ متن را به روز می کند می کشم تا توهم ایجاد شود! می توانید آنچه را که در این قلم اتفاق می افتد تجسم کنید:

ما فقط سطح کاری را که می توانیم با خودمان انجام دهیم خراشیده ایم background-clipقدرت های پینگ! با این حال، این تکنیک احتمالاً چیزی است که شما نمی‌خواهید از آن در تولید استفاده کنید، زیرا فایرفاکس به داشتن یک آن معروف است بسیاری از اشکالات گزارش شده مربوط به background-clip. سافاری مشکلات پشتیبانی نیز دارد. این باعث می‌شود فقط Chrome از این موارد پشتیبانی کامل داشته باشد، بنابراین ممکن است در ادامه، آن را باز کنید.

بیایید با استفاده از یک افکت شناور دیگر برویم background-clip:

احتمالاً فکر می‌کنید این یکی در مقایسه با آنچه که اخیراً پوشش داده‌ایم بسیار آسان به نظر می‌رسد - و شما درست می‌گویید، هیچ چیز جالبی در اینجا وجود ندارد. تنها کاری که من انجام می‌دهم این است که یک گرادیان را لغزان می‌دهم در حالی که اندازه شیب دیگری را افزایش می‌دهم.

اما ما اینجا هستیم تا جلوه های شناور پیشرفته را بررسی کنیم، درست است؟ بیایید کمی آن را تغییر دهیم تا زمانی که مکان‌نمای ماوس از عنصر خارج می‌شود، انیمیشن متفاوت باشد. همان افکت شناور، اما پایان متفاوتی برای انیمیشن:

باحال درسته؟ بیایید کد را تجزیه کنیم:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

ما سه لایه پس‌زمینه داریم - دو شیب و background-color با استفاده از --_c متغیری که در ابتدا روی شفاف (#0000). در شناور، رنگ را به سفید تغییر می دهیم و --_c متغیر به رنگ اصلی (--c).

در اینجا چیزی است که در آن اتفاق می افتد transition: ابتدا، ما یک انتقال را به همه چیز اعمال می کنیم اما آن را به تاخیر می اندازیم color و background-color by 0.5s برای ایجاد افکت کشویی بلافاصله پس از آن، ما آن را تغییر می دهیم color و background-color. ممکن است متوجه تغییرات بصری نشوید زیرا متن قبلاً سفید است (به لطف گرادیان اول) و پس‌زمینه قبلاً روی رنگ اصلی تنظیم شده است (به لطف گرادیان دوم).

سپس، با خروج ماوس، یک تغییر فوری برای همه چیز اعمال می کنیم (به این نکته توجه کنید 0s تاخیر)، به جز color و background-color که انتقال دارند این بدان معنی است که ما همه گرادیان ها را به حالت اولیه خود برمی گردانیم. باز هم، احتمالاً هیچ تغییر بصری به دلیل متن مشاهده نخواهید کرد color و background-color قبلاً در حالت شناور تغییر کرده است.

در آخر، محو شدن را روی رنگ اعمال می کنیم و a background-color برای ایجاد قسمت خروجی ماوس از انیمیشن. می دانم، شاید درک آن دشوار باشد، اما می توانید با استفاده از رنگ های مختلف، ترفند را بهتر تجسم کنید:

موارد بالا را بارها نگه دارید و ویژگی هایی را خواهید دید که در حالت شناور متحرک هستند و آنهایی که در حالت ماوس به بیرون متحرک می شوند. سپس می توانید بفهمید که چگونه ما به دو انیمیشن مختلف برای یک افکت شناور رسیدیم.

فراموش نکنیم تکنیک سوئیچینگ DRY که ما استفاده کردیم در مقالات قبلی این مجموعه برای کمک به کاهش مقدار کد با استفاده از تنها یک متغیر برای سوئیچ:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

اگر تعجب می‌کنید که چرا برای رنگ اصلی به دستور RGB رسیدم، به این دلیل است که باید با شفافیت آلفا بازی کنم. من هم از متغیر استفاده می کنم --_t برای کاهش یک محاسبه اضافی مورد استفاده در transition ویژگی.

قبل از اینکه به قسمت بعدی برویم، در اینجا نمونه‌های بیشتری از افکت‌های شناور وجود دارد که چندی پیش انجام دادم و بر آنها تکیه می‌کردم background-clip. جزئیات هر یک طولانی خواهد بود، اما با آنچه تاکنون آموخته ایم، می توانید به راحتی کد را درک کنید. این می تواند الهام خوبی باشد که برخی از آنها را به تنهایی و بدون نگاه کردن به کد امتحان کنید.

میدونم میدونم. این ها افکت های شناور دیوانه کننده و غیر معمول هستند و من متوجه می شوم که در بیشتر موقعیت ها بسیار زیاد هستند. اما این نحوه تمرین و یادگیری CSS است. یادت باشه ما فشار دادن به محدودیت ها از جلوه های شناور CSS. افکت شناور ممکن است تازگی داشته باشد، اما ما در این مسیر تکنیک‌های جدیدی را یاد می‌گیریم که مطمئناً می‌توان از آنها برای چیزهای دیگر استفاده کرد.

افکت ها را با استفاده از CSS حرکت دهید mask

حدس بزن چی شده؟ CSS mask ویژگی از گرادیان ها به همان شیوه استفاده می کند background ملک انجام می دهد، بنابراین خواهید دید که آنچه ما در آینده می سازیم بسیار ساده است.

بیایید با ساختن یک زیرخط فانتزی شروع کنیم.

من با استفاده از background برای ایجاد یک حاشیه پایین زیگزاگ در آن نسخه ی نمایشی. اگر بخواهم یک انیمیشن را روی آن خط زیر اعمال کنم، انجام آن تنها با استفاده از ویژگی های پس زمینه خسته کننده خواهد بود.

CSS را وارد کنید mask.

ممکن است کد عجیب به نظر برسد، اما منطق هنوز همان چیزی است که در تمام انیمیشن های پس زمینه قبلی انجام دادیم. این mask از دو شیب تشکیل شده است. شیب اول با رنگی مات تعریف می شود که ناحیه محتوا را می پوشاند (به لطف content-box ارزش). این گرادیان اول متن را قابل مشاهده می کند و حاشیه زیگزاگ پایینی را پنهان می کند. content-box هست mask-clip ارزشی که رفتاری مشابه دارد background-clip

linear-gradient(#000 0 0) content-box

شیب دوم کل منطقه را پوشش می دهد (به لطف padding-box). این یک عرض دارد که با استفاده از آن تعریف شده است --_p متغیر است و در سمت چپ عنصر قرار می گیرد.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

اکنون، تنها کاری که باید انجام دهیم این است که مقدار آن را تغییر دهیم --_p برای ایجاد یک افکت لغزشی برای گرادیان دوم و نمایان شدن زیرخط، شناور را نگه دارید.

.hover:hover { --_p: 100%; color: var(--c);
}

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

با چنین ترفندی، ما به راحتی می توانیم تغییرات زیادی را با استفاده از یک پیکربندی گرادیان متفاوت با mask ویژگی:

هر نمونه در آن نسخه ی نمایشی از یک پیکربندی گرادیان کمی متفاوت برای آن استفاده می کند mask. همچنین به جداسازی کد بین پیکربندی پس‌زمینه و پیکربندی ماسک توجه کنید. آنها را می توان به طور مستقل مدیریت و نگهداری کرد.

بیایید پیکربندی پس‌زمینه را با جایگزین کردن زیرخط زیگزاگ با یک زیرخط مواج تغییر دهیم:

مجموعه ای دیگر از افکت های شناور! من تمام تنظیمات ماسک را حفظ کردم و پس‌زمینه را تغییر دادم تا شکلی متفاوت ایجاد کنم. حالا می توانید بفهمید که چگونه توانستم برای رسیدن به 400 افکت شناور بدون شبه عناصر - و ما هنوز هم می توانیم بیشتر داشته باشیم!

مثلا چرا چیزی شبیه این نیست:

در اینجا یک چالش برای شما وجود دارد: مرز در آخرین نسخه نمایشی یک گرادیان با استفاده از است mask دارایی که آن را آشکار کند. آیا می توانید منطق پشت انیمیشن را بفهمید؟ ممکن است در نگاه اول پیچیده به نظر برسد، اما بسیار شبیه به منطقی است که ما برای بیشتر جلوه‌های شناور دیگر که به گرادیان‌ها متکی هستند، نگاه کرده‌ایم. توضیحات خود را در نظرات ارسال کنید

جلوه های شناور به صورت سه بعدی

ممکن است فکر کنید که ایجاد یک افکت سه بعدی با یک عنصر غیرممکن است (و بدون توسل به شبه عناصر!) اما CSS راهی برای تحقق آن دارد.

آنچه در آنجا می بینید یک افکت سه بعدی واقعی نیست، بلکه یک توهم کامل از سه بعدی در فضای دو بعدی است که CSS را با هم ترکیب می کند. background, clip-pathو transform خواص.

اولین کاری که انجام می دهیم این است که متغیرهای خود را تعریف کنیم:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

سپس یک حاشیه شفاف با عرض ایجاد می کنیم که از متغیرهای بالا استفاده می کند:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

سمت راست و بالا عنصر هر دو باید برابر باشند --b مقدار در حالی که دو طرف پایین و چپ باید برابر با مجموع باشند --b و --d (که هست --_s متغیر).

برای بخش دوم ترفند، باید یک گرادیان تعریف کنیم که تمام مناطق مرزی را که قبلاً تعریف کردیم را پوشش دهد. آ conic-gradient برای آن کار خواهد کرد:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

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

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

آخرین مرحله اعمال الف است CSS clip-path برای بریدن گوشه ها برای آن احساس جور سایه طولانی:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

همین! ما فقط یک مستطیل سه بعدی با چیزی جز دو شیب و یک ساختیم clip-path که به راحتی می توانیم با استفاده از متغیرهای CSS تنظیم کنیم. اکنون، تنها کاری که باید انجام دهیم این است که آن را متحرک کنیم!

به مختصات شکل قبل (با رنگ قرمز مشخص شده است) توجه کنید. بیایید آن ها را برای ایجاد انیمیشن به روز کنیم:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

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

این خودکار ایزوله می کند clip-path بخشی از انیمیشن برای اینکه ببینید چه کار می کند:

لمس نهایی این است که با استفاده از عنصر در جهت مخالف حرکت دهید translate - و توهم کامل است! در اینجا اثر استفاده از مقادیر مختلف ویژگی سفارشی برای اعماق متفاوت است:

اثر شناور دوم نیز از همین ساختار پیروی می کند. تنها کاری که انجام دادم این بود که چند مقدار را به روز کردم تا به جای حرکت سمت راست بالا، یک حرکت سمت چپ بالا ایجاد کنم.

ترکیب افکت ها!

نکته شگفت انگیز در مورد همه چیزهایی که پوشش داده ایم این است که همه آنها مکمل یکدیگر هستند. در اینجا یک مثال است که من در آن اضافه می کنم la text-shadow اثر از مقاله دوم در سریال به background تکنیک انیمیشن از مقاله اول در حین استفاده از ترفند سه بعدی که به آن پرداختیم:

کد واقعی ممکن است در ابتدا گیج کننده باشد، اما ادامه دهید و آن را کمی بیشتر تشریح کنید - متوجه خواهید شد که این فقط ترکیبی از آن سه افکت مختلف است که تقریباً با هم ترکیب شده اند.

اجازه دهید این مقاله را با آخرین افکت شناور به پایان برسانم، جایی که در حال ترکیب پس‌زمینه، مسیر کلیپ و خط تیره هستم. perspective برای شبیه سازی یک افکت سه بعدی دیگر:

من همان افکت را روی تصاویر اعمال کردم و نتیجه برای شبیه سازی سه بعدی با یک عنصر کاملاً خوب بود:

آیا می خواهید نگاه دقیق تری به نحوه عملکرد آخرین نسخه نمایشی داشته باشید؟ یه چیزی رویش نوشتم

پسگفتار

اوف، ما تمام شدیم! می دانم که CSS بسیار پیچیده ای است، اما (1) ما در وب سایت مناسبی برای چنین چیزهایی هستیم، و (2) هدف این است که درک خود را از ویژگی های مختلف CSS به سطوح جدیدی با اجازه دادن به آنها برای تعامل با یکی دیگر.

ممکن است بپرسید که اکنون که در حال بسته شدن این سری کوچک جلوه های شناور پیشرفته CSS هستیم، مرحله بعدی چیست. من می‌توانم بگویم قدم بعدی این است که همه چیزهایی را که یاد گرفتیم برداریم و آنها را روی عناصر دیگر مانند دکمه‌ها، آیتم‌های منو، پیوندها و غیره اعمال کنیم. ; عنصر واقعی مهم نیست مفاهیم را بردارید و با آنها بدوید تا چیزهای جدید خلق کنید، آزمایش کنید و یاد بگیرید!

---

جلوه های شناور CSS جالب که از برش پس زمینه، ماسک و سه بعدی استفاده می کنند در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://css-tricks.com/css-hover-effects-background-masks-3d/