parsgreen.com
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
related مطالب بیشتر:
» ساخت منوی آبشاری (عمودی) با تگ ul li و css
» آموزش استفاده از فونت فارسی در وب با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» مخفی کردن عناصر وب با CSS
» حذف اسکرول افقی (horizontal scroll) با css
commentنظرات (۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: chmd
زمان: ۱۱:۵۱:۴۵ - تاریخ: ۱۳۹۱/۰۹/۱۱
سلام
می شه بگین این کد ها کجا قرار می گیرن؟
پاسخ: 
سلام
کدهای CSS باید به صورت کلاس، آی دی یا استایل خطی به عناصر HTML نسبت داده شوند، این کار را برای وبلاگ باید در قسمت ویرایش کد قالب انجام دهید و البته باید با استایل نویسی CSS و کدهای HTML تا حدودی آشنا باشید، به طور مثال به یک بلاک DIV به صورت زیر می توان ویژگی های CSS را نسبت داد:
<div style="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;"></div>
نویسنده: fatemeh
زمان: ۰۹:۵۲:۲۲ - تاریخ: ۱۳۹۱/۱۲/۱۷
سلام
خسته نباشید
سایتتون خیلی عالیه
یه سوال کلی
نرم افزاری وجود داره که ما رو تو طراحی قالب کمک کنه
و کار رو برامون راحتتر کنه؟
آخه اگه بخوایم جزء به جزء کار رو خودمون انجام بدیم خیلی سخته!
اگه میشه جوابم رو تو قسمت نظرات وبلاگم بزارید ممنون
پاسخ: 
سلام
تا جایی که اطلاع داریم، نرم افزاری که بدون کدنویسی با آن قالب حرف ای وبلاگ طراحی کنید وجود ندارد، اما برای موارد کم تر حرفه ای برنامه Artisteer و برای کدنویسی حرفه ای، نرم افزار Adobe Dreamweaver پیشنهاد می شود.
نویسنده: elaheh
زمان: ۲۳:۴۳:۰۸ - تاریخ: ۱۳۹۲/۰۲/۲۰
سلام
یک سوال ازتون داشتم
من برای اینکه ستون قالبم آروم آروم از حالت شفاف به حالت عادی برگرده از کد
webkit-transition
استفاده میکنم
اما این کد تو فایرفاکس جواب نمیده
چیکار کنم؟
پاسخ: 
سلام
پیشوند webkit برای مرورگرهای وابسته به شرکت Apple مانند safari است، برای سایر مرورگرها باید از transition خالی نیز در کنار آن استفاده کنید، مثال:
<style type="text/css">
.transition{
width:100px;
height:100px;
background:#999;
transition:width 1s, height 1s;
-webkit-transition:width 1s, height 1s; /* Safari */
}
.transition:hover{
width:200px;
height:200px;
}
</style>
<div class="transition"></div>
نویسنده: hossein
زمان: ۱۴:۰۶:۲۶ - تاریخ: ۱۳۹۳/۰۸/۱۲
سلام و خسته نباشید
من این روش رو روی منوی کشویی استفاده کردم میخوام وقتی منو باز میشه پشت منو معلوم بشه اما با این روش فقط رنگ پس زمینه منو که مشکیه به رنگ خاکستری تبدیل میشه و هیچ شفافیتی نداره اگه میشه راهنمایی کنید ممنون.
پاسخ: 
سلام
این روش در صورت استفاده صحیح بر روی تمام تگ های HTML قابل اعمال است و از این جهت محدودیتی وجود ندارد، ممکن است رنگ پس زمینه منوی شما از تگ دیگری ناشی شده باشد و ویژگی شفافیت به اشتباه به تگی دیگر داده شده باشد (سورس HTML صفحه + استایل CSS باید بررسی شود).
نویسنده: مرتضی
زمان: ۱۸:۲۶:۳۳ - تاریخ: ۱۳۹۳/۰۸/۱۷
با سلام و خسته نباشید
من یه div دارم که opacity: 0.5 بهش میدم تا پشت این div دیده بشه.
اما همه ی محتوای داخل این div هم کم رنگ میشن. یعنی میخوام رنگ متن های داخل این div با opacity: 1 باقی بمونه.
مثلا یه span داخل اون div میسازم و opacity: 1 میدم ، اما عمل نمیکنه.
ممنون میشم راهنماییم کنید.
پاسخ: 
سلام
متاسفانه این قابلیت چندان انعطاف پذیر نیست!، به نظر برای منظور شما استفاده از تصاویر png راه حل معقول تری است.
نویسنده: مرتضی
زمان: ۱۱:۴۱:۵۸ - تاریخ: ۱۳۹۳/۰۸/۱۸
درود . . . بله درسته ، تصاویر png بهتره.
خیلی ممنون از راهنماییتون. یا علی
نویسنده: viva
زمان: ۲۲:۴۸:۱۸ - تاریخ: ۱۳۹۴/۰۴/۰۸
با سلام
رفیق من یه وبلاگ ساختم که میخوام ببنیش
wowservers.blogfa.com
اگه نگاه کنی پس زمینه نوشته ها آبی هستش کدی میخوام که پس زمینه نوشته ها حالت کمرنگ بشه حالت شیشه ای که تصویری که به عنوان پس زمینه اصلی هستش پشت نوشته ها دیده بشه توی سایتای زیادی رفتم اما همش برای کمرنگ کردن تصاویر بوده نه رنگ
پاسخ: 
سلام
نمونه کد زیر را در قسمت ویرایش کد قالب وبلاگ، بین دو تگ style و در انتها قرار دهید (در قسمت ابتدایی کدها تگ style مشخص است):
.bodyposts{
color:#000000;
background:rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
background:rgba(204, 204, 204, 0.5);
}
نکته: دقت کنید که کد بالا را باید قبل از بسته شدن تگ style درج کنید، یعنی دقیقا قبل از قسمت زیر:
</style>
<script language="javascript">
function GetBC(lngPostid)
نویسنده: خودمم
زمان: ۱۰:۲۳:۴۲ - تاریخ: ۱۳۹۴/۱۰/۳۰
سلام. خسته نباشید
من برای طراحی سایتم خیلی از سایت شما کمک گرفتم
موفق و پیروز باشید
نویسنده: علیرضا نیکپور
زمان: ۰۱:۴۲:۵۰ - تاریخ: ۱۳۹۵/۰۷/۲۳
سلام
واقعا دستتون درد نکنه بابت مطالب آموزنده و پر محتوایی که تو سایت میزارید من یه دوماهی میشه طراحی وب رو شروع کردم یه سوال در مورد رنگ آمیزی بلاک و صفحات دارم دارم ما چطور میتونیم رنگهای یک بلاک رو برجسته کنیم منظورم اینه که فلان قسمت بلاک مشکی باشه ولی اونطرف بلاک رنگ مشکی روشن تر به نظر بیاد
پاسخ: 
لطفا به لینک زیر مراجعه نمائید:
http://css3gen.com/box-shadow




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

6 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...