ساخت طرح های پیچیده در پس زمینه

صورت مسئله

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

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

امروزه خیلی از ما در فرآیند طراحی صفحات وب از پیش پردازنده هایی نظیر Sass و Less و یا Stylus کمک می گیریم. ساخت اینگونه طرح ها از مواردی است که پیش پردازنده ها خیلی کمک خواهند کرد.

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

پیشنیازها

1. آشنایی با انواع گرادینت ها
2. روش ساخت پس زمینه های راه راه

 

طرح شبکه ای (Grid)

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

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

 

background-color: white;
background-image: linear-gradient(rgba(255,0,0,.4) 50%, transparent 0),
                  linear-gradient(to right, rgba(255,0,0,.4) 50%, transparent 0);
background-size: 30px 30px;

 

 

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

 

background-color: #58a;
background-image: linear-gradient(white 1px, transparent 0),
                  linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

 

خوبی های این روش به شرح زیر است:

• اگر نیازی به تغییر در طرح باشد پیدا کردن مقداری که باید ویرایش شود خیلی ساده خواهد بود. مثلا اگر بخواهیم خطوط سفید راهنما ضخیم تر شود یا رنگ طرح عوض شود و …
• تعداد تغییرات زیاد نخواهد بود معمولا یک و یا دو تغییر بیشتر مورد نیاز نیست.
• فقط با چهار خط کد به نتیجه می رسیم و حجم, ناچیز (در اینجا 148 بایت) و SVG کمتر خواهد بود.

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

 

background-color: #58a;
background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
                  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0),
                  linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0);                  
background-size: 15px 15px, 15px 15px,
                 75px 75px, 75px 75px;

 

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

 

See the Pen Blueprint grid by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

طرح پولکا (خال خال)

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

 

background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px; 

 

 

مسلما طرح بالا خیلی ساده است. ولی می توان با دو گرادینت اینگونه بر روی هم و تنظیم background-position متفاوت برای آنها یک طرح پولکا بسازیم:

 

background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
                  radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px; 
background-position: 0 0, 15px 15px;

 

 

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

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

 

See the Pen Polka dot pattern by Mojtaba Seyedi (@seyedi) on CodePen.

 

همانطور که مشاهده کردید برای این که طرح ساخته شود باید background-position دوم باید نصف اندازه هر کاشی باشد. این بدین معنی است که برای تغییر اندازه هر کاشی باید هر بار چهار تغییر انجام دهیم. در اینجا افرادی که از پیش پردازنده ها استفاده می کنند, می توانند از یک میکسین شبیه به زیر استفاده کنید:

 

@mixin polka($size, $dot, $base, $accent) {
  background: $base;
  background-image:
    radial-gradient($accent $dot, transparent 0),
    radial-gradient($accent $dot, transparent 0);
  background-size: $size $size;
  background-position: 0 0, $size/2 $size/2;
}

 

برای ساخت طرح پولکا کافی است بصورت زیر از این میکسین استفاده کنیم:

 

@include polka(30px, 30%, #655, tan);

 

 

طرح شطرنجی

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

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

 

 

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

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

 

 

راه حل این است که آن مربع را بوسیله ترکیب دو مثلث قائم‌الزاویه, بسازیم.

برای ساخت یک مثلث کافی است به صورت زیر عمل کنیم:

 

background: #eee;
background-image: linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;   

 

 

حال اگر مثلث دیگری بسازیم و با مثلث بالا ترکیب کنیم, دوباره به مربعی خواهیم رسید که فضایی در اطرافش وجود نخواهد داشت و تکرار آن دوباره منجر به پس زمینه ای می شود که شبیه به یک رنگ تخت خواهد بود. پس باید اندازه مثلث ها را به نصف اندازه فعلی کاهش دهیم. پس کافی است به جای 50 درصد, color stop را 25 درصد تنظیم کنیم.

 

background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0);
background-size: 30px 30px;   

 

 

حال کافی است تا مثلث دیگر را در مقابل این مثلث بسازیم:

 

background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;   

 

 

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

 

background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                  linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;   

 

 

ظاهرا به ناکجا آباد می رویم! :)

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

 

background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                  linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;   

 

 

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

 

background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                  linear-gradient(45deg, transparent 75%, #bbb 0),
                  linear-gradient(45deg, #bbb 25%, transparent 0),
                  linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;   

 

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

 

background: #296;

background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,
                  transparent 75%, rgba(0,0,0,.25) 0),

                  linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,
                  transparent 75%, rgba(0,0,0,.25) 0);

background-position: 0 0, 15px 15px;
background-size: 30px 30px;   

 

 

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

 

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

 

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

 

@mixin checkerboard($size, $base, $accent: rgba(0,0,0,.25)) {
  background: $base;
  background-image: linear-gradient(45deg, $accent 25%, transparent 0, transparent 75%, $accent 0),
                   linear-gradient(45deg, $accent 25%, transparent 0, transparent 75%, $accent 0);
  background-position: 0 0, $size $size;
  background-size: 2*$size 2*$size;
}

/* Usage */

div {
  @include checkerboard(15px, #58a, tan);  
}

 

در مورد این طرح بهتر است که از SVG استفاده کنیم. چون هم کد کمتری تولید خواهد شد و هم تغییر آن خیلی راحت تر خواهد بود:

 

background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
            <rect x="50" width="50" height="50" />\
            <rect y="50" width="50" height="50" />\
            </svg>');
background-size: 30px 30px;

 

دموی زیر نمونه این طرح را با استفاده از SVG نمایش می دهد:

 

See the Pen Checkerboard with SVG by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

طرح های بیشتر

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

• lea.verou.me/css3patterns

لینک زیر همان الگوهای بالا هستند که با SVG ساخته شده اند. (همانطور که اول مطلب گفته شد گاهی استفاده از SVG مناسب تر خواهد بود.)

• philbit.com/svgpatterns

و در نهایت می توانید همیشه با ترکیب خاصیت blend-mode با اینگونه طرح ها به نقش و نگارهایی با ظاهر چشم گیر دست پیدا کنید. مجموعه زیر این موضوع را با نمونه های جالبی به خوبی بیان می کند.

• bennettfeely.com/gradients

منبع

• CSS Secrets By Lea Verou

بیشتر بخوانید

• Background Patterns Simplified by Conic Gradients