طیف رنگی بک گراند [بایگانی]

bbc_sh

پنج شنبه 03 مرداد 1387, 18:02 عصر

سلام دوستان
توی my yahoo بک گراند طوری هست که مثلا بالای صفحه رنگ آبی تیره,همینطوری که میاد پایین روشن میشه و دوباره تیره میشه. از CSS استفاده میشه؟کدش چه طوریه؟

m.hamidreza

پنج شنبه 03 مرداد 1387, 18:07 عصر

رجوع شود به :
Photoshop / Gradient

s.mostafa.rahmani

پنج شنبه 03 مرداد 1387, 18:14 عصر

توي يك فايل CSS يا تو خود صفحه:

HTML {
filter: progid:DXImageTransform.Microsoft.Gradient(gradien tType=0,startColorStr=#4f8786,endColorStr=#06322f) ;
}البته اگه تو خود صفحه باشه كه قاعدتاً نياز به <style type="text/css"> هم داره :)

البته اين كد تو فايرفاكس كار نمي‌كنه و فكر مي‌كنم مخصوص Internet Explorer باشه.

bbc_sh

پنج شنبه 03 مرداد 1387, 19:05 عصر

این کد رو به عنوان یه کلاس CSS امتحان کردم.filter رو به عنوان property name سی اس اس نمیشناسه.

jaza_sa

پنج شنبه 03 مرداد 1387, 19:09 عصر

بد نیست به این لینک از MSDN 2008 ی نگاهی بندازی

ms-help://MS.MSDNQTR.v90.en/dhtml/workshop/author/filter/filters.htm

یا حداقل دیدن مثال هاش خالی از لطف نیست :چشمک:

bbc_sh

جمعه 04 مرداد 1387, 10:03 صبح

ببخشید من msdn2008 ندارم.میشه یه منبع دیگه معرفی کنید؟ممنون.

jaza_sa

جمعه 04 مرداد 1387, 14:52 عصر

http://www.mandarindesign.com/opacity.html

bbc_sh

جمعه 04 مرداد 1387, 18:53 عصر

من به این سایته سر زدم ولی جواب سوالمو نگرفتم.توی مثالای سایته از filter توی style استفاده کرده بود.ولی برای من filter رو نمیشناسه.کسی هست که از این روش خودش استفاده کرده باشه؟

HTML {
filter: progid:DXImageTransform.Microsoft.Gradient(gradien tType=0,startColorStr=#4f8786,endColorStr=#06322f) ;
}این کده ظاهرش به نظر معقول و درست میاد ولی نمیدونم چرا کار نمیده.لطفا هرکی از این روش استفاده کرده کمک کنه .ممنون

m.hamidreza

جمعه 04 مرداد 1387, 23:04 عصر

شما بهتره در زمینه Photoshop بیشتر کار کنی تا دنبال افکت و فیلتر باشی! عموم bg اون وب سایت ها یه background-image یه پیکسلی هستن که با فتوشاپ طراحی شدن و در صفحه Repeat میشن.

s.mostafa.rahmani

شنبه 05 مرداد 1387, 17:24 عصر

من خودم از اين كد

HTML {
filter: progid:DXImageTransform.Microsoft.Gradient(gradien tType=0,startColorStr=#4f8786,endColorStr=#06322f) ;
}استفاده كردم و جواب هم داده.

اين هم مثال:

20949
و اين هم تصوير همون مثال:
20950

raravaice

یک شنبه 06 مرداد 1387, 01:27 صبح

من خودم از اين كد استفاده كردم و جواب هم داده.

آوازه این جمله شما توی سایت پیچیده.;)

ببین مصطفی جان filter ها یکی از css های ابداعی مایکروسافت هستند که هدفش این بود یه جوری به عنوان استاندارد W3 معرفیش کنه منتهی مورد قبول قرار نگرفت و فقط توی IE کار میکنن و اگر هم دقت کنی مایکروسافت از IE 6 به بعد این شکست رو خیلی واضح قبول کرده.!!!!
چرا؟
مثلا نمونه Opacity رو در نظر بگیر که توی IE 6 شما باید با فیلتر اعمالش کنی در حالی که بقیه مرورگرها همون Opacity رو قبول میکنن و در حال حاضر IE7 هم از روی اجبار و عقب نموندن از W3 این استاندارد رو پذیرفته.همینطور برای تصاویر PNG

و از اونجایی که یه طراح حرفه ای وب هدفش به دست آوردن طیف وسیعی از بازدیدهاست پس طرحش رو باید با انواع مرورگر ها تطبیق بده خصوصا Firefox پر قدرت وارد میدان شده.

--------------------------------------------
bbc_sh کاملا حق با m.hamidreza هست.
شما داخل فتوشاپ طرحت رو بزن بعد با عرض 1px ذخیرش کن و با Css بده به بک گراند المان مورد نظرت و بهش Repeat بده.طرحهای زیبایی میشه از این کار بدست آورد.

موفق باشید

s.mostafa.rahmani

یک شنبه 06 مرداد 1387, 07:21 صبح

اگر دقت كنيد بنده عرض كردم "فكر كنم مخصوص IEباشه"، ضمن اين روي IE7 و IE8 beta هم كار مي‌كنه.
قبول دارم كه عمومي نيست و روي Firefox و Opera هم امتحان كردم، جواب نداد.
و اين رو هم اضافه كنم كه تو محيط ويژوال استوديو 2008، تو كدهاي CSS زير اين فيلترها خط قرمز مي‌كشه و پيغام مي‌ده كه:
'filter' is not a known property name
اما به هر حال دوستمون سؤالي كردن، و بنده هم جواب دادم.
ضمناً از روشي كه شما فرموديد هم در قسمتهايي از سايتي كه روش كار مي‌كنم استفاده كردم، و البته روي همه Browserها هم جواب مي‌ده :).
موفق باشيد.

bbc_sh

یک شنبه 06 مرداد 1387, 16:55 عصر

ممنون از جوابهاتون. میشه کد اون روش پیکسلی رو بذارین.

s.mostafa.rahmani

یک شنبه 06 مرداد 1387, 17:12 عصر

اين هم يك نمونه كه تو يك جدول استفاده شده:

20979

اين كد مي‌تونه در قسمت بك‌گراند شامل مشخصاتي مثل background-repeat باشه كه اگه اين مشخصه برابر repeat-x باشه فقط افقي تكرار مي‌شه.

<body style=" background-repeat: repeat-x;background-image: url('images/t.jpg');">

moslem.hady

سه شنبه 01 شهریور 1390, 12:09 عصر

طیف رنگی بک گراند یا همون gradient:
http://programmer.persianblog.ir/post/34