راه راه های پس زمینه متحرک که در شناور تغییر می کنند

هر چند وقت یک بار باید به CSS دسترسی پیدا کنید background-size ویژگی؟ اگر شما هم مثل من هستید - و احتمالاً بسیاری از افراد دیگر - معمولاً زمانی است که شما background-size: cover یک تصویر برای پر کردن فضای کل یک عنصر.

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

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

بیایید با یک تنظیم بسیار ابتدایی شروع کنیم تا همه چیز ساده باشد. من در مورد یک تک صحبت می کنم

در HTML که به صورت مربع سبز استایل داده شده است:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

تنظیم نوارهای پس زمینه

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

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

من نوارهای افقی درست کردم، اما می‌توانیم با رویکردی که در اینجا پوشش می‌دهیم، عمودی هم برویم. و ما می توانیم این را با ویژگی های سفارشی کمی ساده کنیم:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

بنابراین، --gt مقدار گرادیان و --n ثابتی است که ما از آن برای هل دادن نوارها به سمت پایین استفاده می کنیم تا به صورت عمودی جابجا شوند. و ممکن است متوجه شده باشید که من یک گرادیان واقعی تنظیم نکرده ام، بلکه نوارهای مشکی یکدست را در linear-gradient() تابع - این عمدی است و ما بعداً به این خواهیم رسید که چرا این کار را انجام دادم.

یک کار دیگر که باید قبل از حرکت انجام دهیم این است که از تکرار پیشینه هایمان جلوگیری کنیم. در غیر این صورت، آنها کل فضا را کاشی می کنند و پر می کنند:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

می توانستیم تنظیم کنیم background-repeat در background خلاصه، اما من تصمیم گرفتم آن را در اینجا به اشتراک بگذارم تا خواندن مطالب آسان باشد.

خنثی کردن راه راه ها

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

اینجاست که می‌توانیم از آن استفاده کنیم background-size ویژگی. ما می‌خواهیم هم ارتفاع و هم عرض نوارها را تنظیم کنیم و ویژگی از یک نحو دو مقداری پشتیبانی می‌کند که به ما امکان می‌دهد دقیقاً این کار را انجام دهیم. و، می‌توانیم آن اندازه‌ها را با جدا کردن آنها با کاما به همان روشی که در آن انجام دادیم، زنجیره کنیم background.

بیایید ابتدا با تنظیم عرض ها ساده شروع کنیم. استفاده از نحو تک مقداری برای background-size عرض را تنظیم می کند و ارتفاع را به طور پیش فرض تعیین می کند auto. من در اینجا از مقادیر کاملاً دلخواه استفاده می‌کنم، بنابراین مقادیر را بر اساس آنچه برای طراحی شما بهتر است تنظیم کنید:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

اگر از همان مقادیر من استفاده می کنید، این را دریافت خواهید کرد:

آیا دقیقاً به نظر نمی رسد که عرض را برای همه نوارها تنظیم کنیم، اینطور نیست؟ این به خاطر auto رفتار ارتفاع نحو تک مقداری. نوار دوم پهن تر از بقیه زیر آن است و آنها را می پوشاند. ما باید ارتفاعات را تعیین کنیم تا بتوانیم کار خود را ببینیم. همه آنها باید یک قد داشته باشند و ما در واقع می توانیم دوباره از خود استفاده کنیم --n متغیر، دوباره، برای ساده نگه داشتن چیزها:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

آه، خیلی بهتر!

اضافه کردن شکاف بین نوارها

اگر طراحی شما نیاز به فاصله بین راه راه ها نداشته باشد، این یک مرحله کاملاً اختیاری است، اما من این کار را انجام دادم و خیلی پیچیده نیست. ارتفاع هر نوار را تغییر می دهیم background-size یک smidge، مقدار را کاهش می دهد، بنابراین آنها نمی توانند فضای عمودی کامل را پر کنند.

ما می توانیم به استفاده از خود ادامه دهیم --n متغیر است، اما مثلاً مقدار کمی از آن کم کنید 5pxبا استفاده از calc() تا به آنچه می خواهیم برسیم

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

