آموزش طراحی وب

ترکیب Gradient با تصویر در background

در این جلسه ی آموزشی نحوه ترکیب تصاویر با Gradient در Background را می آموزید .

ترکیب Gradient با تصویر در background

فصل چهارم : Properties در CSS

جلسه سوم  : ترکیب Gradient با تصویر در background

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در جلسه ی پیش در رابطه با Multiple Background صحبت کردیم . در این جلسه میخوام نحوه ترکیب چند تصویر و Gradient در پس زمینه رو بهتون آموزش بدم . این عمل هم مثل ترکیب چند تصویر هست که در جلسه ی پیش عنوان کردیم با این تفاوت که در اینجا ما Gradient هم استفاده می کنیم .

ابتدا برای ایجاد Gradient های دلخواه افزونه ی cssSir در فایرفاکس رو دانلود و نصب کنید . Gradient دلخواه خودتون رو ایجاد کنید و کد Gradient رو کپی کنید . (این ابزار تنها یکی از چندین ابزار موجود در این رابطه هست .)

خوب با ذکر مثال این آموزش رو جلو میبریم . به کد زیر توجه کنید :

 

در اینجا ما یک Gradient در پس زمینه قرار دادیم و یه تصویر هم روی Gradient در نظر گرفتیم . برای ترکیب تصاویر باید از background-image استفاده کنیم . تصاویری که قراره روی تمامی تصاویر قرار بگیره به ترتیب در ابتدا لحاظ می کنیم .

فکر می کنم با دیدن کد متوجه شده باشید که به چه صورت میتونید Gradient و تصویر رو ادغام کنید . ابتدا با url تصویر مورد نظر رو فراخوانی می کنید سپس کد Gradient رو قرار میدید . هر کد Gradient مخصوص به یک ورژن و یک مرورگر هست که باید هر کد رو در یک خط مجزا قرار بدید .

خوب حالا اگر بخواین برای تصاویرتون position  یا repeat تعیین کنید . بصورت زیر عمل می کنید :

 

به ترتیب برای هر تصویر یک repeat و یا position تعیین می کنیم . دقیقا به همون ترتیبی که در  background-image قرارشون دادیم . مثلا no-repeat برای تصویر هست و  repeatبرای Gradient هست یا position با  ۱۸۰px 15px رو برای تصویر و  position با  top right رو برای Gradient تعیین می کنیم .

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

 1

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

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

ثبت دیدگاه

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین