در این آموزش برای شما 5 پس زمینه برای نمایش قدرت css مدرن آماده کرده ایم. این تصاویر بعنوان تصویر پس زمینه دسکتاپ شما، landing pages چشم نواز و هر پوستر چاپی می توانند استفاده شوند. در این آموزش نکات تکنیکی و کلیدی css را به شما آموزش خواهیم داد، تا بتوانید تصاویر را به دلخواه شخصی سازی کرده و یا خود از ابتدا بسازید.

طراحی

Polyscape (Poly=چند، scape=منظره ) تصویری است که شامل چندتصویر میکس شده در یک تصویر و ایجاد تصاویر بسیار جذاب سورئالیستی است. معمولا این طرح ها در فتوشاپ  یا سایر نرم افزار های ویرایش عکس طراحی می شوند، اما به لطف قالبلیت های جدید css می توانیم تصاویر Polyscape  فوق العاده را فقط با استفاده از تکنولوژی های تحت وب طراحی کرد.

تصاویر Polyscape به راحتی  قابل طراحی هست و از پروسه طراحی این تصویر لذت خواهید برد. برای تصویر پس زمینه از  Unsplash استفاده می کنیم. موارد دیگر را با استفاده از Shape های مختلف css، transform ها و فیلتر ها طراحی می کنیم.

اشکال CSS

این  طرح  ها از اشکال  هندسی  متنوعی که با استفاده از css  درست می شوند، طراحی می شوند.  در اینجا روش استفاده از این اشکال را  می بینیم:

• مربع: بلاک های html هستند که بوسیله height و width مستطیل شکل شده اند. برای چرخش مستطیل نیز از ;(transform: rotate(45deg استفاده می کنیم.
• دایره : اشکال دایره ای در css  با اضافه کردن ;border-radius: 50%  به مربع ساخته می شود.
• مثلث و الماس: با استفاده از clip-path.  می توان اشکال مثلثی و الماس شکل ساخت.

یکی دیگر از اشکال جالب CSS ، یک مربع شفاف است که  مرز آن کاملا مشخص است:

یکی از دستورات CSS دقیقا همین کار را انجم میدهد که border-image  نام دارد و مسیر تصویر ، اندازه حاشیه و  چگونگی قرار گرفتن در تصویر را بعنوان پارامتر می پذیرد.

background: transparent;

border: 25px solid transparent;

border-image: url(clouds.jpg) 25 stretch;

فیلتر های CSS

از آنجا که ما تصاویری را روی تصویر پس زمینه اضافه می کنیم، در بسیاری از موارد نیاز داریم فیلتر هایی را به کار بریم تا هر دو View دیده شوند .بیشتر مرورگر های مدرن امروزی  از این ویژگی های filter پشتیبانی می کنند.

با کمک filter می توان  hue  تصویری را  به رنگ دیگر تغییر  داد، کنتراست را تقویت کرد،  هر تصویری را black-and-white کرد و … . لیست فیلتر های css به شرح زیر است:

• grayscale
• hue-rotate
• invert
• contrast
• blur
• brightness
• opacity
• saturate
• sepia
• drop-shadow

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

filter: hue-rotate(60deg) contrast(200%) blur(2px);

دمو