بکگراند gradient

[dracula_killer]

سلام
اگر دقت کرده باشین بعضی از سایتها،بگراندشون یه رنگه معمولیه،مثلا قرمز.اما قرمزش gradient هست
میخواستم ببینم چجور میشه یه همچین بکگراندی داشت.مطمئناً یه عکس نیست چون اگه عکس بود باید در رزولیشن های مختلف تکرار می شد و ممکن بود یه نواختی بکگراند رو خراب کنه.پس حتما باید یه چیزه دیگه باشه
ممنون میشم جوابمو بدین

[m.m.m5651]

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

[mohrd]

سلام.
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]

ویرایش: متوجه پستهای دوستان نشده بودم.
از CSS3 می تونید استفاده کنید:

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

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
یک اسکریپت پنچر(!) هم من قدیما نوشته بودم شاید بتونه کمکتون کنه
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

[m.m.m5651]

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

[mohrd]

شاید.
بخش دوم روش دوم (که قرون وسطایی نیست)، هیچ مشکلی با هیچ مروگری نداره! (شاید شما درست بکار نمی برید!)
مثلا الان شما همین سایت یا بسیاری سایت ها و انجمن های دیگه رو در مرورگر های مختلف مشکل دار می بینید؟
با یک نگاه ساده به استایل های این صفحه میشه فهمید که این سایت هم از روش repeat استفاده می کنه.

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

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

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

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

[dracula_killer]

ممنون از پاسخ همه ی دوستان
اما الان تمامی مرورگر ها css3 رو پشتیبانی می کنند؟
منظورم بیشتر IE6 هست.میخوام وبی که می سازم کاملا استاندارد باشه و تمام مرورگر ها اون رو بدون مشکل اجرا کنند.

[m.m.m5651]

@mohrd

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

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

====================
====================
به این کد نگاه کنید:

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

میشه این طوری:

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

[mohrd]

خب این روش که روش قرون وسطایی نیست! من گفتم تو روش قرون وسطایی بکگراند کاملا با سایز المنت فیکسه و از repeat استفاده نمیشه. که شما اومدید از repeat استفاده کردید. پس در اصل اومدید ار بخش دوم روش دوم بهره بردید.

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

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

[dracula_killer]

پس نتیجه می گیرم باید بیخیال Css3 بشم
همون عکس بهتره