۵ افکت عکس زیبا با استفاده از اشکال و فیلتر های CSS
امروز ما پنج تصویر پس زمینه برای شما آماده کرده ایم که نمایش دهنده ی قدرت CSS مدرن است. آنها را می توان به عنوان پس زمینه ی دسکتاپ، صفحات فرود (Landing Page) چشمگیر، و حتی پوستر پرینت شده استفاده کرد. در مقاله ی زیر همچنین به سراغ برخی از تکنیک های کلیدی CSS می رویم تا بتوانید آن ها را مطابق با سلیقه ی خود تغییر دهید یا از ابتدا آن ها را بسازید.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
طراحی ها
یک Polyscape (معنی : poly به معنی تعداد زیاد، Scape به معنی منظره) تصویری است که حاوی چند عکس ترکیب شده و تبدیل شده به یک تصویر است که تصاویر سورئالیستیک زیبا را ایجاد می کند. معمولا این طراحی ها در فتوشاپ یا نرم افزار های ویرایش عکس دیگر انجام می شود اما با استفاده از منبع همیشه در حال رشد ویژگی های Polyscape ، CSS های عالی را می توان با استفاده از تکنولوژی های ساده ی وب ایجاد کرد.
می توانید دموی این طراحی ها را از اینجا ببینید.
همچنین میتوانید سورس کد کامل این افکت ها رو از طریق دکمه زیر دانلود کنید.
polyscape کوه با اشکال و فیلتر های CSS
ساخت این polyscape ها بسیار آسان بود و در فرآیند ساخت آن سرگرمی زیادی داشتیم. برای پس زمینه ها ما از تصاویری از سایت Unsplash استفاده کردیم. سایر کار ها با استفاده از اشکال، تغییر شکل و فیلتر ها انجام شده است.
اشکال CSS
در این طراحی ها از اشکال هندسی متنوع گرفته شده از CSS استفاده شده است. در اینجا چگونگی انجام آنها توضیح داده شده است:
- مربع ها : قسمت های HTML به صورت پیش فرض مستطیلی هستند. فقط height و width را انتخاب کنید. برای چرخاندن آنها در یک سو از (transform: rotate(45deg استفاده می کنیم.
- دایره ها : اشکال دایره ای در CSS را می توان با اضافه کردن border-radius: 50% به مربع ایجاد کرد.
- مثلث ها و لوزی ها : با استفاده از clip-path انجام می شود.
یک شکل جالب دیگر CSS که می خواهیم بسازیم یک مربع است که در درونش شفاف است اما تصویری را به عنوان مرز های خود دارد:
مربع های کج شده با پس زمینه ی شفاف و مرز های تصویری
مشخص شد که یک خصوصیت در CSS وجود دارد که دقیقا این کار را انجام می دهد و آن border-image نام دارد و مرز هایی را روی عکس، اندازه مرز ها و چگونگی قراردهی عکس را ایجاد می کند.
1 2 3 4 5 6 |
background: transparent; border: 25px solid transparent; border-image: url(clouds.jpg) 25 stretch; |
فیلتر های CSS
از آنجایی که ما در حال اضافه کردن تصاویری روی تصویری پس زمینه هستیم، در بسیاری از موارد نیازمند استفاده از برخی فیلتر ها برای نشان دادن دو منظره هستیم. اکثر مرورگر های جدید از ویژگی filter پشتیبانی میکنند.
این ویژگی به ما اجازه می دهد تا رنگمایه را از رنگی به رنگ دیگر تغییر بدهیم، مغایرت رنگ را بالا ببریم، همه چیز را سیاه و سفید کنیم و … در اینجا لیستی از همه ی فیلتر های CSS موجود را مشاهده می کنید:
- grayscale
- hue-rotate
- invert
- contrast
- blur
- brightness
- opacity
- saturate
- sepia
- drop-shadow
ما می توانیم تا هر تعداد فیلتر را که می خواهیم ترکیب کنیم تا نتیجه ی مطلوب را به دست بیاوریم.
1 |
filter: hue-rotate(60deg) contrast(200%) blur(2px); |
نتیجه گیری
امیدواریم از آزمایش CSS کوچک ما لذت برده باشید. نمونه و همه ی سورس کدها ۱۰۰% رایگان بوده و شما می توانید از آنها استفاده کرده یا به اشتراک بگذارید یا طراحی آن را تغییر دهید.