نحوه استفاده از گرادیانت

[great2012 79]

سلام دوستان من با استفاده از این سایت یک گرادیانت درست کردم که کدش این شد:

background: #cfe7fa; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #cfe7fa 0%, #cfe7fa 31%, #cfe7fa 49%, #cfe7fa 83%, #6393c1 94%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#cfe7fa), color-stop(31%,#cfe7fa), color-stop(49%,#cfe7fa), color-stop(83%,#cfe7fa), color-stop(94%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* IE10+ */
background: radial-gradient(ellipse at center,  #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

حالا من باید کد رو همین طوری در استایل قرار بدم یا فقط قسمتی که لازمه رو قرار بدم؟

چون با inspect element کروم بعضی از کد ها به نظر میاد که مشکل دارن یا این که اصلا استفاده نمیشن.

با تشکر

[سعید شعبانی 2047]

سلام دوستان من با استفاده از این سایت یک گرادیانت درست کردم که کدش این شد:

background: #cfe7fa; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #cfe7fa 0%, #cfe7fa 31%, #cfe7fa 49%, #cfe7fa 83%, #6393c1 94%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#cfe7fa), color-stop(31%,#cfe7fa), color-stop(49%,#cfe7fa), color-stop(83%,#cfe7fa), color-stop(94%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* IE10+ */
background: radial-gradient(ellipse at center, #cfe7fa 0%,#cfe7fa 31%,#cfe7fa 49%,#cfe7fa 83%,#6393c1 94%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

حالا من باید کد رو همین طوری در استایل قرار بدم یا فقط قسمتی که لازمه رو قرار بدم؟

چون با inspect element کروم بعضی از کد ها به نظر میاد که مشکل دارن یا این که اصلا استفاده نمیشن.

با تشکر

اگر می خواهید تا در اکثر مرورگر ها گرادیانت ساخته شده نشان داده شود باید از تمام کد ها استفاده کنید

[great2012 79]

اگر می خواهید تا در اکثر مرورگر ها گرادیانت ساخته شده نشان داده شود باید از تمام کد ها استفاده کنید

یعنی همه ی کد ها رو با هم استفاده کنم؟

ببینید الان که با هم استفاده می کنم برای ie 9 درست نمایش داده نمیشه با این که بنظر میاد کدی برای ie 9 وجود داره.

برای ie لازمه در استایل جدا بزارم؟

[great2012 79]

همین الان دیدم متل اینکه برای ie باید به هر گرادیانت استایل "gradient" بدم و بعد این کد رو به هدر اضافه کنم چجوری به هر گرادیانت استایل "gradient" رو بدم؟

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
	   filter: none;
    }
  </style>
<![endif]-->

[سعید شعبانی 2047]

همین الان دیدم متل اینکه برای ie باید به هر گرادیانت استایل "gradient" بدم و بعد این کد رو به هدر اضافه کنم چجوری به هر گرادیانت استایل "gradient" رو بدم؟

<!--[if gte IE 9]>
<style type="text/css">
.gradient {
	 filter: none;
}
</style>
<![endif]-->

زمانی که با این سایت کد گرادیانت را می سازید تیک دو گزینه IE و IE9 Support را هم بزنید تا کد برای اون ها هم نوشته بشه. اینجوری دیگه نیاز نیست که شما برای هر مرورگر یک فایل استایل جدا بسازید. برای مرورگرهایی هم که از گرادیانت پشتیبانی نمی کنند می توانید از عکس استفاده کنید

ویرایش شده خرداد 92 توسط سعید شعبانی

[someone 69]

ممنون

فقط جایی وجود داره که css رو به عکس تبدیل کنه؟

[سعید شعبانی 2047]

ممنون

فقط جایی وجود داره که css رو به عکس تبدیل کنه؟

lمنظورتون رو نمی فهمم. خوب با اعمال کد های css به المان ها در صفحه وب می توان خروجی آنها را دید.

[someone 69]

lمنظورتون رو نمی فهمم. خوب با اعمال کد های css به المان ها در صفحه وب می توان خروجی آنها را دید.

یعنی شما میگید که از صفحه عکس بگیرم و بعد تبدیل به بکگراند کنم؟

[سعید شعبانی 2047]

یعنی شما میگید که از صفحه عکس بگیرم و بعد تبدیل به بکگراند کنم؟

منظورم این هست که اگر مرورگری از گرادیانت پشتیبانی نمی کنه شما می تونید برای اون مرورگر یک استایل جدا بسیازید و از عکس گرادیانت استفاده کنید. یا اینکه کلا مرورگرهای قدیمی را می توانید بی خیال بشید و فقط رنگ خالی برای اونها بگذارید.