خانه / وبلاگ / آموزش 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;

 

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
لینکدین
اشتراک گذاری در pinterest
پینترست
  • مطالب پیشنهادی
ساخت سایت تالار پذیرایی
آموزش سایت تالار پذیرایی

ساخت سایت تالار پذیرایی

امروزه تشریفات مورد نیاز برای پذیرایی در مراسم های مختلف اعم از عروسی و یا حتی عزاداری از اهمیت ویژه ای برخوردار است. این امر

بیشتر بخوانید »
  • نوشته های مفید
۲۰ ترفند حرفه‌ای جهت نوشتن CSS مدرن
۲۰ ترفند حرفه‌ای جهت نوشتن CSS مدرن
modir روشن اکتبر 18, 2019 بهینه سازی وب سایت
در این پست می خواهیم مجموعه ای از 20 کنفرانس مفید و بهترین شیوه ها را که توسط انجمن CSS توصیه می شود را به اشتراک بگذاریم. برخی از این موارد بیشتر برای مبتدی ها...
مشاهده کامل مطلب
نحوه رفع خطای سرور داخلی در وردپرس
نحوه رفع خطای سرور داخلی در وردپرس
modir روشن اکتبر 18, 2019 بهینه سازی وب سایت
اگر بیش از یک سال است که با محیط وب سر و کار دارید، احتمالا حداقل چند بار با HTTP 500 Internal Server Error  رو به رو شده اید. خطای سرور داخلی یکی از خطاهای...
مشاهده کامل مطلب
پنج راهنمای مهم نگارش سرصفحه برای ترافیک بیشتر سایت
پنج راهنمای مهم نگارش سرصفحه برای ترافیک بیشتر سایت
modir روشن اکتبر 18, 2019 بهینه سازی وب سایت
متغیرهای زیادی برای یک پست خوب وبلاگ وجود دارند. عنوان، سبک نوشتن و کیفیت کلی مطلب. اما اینها در قیاس با سرصفحه اهمیت کمتری دارند. به غیر از تمامی موارد که به آن اشاره شد،...
مشاهده کامل مطلب
آموزش css : قدرت css را در این تصاویر ببینید!
آموزش css : قدرت css را در این تصاویر ببینید!
modir روشن اکتبر 18, 2019 بهینه سازی وب سایت
امروز برای شما پنج تصویر پس زمینه را جهت نمایش قدرت CSS مدرن آماده نموده ایم. می توانید آنها را به عنوان تصاویر پس زمینه دسکتاپ، چشم نواز صفحات فرود و حتی پوسترهای چاپ شده...
مشاهده کامل مطلب

پاسخی بگذارید

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