Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3
امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است، به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود، اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود، لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند
عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

ایجاد بلاک و تصور شفاف با عنصر opacity در css3:


کد زیر مثال استاندارد css3 برای ایجاد بلاک یا تصویر شفاف است، عنصر مربوط به filter برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.
<style type="text/css">
img {
    opacity:0.4;
    filter:alpha(opacity=40);
}
</style>
css opacity filter

 

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


اگرچه خاصیت opacity در css3 به صورت استاندارد تعریف شده است، اما برخی از مرورگرهای قدیمی تر از آن به صورت کامل پشتیبانی نمی کنند، کلاس زیر نمونه ی تقریبا کاملی است که از هر جهت با اکثر مرورگرهای موجود، تطبیق دارد.
.transparent {
    width: 100%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
پیش نمایش
توضیح:
- خط اول کد (width: 100%) برای ورژن های قدیمی مرورگر اکسپلورر (5، 6 و 7) نیاز است (به جای آن می توانید از مقادیر zoom: 1 استفاده کنید).
- مقادیر ms-filter و filter برای ایجاد حالت شفافیت در اینترنت اکسپلورر کاربرد دارد.
- moz-opacity و khtml-opacity برای ورژن های قدیمی مرورگر فایرفاکس (Firefox) و سافاری (Safari) است.
- opacity نیز خاصیتی استاندارد در css3 است.
- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.
- به کار بردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز خود را با ویژگی های css3 تطبیق نداده اند، موجب نامعتبر تلقی شدن کد css گردد که البته چندان جدی نیست.


1394/05/30 10:10:21 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما