در این آموزش برای شما 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);