i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

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

css-transparency

امروزه در طراحی صفحات وب استفاده از بلاک ها و تصاویر شفاف یا به اصطلاح Transparent امری مرسوم است، به طور مثال طراحان قالب سایت ها و وبلاگ ها می توانند در طراحی هایشان پس زمینه مطالب را کمی شفاف در نظر بگیرند تا تصویری که در زیر بلاک مطالب قرار دارد به صورت نیمه شفاف و در واقع مخلوط با رنگ پس زمینه دیده شود، پیاده سازی این تکنیک پیشتر با تصاویر فرمت png صورت می گرفت اما مشکل و مانع همیشگی، مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) بود که قادر به نمایش این تصاویر با زمینه شفاف نبود و تصاویر را به درستی نمایش نمی داد لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از قابلیت های CSS3 بدین منظور استفاده کردند، به جهت کاربردی بودن این تکنیک در این مطلب قصد داریم نحوه ایجاد تصاویر و بلاک های شفاف را با CSS آموزش دهیم.

معرفی خاصیت Opacity در CSS3


Opacity نخستین خاصیت استانداردی بود که برای ایجاد لایه های شفاف در CSS3 معرفی شد، این عبارت در لغت به معنی تاری و کدری است که به همین دلیل برای نامگذاری خاصیت ایجاد عناصر شفاف در CSS از آن استفاده شده است، Opacity در مرورگرهای امروزی به خوبی پشتیبانی می شود اما برای سازگاری با مرورگرهای قدیمی تر که از CSS3 پشتیبانی نمی کنند باید از خاصیت های اختصاصی ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

معرفی پارامتر Alpha برای خاصیت Background در CSS3


استفاده از کانال Alpha برای ایجاد پس زمینه شفاف در استاندارد RGB و کارهای گرافیکی از سال ها پیش مرسوم بوده است، اما پیشینه استفاده از این تکنیک در وب به معرفی تابع rgba در CSS3 برمی گردد، rgba تابعی است که جهت مقداردهی خاصیت Background می توانیم از آن استفاده کنیم، با استفاده از این قابلیت می توانیم علاوه بر کنترل سه رنگ اصلی Red، Green، Blue بر روی کانال Alpha که میزان شفافیت عنصر را مشخص می کند نیز در خاصیت Background کنترل داشته باشیم، لذا استفاده از این شیوه در کنار خاصیت Opacity دو گزینه جهت ایجاد عناصر شفاف (Transparent) در وب است.

تفاوت استفاده از Opacity و Alpha


هر دو روش Opacity و Alpha در ایجاد عناصر شفاف در وب کاربرد دارند با این تفاوت که در روش Opacity شفافیت علاوه بر عنصر والد (Parent) به تمام عناصر زیرمجموعه و فرزند (Child) نیز نسبت داده می شود، به طور مثال اگر برای بلاک div از خاصیت Opacity استفاده کنیم متن تگ p که درون تگ div قرار دارد نیز به همان صورت شفافیت را به ارث می برد و در حال حاضر این حالت غیر قابل تغییر است، اما در مورد پارامتر Alpha در حالت RGBA شفافیت صرفا بر روی عنصر هدف اعمال می شود و به عناصر زیرمجموعه سرایت نمی کند، علاوه بر این خاصیت Opacity هم برای رنگ و هم تصویر پس زمینه قابل استفاده است اما کانال Alpha در تابع rgba صرفا بر روی رنگ پس زمینه موثر است، با این توضیحات می توانیم بر طبق نیاز یکی از روش های گفته شده را استفاده کنیم.

ایجاد بلاک و تصویر شفاف با خاصیت Opacity در CSS3


کد زیر نمونه اولیه ایجاد بلاک و تصویر شفاف با خاصیت Opacity در CSS3 است، در این کد مقدار 0.5 برای میزان شفافیت در نظر گرفته شده است (مقدار Opacity می تواند از 0 تا 1 در نوسان باشد)، خاصیت مربوط به filter نیز برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.
<style type="text/css">
img {
    opacity:0.5;
    filter:alpha(opacity=50);
}
</style>

CSS Opacity Filter
در نمونه کد بالا خاصیت Opacity را در سلکتور img استفاده کرده ایم که با این کار تمام تصاویر صفحه 50% شفافیت خواهند داشت (مقادیر 1 وضوح کامل است که با گام های 0.1 می توانیم وضوح را کاهش و شفافیت را افزایش دهیم، به طور مثال 0.9، 0.8 و...، برای filter:alpha این مقادیر از 100 محاسبه می شوند).

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


معرفی رسمی خاصیت Opacity در CSS3 صورت گرفت و به همین دلیل برخی مرورگرهای قدیمی تر از آن به طور کامل پشتیبانی نمی کنند، برای سازگاری این قبیل مرورگرها و اطمینان از اینکه استایل مد نظرمان به درستی برای همه کاربران پردازش می شود نمونه کد بالا را با پارامترهایی مانند ms-filter، moz-opacity و khtml-opacity توسعه می دهیم، به این صورت نسخه های قدیمی مرورگرهای اینترنت اکسپلورر، موزیلا فایرفاکس، سافاری و... از حالت شفافیت با خاصیت Opacity پشتیبانی خواهند کرد.
.transparent-opacity {
    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) است.
- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و در حالت استاندارد CSS3 عددی بین 0 تا 1 با گام های 0.1 است.
- به کاربردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز با ویژگی های CSS3 سازگاری ندارند، موجب نامعتبر تلقی شدن کدنویسی استایل CSS گردد که البته به لحاظ سئو فاکتور خیلی مهمی نیست.

