• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
استفاده ار Radius و Shadow و Gradiant در IE
#1
سلام

همون طور که همه ی طراحان وب میدونن "اینترنت اکسپلورر" همیشه ساز مخالف میزنه !!!

و خیلی از خاصیت ها رو پشتیبانی نمیکنه . چند تا از خاصیت هایی که پشتیبانی نمیکنه radius ( برای گرد کردن گوشه ) box-shadow ( برای سایه دادن به المنت ) و linear-gradient ( که از اسمش معلومه برای ایجاد پس زمینه های دو رنگ ) هستن .

ولی خوشبختانه این سایت Heart ( و البته سایت های دیگر ) یه راهی رو به ما معرفی میکنن که خیلی خوبه Smile

اسم این روش pie یا ( Progressive Internet Explorer ) هستش و فقط کافیه که یه فایل که حاوی اسکریپت pie هست رو بارگذاری کنین.

و برای هر المنتی که قراره با این اسکریپت این خاصیت ها بهش اضافه بشن خاصیت behavoir رو برابر آدرس فایل قرار بدین ...

مثلا :

کد:
.pie{
    behavior: url(PIE.htc);
}

توی فایلی که ضمیمه کردم میتونین نحوه استفاده رو کامل ببینید . ( مثال همین سایت که معرفی کردمه )

پ ن : من همیشه به این قضیه اهمیت میدم که سایت توی مرورگرهای مختلف رفتار یکسان نشون بده.
قبلا برای گرد کردن گوشه ها از عکس استفاده میکردم ولی خیلی محدودیت ایجاد میکرد!! ( مثلا اگه عرض المنت ثابت نبود )
ولی الان دیگه خیلی راحت هم میتونم دکمه های قشنگ با css بسازم و هم قالب سایت توی همه مرورگر ها زیبا باشه.

از اونجایی که حجم این فایل 40 کیلوبایته و شاید به نظر اضافه بیاد بهتره فقط در صورتی که مرورگر IE بود بارگذاری بشه ( توی مثالی که ضمیمه کردم همین اتفاق میفته )


فایل‌های پیوست
.zip   pie.zip (اندازه 17.22 KB / تعداد دانلود: 13)
  پاسخ
تشکر شده توسط : masoudmanson undefined oia Reza
#2
یادمه یه سال پیش با این pie یه مشکل در حد مرگ داشتم که کلا بیخیالش شدم
ولی مشکله یادم نیست Big Grin
  پاسخ
تشکر شده توسط :
#3
در حالت a:hover برای لینک ها که رادیوس خورده ، کار نمیکنه!
وبلاگ rezaonline.net/blog
سفارش برنامه نویسی reza.biz
Php , mysql , postgresql , redis , Yii and ... Cool
  پاسخ
تشکر شده توسط : ali786
#4
رضا کد بده ببینم .
باید کار کنه !!

کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3</title>

<style>
#demo{
    border: 1px solid #696;
    padding: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 100px;
}

#demo:hover {
    background:#999999;
    border: 1px solid #696;
}
</style>
<!--[if lt IE 9]>
  <style>
      .pie{
          behavior: url(PIE.htc);
       }
   </style>
<![endif]-->
</head>

<body>
<a href="#" id="demo" class="pie">Demo</a>


</body>
</html>


فایل‌های پیوست تصاویر بندانگشتی
   
  پاسخ
تشکر شده توسط :
#5
فقط در حالت hover رادیوس بگیره .
اینومثلاً چک کن (الان نوشتم)

کد:
<style>
a
{
    display:inline-block;
    color:red;
}

a:hover
{
    border-radius:8px;
    color:green;
}

</style>

<a class='pie' href='#'>Test</a>
وبلاگ rezaonline.net/blog
سفارش برنامه نویسی reza.biz
Php , mysql , postgresql , redis , Yii and ... Cool
  پاسخ
تشکر شده توسط :
#6
خب رضا تو که اصلا border ندادی که بخواد radius بگیره .
مگه این کد توی FF بهت radius میده ؟
اگه border بدی درست میشه.
کد:
a:hover
{
    border: 1px solid #696;
    border-radius:8px;
    color:green;
}
  پاسخ
تشکر شده توسط :
#7
نمیدونم گفتم یه چی نوشتم دیگه
بذار الان پیداش میکنم استایل رو بهت میدم
کد:
#m-menu li {
  float: right;
  margin-right: 10px;
}

#m-menu li:hover {
  background: #FB9E00 url(pic/mhover.png) repeat-x;
  border-radius: 15px;
  -o-border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
}

#m-menu a {
  color: #524E4E;
  text-shadow: 0px 0px 0 #D3D1D1;
  -o-text-shadow: 1px 1px 0 #D3D1D1;
  -webkit-text-shadow: 1px 1px 0 #D3D1D1;
  -moz-text-shadow: 1px 1px 0 #D3D1D1;
  -ms-text-shadow: 1px 1px 0 #D3D1D1;
  padding: 6px 10px 6px 12px;
  display: block;
}

#m-menu a:hover {
  color: white;
}
وبلاگ rezaonline.net/blog
سفارش برنامه نویسی reza.biz
Php , mysql , postgresql , redis , Yii and ... Cool
  پاسخ
تشکر شده توسط :


پرش به انجمن:


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