• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ساخت پس زمینه gradient با css
#1
سلام،
یه زمانی یادمه هرکی هرچی تو فتوشاپ طراحی می کرد یه عکس ازش سیو می گرد بعد در پوسته اش استفاده می کرد. اما الآن خیلی کارها به راحتی با css شدنیه. مثلاً همین ساخت پس زمینه گرادینت. منظور از گرادینت همون پس زمینه ای هست که از بالا به پایین دو رنگ استفاده میشه و با هم ترکیب میشن.
کد:
background: linear-gradient( #ffffff, #000000 );
این دستور اصلیشه که بجای رنگ ها میتونید رنگ درخواهتون رو قرار بدید. از چپ به راست: رنگ بالا و رنگ پایین
حالا اگر بخواید در مرورگر های مختلف پشتیبانی بشه من همه رو براتون در زیر می نویسم.
کد:
background: -moz-linear-gradient( #ffffff, #000000 );
background: -khtml-linear-gradient( #ffffff, #000000 );
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#000000));
background: -ms-linear-gradient( #ffffff, #000000 );
background: -o-linear-gradient( #ffffff, #000000 );

برای اینکه در IE هم ردیفش کنید به این پست صالح سوزنچی گل توجه کنید.


موفق باشید،
علیرضا
غایب
  پاسخ
تشکر شده توسط : paull .php hidensoft parvane masoudmanson oia
#2
من تست کردم کار نکرد
البته کد ها مو تو دریم ویور 8 نوشتم

میشه راهنمایی کنید؟
  پاسخ
تشکر شده توسط :
#3
این هم یک نمونه برای تکمیل صحبت های آقا علیرضای عزیز :
دمو :
http://www.threestyles.com/CSS3-login-form.html
آموزش :
http://www.threestyles.com/tutorials/css...-tutorial/
  پاسخ
تشکر شده توسط : .php cyletech bcmodir
#4
البته اجراش فقط در مرورگر های پشتیبان کننده از CSS3 امکان پذیره
و به همین دلیله که فعلا نمیشه روش با یقین تکه کرد ///
امان از IE6 و ...
  پاسخ
تشکر شده توسط : hidensoft
#5
parsisport عزیز شما با چه مرورگی امتحان کردی؟ اگر از هر نسخه IE استفاده می کنی ، در آخر پستم یک لینک دادم. از اون استفاده کن تا در IE هم کار کنه. ولی در کل مشکلی نیست ! خودم هم استفاده می کنم. البته یه راه دیگه هست و اونم استفاده از rgba هست که خیلی سخته بخواید اون رو یاد بگیرید و همینطور از روشی که در همون لینک گفته شده پشتیبانی نمی کنه. برای همین این بهترین و ساده ترین روش برای ساخت چنین پس زمینه هایی هست. به امید مرورگر هایی بهتر و منقرض شدن نسل IE
غایب
  پاسخ
تشکر شده توسط :
#6
میخواستم بدونم آیا css3 باید در محیط خاصی نوشته بشه؟

من در دریم ویور 8 مینویسم
اصلا این ورژن css از کجا باید مشخص بشه کد خاصی باید اضافه کنم تا بفهمه css 3 هست یا نه؟
  پاسخ
تشکر شده توسط :
#7
(۱۳۹۰ تير ۳۰, ۰۴:۳۳ ب.ظ)parsisport نوشته: میخواستم بدونم آیا css3 باید در محیط خاصی نوشته بشه؟

من در دریم ویور 8 مینویسم
اصلا این ورژن css از کجا باید مشخص بشه کد خاصی باید اضافه کنم تا بفهمه css 3 هست یا نه؟

اره باید این کدو اضافه کنی
کد پی‌اچ‌پی:
<link rel="stylesheet" type="text/css" media="screen" href="namecss.css" /> 

توی دریم ویور کداتو مینویسی و با پسوند css ذخیره میکنی

وبا لینک بالا فراخوانی میکنی
وبه جای namecssاسم فایل css رو جایگزین میکنی تمام/
  پاسخ
تشکر شده توسط : paull
#8
نقل قول:میخواستم بدونم آیا css3 باید در محیط خاصی نوشته بشه؟
شما استایلتو تعریف می کنی بعد مرورگری که کاربر سایت باهاش کار می کنه باید css3 رو ساپورت کنه .
این لینکا رو یه نگاهی بنداز :
http://forum.iranphp.org/Thread-%DA%86%D...%88-html-5
http://www.impressivewebs.com/css3-browser-support/
  پاسخ
تشکر شده توسط :
#9
نقل قول:اره باید این کدو اضافه کنی
ربطی به این کد نداره. این کد اصطلاحاً استایل خارجی یا همان external stylesheet هست. در کل css با css3 از لحاظ ساختاری فرقی نداره فقط ویژگی هاش کم و زیاد شده و مشکلاتش برطرف شده و غیره ولی روش استفاده ازش همون روش هست.
پیشنهاد می کنم یک ویرایشگر خوب برای css در نظر بگیرید که css3 هم پشتیبانی کنه. زیرا که کارتون رو راحت تر می کنه و مسلماً تمیز تر.
غایب
  پاسخ
تشکر شده توسط :
#10
اگر بخواید برای مرورگر دغون IE هم این چنین پس زمینه بسازید می تونید پراپرتی filter رو این چنین تنظیم کنید:
کد:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');
همچنین یک نکته که باید بدونید اینه که پس زمینه گرادینت ممکنه درست کار نکنه یعنی تمام صفحه نباشه. وقتی به این مشکل بر خوردید هیچ موردی نداره ، کافیه رنگ پس زمینه را برابر رنگ آخر گرادینت قرار بدید مثل زیر:
کد:
background-color: #000000;
غایب
  پاسخ
تشکر شده توسط : azadmol


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان