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

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

صورت مسئله

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

 
stiped-dress
 

در طراحی صفحات وب همیشه برای ساختن طرح های راه راه به عنوان پس زمینه به سراغ ابزارهایی نظیر فوتوشاپ می رفتیم و با استفاده از تصاویر, به نتیجه می رسیدیم. هنوز هم خیلی از ما از تصاویر کمک می گیریم. اما مشکلی که تصاویر دارند این است که تغییر دادن آنها دردسر زیادی دارد و انعطاف پذیری مناسبی ندارند. راه حل دیگر ساخت این طرح ها, استفاده از 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 در سی اس اس

 

در تصویر بالا مکان های مشخص شده نشان دهنده 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%;

 

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

ساخت راه راه عمودی با گرادینت ها در css

 

راه راه مورب

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

 


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

 

کاشی کاری با گرادینت در css 
 

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

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

 
نحوه ساخت طرح های تکرار پذیر در css
 

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

 


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

 

پس زمینه تکرار پذیر در css
 

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

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

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

 
lg-13
 

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

 
lg-14
 

(مگر اینکه یه نفر تفنگ بزاره روی سرمون بگه: “اگر هر راه دقییییقا 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;

 

lg-15

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

 

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.


 

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

 
گوره خر خندان

منبع