ایجاد بلاک شفاف با پارامتر Alpha در CSS3


در طراحی صفحات وب گاهی صرفا پس زمینه بلاک حالت شفافیت و کم رنگی دارد و سایر عناصر از جمله متن، تصویر و... با وضوح عادی و شفافیت نرمال هستند، در این صورت استفاده از Opacity گزینه مناسبی نیست و باید از قابلیت دیگری در CSS تحت عنوان کانال Alpha استفاده کنیم، کانال Alpha در CSS3 و تابع rgba برای خاصیت Background در نظر گرفته شده است که به صورت مقادیری از 0 تا 1 با گام های 0.1 متغیر است، این پارامتر به عنوان آرگیومنت چهارم تابع rgba مقداردهی می شود، تابع rgba صرفا برای رنگ پس زمینه قابل استفاده است و تاثیری روی تصویر پس زمینه نخواهد داشت.
.transparent-rgba {
    background-color: rgba(0, 0, 0, 0.5);
}
توضیح:
- به طور کلی رنگ ها در CSS به چند روش مختلف قابل استفاده هستند از جمله کدهای Hexadecimal، توابع rgb، rgba، hsl، hsla و رنگ های از پیش تعریف شده (Predefined) مانند Red، Green، Blue و... که در تمام مرورگرها پشتیبانی می شوند.
- در روش RGBA که اکستنشنی از RGB است، سه مقدار اول عددهای مربوط به سه رنگ اصلی قرمز، سبز و آبی را مشخص می کنند (مقادیری از 0 تا 255) و عدد چهارم میزان شفافیت کانال Alpha را تعیین می کند (مقداری از 0 تا 1).
- امکان استفاده از تابع rgba صرفا برای خاصیت Background و Background-color وجود دارد.
- روش RGBA صرفا رنگ پس زمینه را تحت تاثیر قرار می دهد و بر روی سایر عناصر صفحه از جمله متن و تصویر تاثیری ندارد.
- یک نمونه عملی از این روش ایجاد شفافیت می تواند استفاده به عنوان کادر متن توضیحات گالری تصاویر در صفحات وب باشد.

مثال و پیش نمایش آنلاین


بحث ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3 را با بررسی یک مثال و پیش نمایش آنلاین آن به پایان می بریم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | بلاک و تصویر شفاف با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body {
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height:22px;
}
.transparent-wrap {
    display:inline-block;
    background: #A4BC1C;
    width: 200px;
    height: 200px;
}
.transparent-text {
    color: #FFFD00;
}
.transparent-opacity {
    background-color: #000000;
    zoom: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.transparent-rgba {
    background-color: rgba(0, 0, 0, 0.5);
}
</style>
<script type="text/javascript">
function getSetRang(rang_id, opacity_id, rgba_id, value_id){
    var value = document.getElementById(rang_id).value;
    
    document.getElementById(opacity_id).style.opacity = value;
    document.getElementById(rgba_id).style.backgroundColor = "rgba(0, 0, 0, " + value + ")";
    document.getElementById(value_id).innerHTML = value;
}
</script>
</head>
<body>
<div class="transparent-wrap">
<div id="transparent-opacity" class="transparent-opacity">
<p class="transparent-text">
متن با پس زمینه شفاف - خاصیت Opacity و Filter
</p>
</div>
</div>
<div class="transparent-wrap">
<div id="transparent-rgba" class="transparent-rgba">
<p class="transparent-text">
متن با پس زمینه شفاف - کانال Alpha روش RGBA
</p>
</div>
</div>
<hr>
<label for="transparent-rang">تغییر میزان شفافیت:</label>
<input id="transparent-range" type="range" min="0" max="1" step="0.1" value="0.5" dir="ltr" oninput="getSetRang(this.id, 'transparent-opacity', 'transparent-rgba', 'transparent-value');" onchange="getSetRang(this.id, 'transparent-opacity', 'transparent-rgba', 'transparent-value');">
<br>
میزان فعلی شفافیت: <span id="transparent-value">0.5</span>
<br>
- برای مشاهده تفاوت و بررسی تاثیر تغییرات روش Opacity و روش RGBA بر عناصر صفحه می توانیم از Range اسلایدر بالا استفاده کنیم (صرفا سازگار با مرورگرهایی که از HTML5 پشتیبانی می کنند!).
<br>
- برای سازگاری با تمام مرورگرها از خاصیت Filter و Opacity در کنار هم استفاده کرده ایم.
<br>
- همان طور که گفتیم شفافیت در خاصیت Opacity به صورت کلی بر روی عنصر والد و عناصر فرزند اعمال می شود (شامل متن، رنگ و تصویر پس زمینه) که در این مثال نیز با تغییر میزان شفافیت بلاک div اصلی متن درون آن (تگ p) به همان صورت تغییر می کند، اما در صورت استفاده از کانال Alpha در روش RGBA میزان شفافیت صرفا روی رنگ پس زمینه عنصر هدف تاثیرگذار است و سایر عناصر صفحه وب از جمله متن و تصاویر را شامل نمی شود.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ساخت منوی کشویی با تگ ul li و CSS
» تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
» آموزش استفاده از فونت فارسی در وب با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» مخفی کردن عناصر وب با CSS
commentنظرات (۹ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 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 × 1
 refresh
آگهی
سفارش آگهی تبلیغاتی
Webgoo.ir

هزینه منصفانه، بازخورد مناسب