این تعداد زیادی تکرار است که می توانیم با متغیر دیگری حذف کنیم:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

ماسک و ترکیب

حالا بیایید آن را عوض کنیم palegreen رنگ پس‌زمینه‌ای که ما تا به امروز برای اهداف بصری استفاده کرده‌ایم برای رنگ سفید.

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

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

در یک ظرف والد جدید و معرفی دوم

در زیر آن:

ما در اینجا قصد داریم یک فاکتورسازی مجدد CSS انجام دهیم. اکنون که یک کانتینر والد جدید داریم، می‌توانیم ثابت را پاس کنیم width و height خواصی که ما از آن استفاده می کردیم

در آنجا:

section {
  width: 500px;
  height: 500px;
} 

من همچنین قصد دارم از CSS Grid برای قرار دادن این دو استفاده کنم

عناصر بر روی یکدیگر این همان ترفندی است که تمانی عفیف برای خلق خود از آن استفاده می کند گالری تصاویر فوق العاده باحال. ایده این است که ما هر دو div را روی ظرف کامل با استفاده از قرار می دهیم grid-area دارایی و همه چیز را به سمت مرکز تراز کنید:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

حالا، این را بررسی کنید. دلیل اینکه من از یک گرادیان جامد استفاده کردم که قبلاً از سیاه به سیاه تبدیل می شود این است که ما را برای ماسک کردن و ترکیب کردن این دو تنظیم کنیم.

لایه های. این ماسک کردن واقعی به معنایی که ما آن را می نامیم نیست mask ویژگی، اما کنتراست بین لایه ها کنترل می کند که چه رنگ هایی قابل مشاهده هستند. ناحیه ای که با رنگ سفید پوشانده شده است سفید باقی می ماند و ناحیه ای که با رنگ سیاه پوشانده شده است، نشت می کند. مستندات MDN در مورد حالت های ترکیبی توضیح خوبی در مورد نحوه کار این دارد.

برای اینکه آن کار کند، من شیب واقعی را که می خواهیم در ابتدا ببینیم، اعمال می کنم

در حالی که قوانین سبک را از حرف اول ما اعمال می کنیم

در جدید، با استفاده از :nth-child() شبه انتخابگر:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

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

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

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

اثر شناور

آخرین قطعه از این پازل، افکت شناور است که نوارها را به عرض کامل باز می کند. ابتدا، بیایید انتخابگر خود را برای آن بنویسیم. ما می خواهیم این اتفاق زمانی بیفتد که ظرف والد (

در مورد ما) شناور است. هنگامی که نشان داده شد، اندازه پس‌زمینه نوارهای موجود در قسمت دوم را تغییر می‌دهیم

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

ما می خواهیم آن را تغییر دهیم background-size نوارها به عرض کامل ظرف در حالی که همان ارتفاع را حفظ می کنند:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

که پس‌زمینه را به عرض کامل "چاپ می‌کند". اگر کمی اضافه کنیم transition به این ترتیب، می بینیم که نوارها در حالت شناور گسترش می یابند:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

این نسخه ی نمایشی نهایی یک بار دیگر است:

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

این یک بسته بندی است!

خیلی تمیز، درسته؟ من مطمئنا اینطور فکر می کنم. چیزی که در این مورد نیز دوست دارم این است که بسیار قابل نگهداری و سفارشی سازی است. به عنوان مثال، ما می توانیم ارتفاع، رنگ و جهت نوارها را با تغییر چند مقدار تغییر دهیم. حتی ممکن است چند چیز دیگر را در آنجا تغییر دهید - مانند رنگ‌ها و عرض‌ها - تا آن را حتی بیشتر تنظیم کنید.

من واقعاً علاقه مند هستم که آیا شما به روش دیگری به این موضوع برخورد می کردید. اگر چنین است، لطفا در نظرات به اشتراک بگذارید! خوب است که ببینیم چه تعداد تنوع را می توانیم جمع آوری کنیم.