خانه / آموزش css : قدرت css را در این تصاویر ببینید!

آموزش css : قدرت css را در این تصاویر ببینید!

امتیاز دهید
آموزش css : قدرت css را در این تصاویر ببینید!
امتیاز دهید

امروز برای شما پنج تصویر پس زمینه را جهت آموزش CSS مدرن آماده نموده ایم. می توانید آنها را به عنوان تصاویر پس زمینه دسکتاپ، چشم نواز صفحات فرود و حتی پوسترهای چاپ شده استفاده کنید. در مقاله زیر نیز برخی از تکنیک های CSS کلیدی را به طوری که می توانید آنها را به دلخواه خود سفارشی  و یا آن ها را از ابتدا ایجاد کنید، مرور می نماییم.

Designها

Polyscape که به اختصار (poly = many, scape = scenery) است یک تصویر حاوی چند عکس متحرک است که تصاویر بسیار جذاب سورئالیستی را ایجاد می کند. عموما چنین طراحی هایی در فتوشاپ یا دیگر نرم افزار های ویرایش تصویر انجام می شود، اما با توجه به خاصیت های در حال رشد  CSS، اکنون می توانید چند polyscape عالی را تنها با استفاده از تکنولوژی های ساده وب ایجاد نمایید!

نکته: می توانید طرح ها را در یک برنامه آزمایشی ایجاد کنید، اما برنامه آزمایشی از ویژگی های CSS  تجربی استفاده می کند که ممکن است در تمام مرورگرها کار نکند.

پلی اسکپ یک کوه با سی اس اس

 

ساخت این چیدمان بسیار آسان است و دارای روند بسیار سرگرم کننده ای می باشد. برای background (پس زمینه) از از تصاویر Unsplash استفاده نموده ایم. دیگر موارد از طریق شکل های مختلف  CSS، تبدیل ، فیلتر و انجام می شوند.

 

Shapeهای CSS

طرح های مختلف اشکال هندسی ساخته شده از CSS استفاده می کنند  و نحوه چگونگی کار آن ها در زیر آمده است:

  • Squares: بلوک های HTML به طور پیش فرض مستطیل شکل می باشند و تنها کافی است تا height (ارتفاع) و width (عرض) را انتخاب کنید.  برای تبدیل آنها به سمت چپ ما از  ;(transform: rotate(45deg استفاده می کنیم.
  • Circles: شکل های دایره ای در CSS را می توان با افزودن ;border-radius: 50% ایجاد کرد.
  • Triangles و Diamonds : اینکار به لطف clip-path امکان پذیر است.

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

مربع های تیز شده با پس زمینه شفاف و بوردر تیز شده

 

به نظر می رسد یک مشخصه CSS وجود دارد و دقیقا همین کار را انجام می دهد، نام آن  border-image  است و پارامترها مسیر تصویر، اندازه border و نحوه قرار دادن تصویر را می گیرد.

background: transparent;                 
border: 25px solid transparent;          
border-image: url(clouds.jpg) 25 stretch;

 

مطلب پیشنهادی: ۲۰ ترفند حرفه‌ای جهت نوشتن CSS مدرن

 

Filterهای CSS

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

این خاصیت به ما اجازه تغییر از یک رنگ به رنگ دیگر، افزایش کنتراست، ایجاد همه چیز سیاه و سفید و دیگر امکانات را می دهد. در اینجا لیستی از تمام فیلترهای موجود CSS وجود دارد:

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

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

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

 

از اینکه با این مقاله با ما همراه بودید کمال تشکر را داریم لطفا نظرات خود را با ما در میان بگذارید!

اگر این مقاله برای شما مفید بود لطفاً به آن ستاره بدهید

امتیاز دهید
اشتراک گذاری در telegram
تلگرام
اشتراک گذاری در whatsapp
واتس آپ
اشتراک گذاری در facebook
فیس بوک
اشتراک گذاری در linkedin
لینکدین
اشتراک گذاری در twitter
تـوئیـتر
طراحی سایت استخدام
طراحی سایت

طراحی سایت استخدام

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

ادامه مطلب »

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

تماس بگیرید : 02133720934