تبلیغات
Fact World - ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3

آموزش برنامه نویسی و مهارتهای وب

article 

ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3

css-transparency

امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است، به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود، اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود، لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند، در این مطلب قصد داریم نحوه ایجاد تصاویر و بلاک های div شفاف را با 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 گردد که البته چندان جدی نیست.
section دسته بندی: آموزش کاربردی - آموزش کاربردی CSS - مهارتهای وب طراحی وب -


یکشنبه 13 مهر 1393

نظرات ()


یکشنبه 15 مرداد 1396 04:06 ب.ظ
Good day! Do you use Twitter? I'd like to follow you if that
would be okay. I'm absolutely enjoying your blog and look forward to new posts.
شنبه 14 مرداد 1396 09:33 ق.ظ
Greetings! I know this is kind of off topic but I was wondering which blog platform
are you using for this site? I'm getting fed up of Wordpress because I've had issues with hackers and I'm looking at options for another
platform. I would be great if you could point me in the direction of a good platform.
جمعه 13 مرداد 1396 06:09 ق.ظ
It's impressive that you are getting ideas from this paragraph
as well as from our discussion made here.
دوشنبه 9 مرداد 1396 09:44 ب.ظ
Hi, I do think this is a great website. I stumbledupon it ;) I will come back yet again since I saved as a favorite it.
Money and freedom is the best way to change, may you be rich and continue to help others.
چهارشنبه 23 فروردین 1396 02:25 ب.ظ
excellent post, very informative. I'm wondering why the opposite specialists of
this sector do not understand this. You must proceed your
writing. I'm sure, you have a great readers' base already!

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )