PDA

نسخه کامل مشاهده نسخه کامل : بکگراند gradient



dracula_killer
26-08-2011, 20:04
سلام
اگر دقت کرده باشین بعضی از سایتها،بگراندشون یه رنگه معمولیه،مثلا قرمز.اما قرمزش gradient هست
میخواستم ببینم چجور میشه یه همچین بکگراندی داشت.مطمئناً یه عکس نیست چون اگه عکس بود باید در رزولیشن های مختلف تکرار می شد و ممکن بود یه نواختی بکگراند رو خراب کنه.پس حتما باید یه چیزه دیگه باشه
ممنون میشم جوابمو بدین:11:

m.m.m5651
26-08-2011, 20:50
نه، این عکسه ولی بهش repeat:repeat-y دادن و باعث شده که دیگه تکرار نشه + یه بک گراند color با رنگ آخرین تکه ی عکس بک گراند می ذارن و باعث میشه خالی نمونه قسمت های تکرار نشده ی بک گراند. البته شاید در مورد y هم اشتباه کنم x باشه. باید خودتون یا امتحان کنید یا تو نت بگردید.
=========================
=========================
پس از ویرایش:
بهتر هم بود که سورس قالب رو نگاه کنید. چون ممکنه از هر ترفندی استفاده کرده باشن. (حتی روش قرون وسطی ای :دی)

mohrd
26-08-2011, 21:08
سلام.
2 روش کلی برای قرار دادن gradient وجود داره:
1. استفاده از امکانات CSS 3، اطلاعات بیشتر در این صفحه:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید2. استفاده از تصویر.
یک روش که فکر نکنم جایی استفاده بشه (مگر در صفحات استاتیک قرون وسطا!) اینه که روی یک عکس به اندازه فضایی که نیاز هست gradient مورد نظر رو اعمال می کنند و اون تصویر رو به عنوان background اون المنت قرار می دهند.

روش دیگه ای که بیشتر استفاده میشه اینه که یک قسمت از gradient رو که قراره تکرار بشه ذخیره می کنند و اون رو به عنوان background قرار می دهند. و با استفاده از مشخصه background-repeat، تعیین می کنند که تصویر افقی تکرار بشه، عمودی یا هر دو.
فرضا، یک div داریم با پهنای 500px و ارتفاع 250px. یک فایل با همین سایز در فتوشاپ (و یا هر برنامه دیگری) ایجاد می کنیم و gradient مورد نظر (از قرمز به سفید) رو اعمال میکنیم. اگر gradient ما افقی باشه (منظورم اینه که بالای تصویر قرمز رنگ و پایین سفید رنگ باشه) به این معنیه که یک بخش از تصویر، به پهنای 1px و ارتفاع 250px، به اندازه ی پهنای تصویر تکرار میشه. پس؛ ما می تونیم همین 1px در 250px رو جدا کنیم و به عنوان background قرار بدیم. سپس background-repeat رو افقی، یعنی repeat-x بذاریم.
حالا این سؤال مطرح میشه که اگر ارتفاع div ما بیشتر از 250px شد (مثلا متن زیادی داشت) چی میشه؟ اینجوری که فقط 250px اون gradient داره. برای رفع این مشکل، می تونیم به مرورگر بگیم که اول gradient ما رو بذار، اگر ارتفاع بیشتر شد، جاهای خالی رو با یک رنگ پر کن. (که در اینجا اون یک رنگ، رنگ سفید یعنی #fff هست)

پس از اینکه این بخش از تصویر رو جدا و ذخیره کردیم، از از کد css (البته خلاصه شده) استفاده می کنیم:

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

موفق باشید ./.

پ ن: @استارتر: شاید شما بیشتر این مطالب رو بدونید، اما شاید خیلی از کاربران از این روش ها بی اطلاع باشند. بخشی از مطلب من پاسخ شماست.

eAmin
26-08-2011, 21:16
ویرایش: متوجه پستهای دوستان نشده بودم.
از CSS3 می تونید استفاده کنید:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
منبع ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])
یک اسکریپت پنچر(!) هم من قدیما نوشته بودم شاید بتونه کمکتون کنه:دی
JavaScript Gradient ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])

m.m.m5651
26-08-2011, 21:17
ولی اون روش قرون وسطاییه فکر کنم بهتره. چون هم به همه ی مرورگرها میخوره هم اینکه راحت تره. :دی
البته از نظر من.
مثلا الان css 3.00 رو موبایل ها اکثرا پشتیبانی نمی کنن.
=====================
پس از ویرایش:
=====================
@ AminEhelp دمتون گرم اون جاواتون معرکست!
البته من خودم از photoshop استفاده می کنم. :دی

mohrd
26-08-2011, 21:43
شاید.
بخش دوم روش دوم (که قرون وسطایی نیست)، هیچ مشکلی با هیچ مروگری نداره! (شاید شما درست بکار نمی برید!)
مثلا الان شما همین سایت یا بسیاری سایت ها و انجمن های دیگه رو در مرورگر های مختلف مشکل دار می بینید؟
با یک نگاه ساده به استایل های این صفحه میشه فهمید که این سایت هم از روش repeat استفاده می کنه.

در صورت استفاده از روش قرون وسطایی، تنها وقت + حجم اینترنت کاربر رو اسراف می کنید. و تصویر اضافه رو به کاربر تحمیل می کنید.

در ضمن، اگر شما از روش قرون وسطایی (چه اسمی!) استفاده کنید، در صورتی که ارتفاع المنت بیشتر از تصویر شما بشه چه کار خواهید کرد؟ لابد تصویرتون رو با سایز 2000px در 2000px انتخاب میکنید که هیچ مشکلی نباشه!

موفق باشید ./. :20:

ادیت: در مورد استفاده از کد جاوا اسکریپت: شاید کاربر جاوا اسکریپتش رو غیر فعال کرده باشه، و یا از مرورگری که جاوا اسکریپت رو پشتیبانی نمی کنه استفاده کنه، اون وقت شما می خواهید کاربر رو اجبار کنید که جاوا اسکریپت رو فعال کنه؟!

dracula_killer
26-08-2011, 21:54
ممنون از پاسخ همه ی دوستان
اما الان تمامی مرورگر ها css3 رو پشتیبانی می کنند؟
منظورم بیشتر IE6 هست.میخوام وبی که می سازم کاملا استاندارد باشه و تمام مرورگر ها اون رو بدون مشکل اجرا کنند.

m.m.m5651
26-08-2011, 23:16
@mohrd

در صورتی که ارتفاع المنت بیشتر از تصویر شما بشه چه کار خواهید کرد؟ لابد تصویرتون رو با سایز 2000px در 2000px انتخاب میکنید که هیچ مشکلی نباشه!

موفق باشید ./. ====================
====================
به این کد نگاه کنید:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنیدمیشه این طوری:
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
که حدود 1 سانت آخر = با: background-color: #FB2501; !
که حجم تصویر = با: 11.9Kb معادل جمعا یک ثانیه برای اینرنت های دایل آپی (قرون وسطایی 2 :دی) میشه!
==================
==================
پس از ویرایش:
البته همچین هم به نظر نمیاد اون یه سانت آخر رنگش یکی باشه :دی مشکل از عکاسی منه ببخشید!

mohrd
27-08-2011, 11:22
خب این روش که روش قرون وسطایی نیست! من گفتم تو روش قرون وسطایی بکگراند کاملا با سایز المنت فیکسه و از repeat استفاده نمیشه. که شما اومدید از repeat استفاده کردید. پس در اصل اومدید ار بخش دوم روش دوم بهره بردید.

_____
در مرورگر های ماکروسافت فقط IE 9 رو CSS 3 پشتیبانی میکنه. سایر مرورگر ها هم معمولا نسخه های جدیدشون CSS 3 رو پشتیبانی میکنند (البته مرورگر های Mozilla و Webkit برخی از دستورات css 3 رو با شیوه ی مخصوص به خودشون دارند. در همون صفحه ای که گذاشتم می تونید ببینید)

موفق باشید ./.

dracula_killer
27-08-2011, 23:30
پس نتیجه می گیرم باید بیخیال Css3 بشم
همون عکس بهتره

m.m.m5651
10-09-2011, 22:09
در مرورگر های ماکروسافت فقط IE 9 رو CSS 3 پشتیبانی میکنه.
من با مرورگر IE 9 کد css ی که amin ehelp گذاشتن رو نتونستم ببینم! پس زمینه سفید افتاد! فکر کنم پشتیبانی نمی کنه. :41:

eAmin
11-09-2011, 13:00
من با مرورگر IE 9 کد css ی که amin ehelp گذاشتن رو نتونستم ببینم! پس زمینه سفید افتاد! فکر کنم پشتیبانی نمی کنه. :41:
IE9 بعضی از خاصیتهای CSS3 پشتیبانی نمیکنه، مثل gradient و text-shadow پشتیبانی نمیکنه که لیست کامل تر رو می تونید در اینجا ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])مشاهده کنید.
اگر میخواید این مشکل رو حل کنید، می تونید از filter ها و یا از VML استفاده کنید.
یک مثال با استفاده از filter:

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