حسین همت یار
فصل چهارم : Properties در CSS
جلسه سوم : ترکیب Gradient با تصویر در background
سلام به همراهان همیشگی مدرسه مجازی ایرانیان
در جلسه ی پیش در رابطه با Multiple Background صحبت کردیم . در این جلسه میخوام نحوه ترکیب چند تصویر و Gradient در پس زمینه رو بهتون آموزش بدم . این عمل هم مثل ترکیب چند تصویر هست که در جلسه ی پیش عنوان کردیم با این تفاوت که در اینجا ما Gradient هم استفاده می کنیم .
ابتدا برای ایجاد Gradient های دلخواه افزونه ی cssSir در فایرفاکس رو دانلود و نصب کنید . Gradient دلخواه خودتون رو ایجاد کنید و کد Gradient رو کپی کنید . (این ابزار تنها یکی از چندین ابزار موجود در این رابطه هست .)
خوب با ذکر مثال این آموزش رو جلو میبریم . به کد زیر توجه کنید :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
background-image:url(image.png), -moz-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* FF3.6+ */ background-image:url(image.png), -webkit-gradient(linear, ۲۷۰deg, color-stop(۱۸%, #fff000), color-stop(۵۱%, #۵aff00), color-stop(۹۲%, #۰۰fffc));/* Chrome,Safari4+ */ background-image:url(image.png), -webkit-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* Chrome10+,Safari5.1+ */ background-image:url(image.png), -o-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* Opera 11.10+ */ background-image:url(image.png), -ms-linear-gradient(۲۷۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* IE10+ */ background-image:url(image.png), linear-gradient(۱۸۰deg, #fff000 ۱۸%, #۵aff00 ۵۱%, #۰۰fffc ۹۲%);/* W3C */ |
در اینجا ما یک Gradient در پس زمینه قرار دادیم و یه تصویر هم روی Gradient در نظر گرفتیم . برای ترکیب تصاویر باید از background-image استفاده کنیم . تصاویری که قراره روی تمامی تصاویر قرار بگیره به ترتیب در ابتدا لحاظ می کنیم .
فکر می کنم با دیدن کد متوجه شده باشید که به چه صورت میتونید Gradient و تصویر رو ادغام کنید . ابتدا با url تصویر مورد نظر رو فراخوانی می کنید سپس کد Gradient رو قرار میدید . هر کد Gradient مخصوص به یک ورژن و یک مرورگر هست که باید هر کد رو در یک خط مجزا قرار بدید .
خوب حالا اگر بخواین برای تصاویرتون position یا repeat تعیین کنید . بصورت زیر عمل می کنید :
|
۱ ۲ ۳ |
background-repeat: no-repeat , repeat; background-position: ۱۸۰px ۱۵px , top right; |
به ترتیب برای هر تصویر یک repeat و یا position تعیین می کنیم . دقیقا به همون ترتیبی که در background-image قرارشون دادیم . مثلا no-repeat برای تصویر هست و repeatبرای Gradient هست یا position با ۱۸۰px 15px رو برای تصویر و position با top right رو برای Gradient تعیین می کنیم .
نتیجه ی کدهایی که نوشتیم به شکل زیر خواهد بود :
خوب دوستان این جلسه هم به اتمام رسید ، در صورتی که سوالی براتون پیش اومد مطرح کنید . در انتها میتونید فایل های این جلسه رو دریافت کنید.
تهیه شده در مدرسه مجازی ایرانیان
غدیره مرادی
