پس زمینه های راه راه

صورت مسئله

همان طور که در تصویر بالا مشاهده می کنید ساخت طرح های راه راه همیشه یکی از درگیری های ذهن بشر در زمینه های مختلف بوده است تا جایی که ذهن این مانکن هم…

 

 

در طراحی صفحات وب همیشه برای ساختن طرح های راه راه به عنوان پس زمینه به سراغ ابزارهایی نظیر فوتوشاپ می رفتیم و با استفاده از تصاویر, به نتیجه می رسیدیم. هنوز هم خیلی از ما از تصاویر کمک می گیریم. اما مشکلی که تصاویر دارند این است که تغییر دادن آنها دردسر زیادی دارد و انعطاف پذیری مناسبی ندارند. راه حل دیگر ساخت این طرح ها, استفاده از SVG است. که این روش نیازمند یادگیری SVG است و همچنین سینتکس آن متفاوت از سی اس اس است.
عالی نمی شد اگر می توانستیم اینگونه طرح ها را با سی اس اس خلق کنیم؟

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

پیشنیازها

1. linear-gradient
2. background-size

 

راه راه افقی

فرض کنید گرادینتی عمودی از رنگ زرد به آبی, مطابق کد و تصویر زیر داریم:

 

 

background: linear-gradient(#fb3, #58a);

 

حال می خواهیم کمی color-stopها را به هم نزدیک کنیم.

در گرادینت ها به مجموع رنگ و مکانی که برای آن تعیین می شود color-stop می گویند. البته تعیین مکان اختیاری است. همچنین color-stop جایی است که در آن نقطه, رنگ بصورت کامل و خالص است و هنوز شروع به محو شدن نکرده است.

 

background: linear-gradient(#fb3 20%, #58a 80%);

 

 

در تصویر بالا مکان های مشخص شده نشان دهنده color-stopها هستند.

حال 20 درصد از فضای بالا و 20 درصد از فضای پایین عنصر رنگ تخت است و گرداینت واقعی 60 درصد میانی را اشغال کرده است. حتی می توانیم color-stopها را باز هم به هم نزدیک تر کنیم:

 

background: linear-gradient(#fb3 40%, #58a 60%);

 

 

اکنون این سوال به ذهن می رسد که چه اتفاقی می افتد اگر color-stopها دقیقا در یک نقطه به هم برسند؟

 

background: linear-gradient(#fb3 50%, #58a 50%);

 

اگر چند رنگ در گرادینت ها مکان یکسان داشته باشند, به جای آنکه رنگ ها به آرامی در هم محو شوند, تغییر رنگ بصورت ناگهانی بوجود می آید و لبه های تیز ساخته می شوند.

 

 

از آنجایی که گرادینت ها نوعی تصویر هستند, ما می توانیم رفتارهایی که با تصویر در css انجام می دهیم با آنها نیز داشته باشیم. مثلا در اینجا اندازه گرادینت را در پس زمینه مشخص می کنیم:

 

  background: linear-gradient(#fb3 50%, #58a 50%);
  background-size: 100% 30px;

 

 

همینطور که در تصویر بالا مشاهده می کنید هر یک از راه راه ها دارای ارتفاع 15 پیکسل هستند (از آنجایی که ارتفاع پس زمینه را 30 پیکسل تعیین کردیم).

حال اگر اجازه دهیم تا پس زمینه تکرار شود به طرح راه راه مطلوب می رسیم:

 

 

همچنین می توانیم با تنظیم color-stop راه راه هایی با عرض نابرابر داشته باشیم:

 

  background: linear-gradient(#fb3 30%, #58a 30%);
  background-size: 100% 30px;

 

 

برای اینکه هر دفعه نیازی نباشد تا دو تا عدد را تغییر دهیم می توانیم از قانون زیر استفاده کنیم:

در گرادینت ها یک قانون وجود دارد که اگر مقدار یک color-stop از تمام color-stop های قبل از آن کمتر باشد, مقدار مکان آن برابر بزرگترین color-stop قبل از آن می شود.

این بدین معنی است که اگر مکان رنگ دوم را برابر صفر قرار دهیم مرورگر مقدار آن را برابر با مکان رنگ زرد که 30% هست قرار می دهد که همان چیزی است که ما دنبالش هستیم.

 

  background: linear-gradient(#fb3 30%, #58a 0%);
  background-size: 100% 30px;

 

نتیجه این کد با کد قبلی یکسان است.

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

 

  background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
  background-size: 100% 50px;

 

 

دموی زیر برای بررسی بیشتر تهیه شده است:
 

See the Pen Horizontal stripes by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

راه راه عمودی

ساختن راه راه عمودی هم شبیه به راه راه افقی است با دو تفاوت:

اول اینکه باید جهت گرادینت را برابر با to right قرار دهیم. (توجه داشته باشید که برای حالت افقی نیازی برای تعیین جهت نبود, چون گرادینت ها بصورت پیش فرض جهت to bottom دارند و نیازی به نوشتن نیست) و دوم باید مقدار اندازه پس زمینه را برای حالت عمودی تنظیم کنیم:

 

  background: linear-gradient(to right, #fb3 50%, #58a 50%);
  background-size: 30px 100%;

 

و نتیجه بصورت زیر خواهد بود:

 

راه راه مورب

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

 

background: linear-gradient(45deg, #fb3 50%, #58a 50%);
background-size: 30px 30px;

 

 
 

اما همینطور که مشاهده می کنید این نتیجه مطلوب نیست. چرا که به جای اینکه کل پس زمینه را بچرخانیم, گرادینت داخل هر تکه کاشی را چرخاندیم (بیایید از این به بعد هر تکه گرادینت که تکرار می شود را با کلمه کاشی معرفی کنیم).

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

 

 

در نتیجه باید تعداد color-stop ها را بیشتر کنیم:

 

background: linear-gradient(45deg, #fb3 25%, #58a 0%, #58a 50%, #fb3 0%, #fb3 75%, #58a 0);
background-size: 30px 30px;

 

 

بسیار عالی، به نتیجه دلخواه رسیدیم.

اما اگر با دقت مشاهده کنید متوجه می شوید که راه راه ها در این شکل باریک تر از راه راه های افقی یا عمودی که در بالا ترسیم کردیم, هستند. پس باید اندازه هر کاشی را توسط ویژگی background-size تا جایی بزرگتر کنیم تا هر راه مثل نمونه های عمودی و افقی 15 پیکسل شود. اما تا چه اندازه؟

هر کاشی یک مربع است و همانطور که در تصویر زیر مشاهده می کنید اندازه هر راه, یک چهارم قطر مربع است. پس اگر ما بتوانیم اندازه ضلع مربع را پیدا کنیم اندازه background-size مشخص خواهد شد.

 

 

از آنجایی که قطر مربع برابر با مجموع عرض راه راه ها است. پس در نتیجه قطر مربع برابر با 15 * 4 یعنی 60 پیکسل است و با تشکر از فیثاغورث عزیز داریم:

 

 

(مگر اینکه یه نفر تفنگ بزاره روی سرمون بگه: “اگر هر راه دقییییقا 15 پیکسل نشه می کشمت”. و الا هیچ کدوممون همچین عددی رو برای اندازه پس زمینه مشخص نمی کنیم. بماند که حتی اگر اون عدد رو هم تعیین کنیم باز می میمیریم چون رادیکال 2, عدد گویا نیست و هیچوقت به عدد دقیق 15 نمیرسیم :) )

پس عدد رو گرد می کنیم و خواهیم داشت:

 

background: linear-gradient(45deg, #fb3 25%, #58a 0%, #58a 50%, #fb3 0%, #fb3 75%, #58a 0);
background-size: 42.4px 42.4px;

 

 
دموی زیر را بررسی کنید:

 

See the Pen Diagonal stripes by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

راه حل بهتر برای ساخت راه راه مورب

در روش قبل اگر نظرمان عوض شود و بخواهیم جهت گرادینت را عوض کنیم و به جای زاویه 45 درجه, زاویه 60 درجه را انتخاب کنیم همه چی بهم می ریزد. پس این یک راه حل انعطاف پذیر نیست. خوشبختانه امروزه با استفاده از repeating-linear-gradient می توان به نتیجه یکسان اما با انعطاف بالاتر و همچنین درد سر کمتر برسیم. اگر با این نوع گرادینت آشنا نیستید به این مطلب مراجعه کنید.

تصویر زیر را در نظر بگیرید:

 

 

برای ساخت این تصویر بوسیله گرادینت خطی داریم:

background: linear-gradient(45deg,
 #fb3, #58a 30px,
 #fb3 30px, #58a 60px,
 #fb3 60px, #58a 90px,
 #fb3 90px, #58a 120px,
 #fb3 120px, #58a 150px, ...);

 

اما با گرادینت خطی تکرار شونده کار به آسانی زیر است:

 

  background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

 

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

راه راه موربی که به روش قبل ساختیم با این روش بصورت زیر خواهد بود:

 

  background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

 

توجه داشته باشید که در روش قبل ما محاسباتی برای background-size انجام می دادیم اما در این روش کافی است اندازه دلخواهمان را برای color-stop ها تعیین کنیم و به نتیجه مطلوب به راحتی برسیم.

برتری دیگر این روش این است که اگر بخواهیم زاویه یا جهت را تغییر دهیم, دیگر نگران بقیه پارامترها نخواهیم بود و به سادگی این کار انجام خواهد شد. مثال زیر راه راه نمونه را با زاویه 60 درجه دوباره سازی می کند:

 

  background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

 

 

See the Pen Diagonal stripes by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

آینده

به زودی در مرورگرها این امکان پیاده سازی می شود تا بتوانیم برای هر رنگ دو مقدار به عنوان مکان تعیین کنیم. در اینصورت نیازی نخواهد بود تا چند بار یک رنگ را تکرار کنیم و اینطوری هم کد کوتاه تر و تمیز تری خواهیم داشت و هم هر زمان که نیاز داریم تا رنگ ها را تغییر دهیم, پارامترهای کمتری برای تغییر دادن خواهیم داشت.

مثال قبل بصورت زیر ساخته می شود:

 

  background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);

 

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

 

یک ترفند جالب

گاهی اوقات راه راه هایی که نیاز داریم از رنگ های خیلی متفاوت تشکیل نشده اند, بلکه رنگ هایی در کنار هم قرار می گیرند که فقط از نظر روشنایی با هم متفاوت هستند. به عنوان نمونه طرح زیر:

 

 

  background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

 

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

اگر در این مواقع بخواهیم رنگ اصلی را تغییر دهیم, معمولا باید حداقل چهار تغییر انجام دهیم. خوشبختانه راه حل بهتری برای این کار وجود دارد:

به جای اینکه رنگ های اصلی را برای گرادینت در نظر بگیریم, کافی است رنگ اصلی را به background-color بدهیم و رنگ های گرادینت را بصورت شفاف و نیمه شفاف سفید تنظیم کنیم.

 

background: #58a;
background-image: repeating-linear-gradient(30deg,
 hsla(0,0%,100%,.17),
 hsla(0,0%,100%,.17) 15px,
 transparent 0, transparent 30px);

 

نتیجه یکسان خواهد بود اما در زمان تغییر، فقط کافی است رنگ یک مکان، یعنی رنگ پس زمینه را تغییر دهیم. همچنین این کار باعث شد تا یک رنگ background قبل از گرداینت قرار بگیرد و در مرورگرهایی که گرادینت را پشتیبانی نمی کنند, نقش fallback (بازیکن ذخیره :) ) را بازی کند.

 

See the Pen Subtle stripes by Mojtaba Seyedi (@seyedi) on CodePen.

 

بعد از یک مطلب راه راه, یک لبخند راه راه خیلی می چسبه:

 

منبع

• CSS Secrets By Lea Verou