دسته بندی
آگهی

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

امروزه در طراحی صفحات وب استفاده از بلاک ها و تصاویر شفاف یا به اصطلاح 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>

در نمونه کد بالا خاصیت 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>

» چسبیدن فوتر قالب به پائین صفحه با CSS
» حذف اسکرول افقی (Horizontal Scroll) با CSS
» ساخت منوی کشویی با تگ ul li و CSS
» مخفی کردن عناصر وب با CSS
» ساخت منوی آبشاری (عمودی) با تگ ul li و CSS


نویسنده: chmd
زمان: ۱۱:۵۱:۴۵ - تاریخ: ۱۳۹۱/۰۹/۱۱
سلام
می شه بگین این کد ها کجا قرار می گیرن؟
می شه بگین این کد ها کجا قرار می گیرن؟
<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استفاده میکنم
اما این کد تو فایرفاکس جواب نمیده
چیکار کنم؟
<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 میدم ، اما عمل نمیکنه.
ممنون میشم راهنماییم کنید.
من یه div دارم که opacity: 0.5 بهش میدم تا پشت این div دیده بشه.
اما همه ی محتوای داخل این div هم کم رنگ میشن. یعنی میخوام رنگ متن های داخل این div با opacity: 1 باقی بمونه.
مثلا یه span داخل اون div میسازم و opacity: 1 میدم ، اما عمل نمیکنه.
ممنون میشم راهنماییم کنید.
متاسفانه این قابلیت چندان انعطاف پذیر نیست!، به نظر برای منظور شما استفاده از تصاویر png راه حل معقول تری است.
نویسنده: مرتضی
زمان: ۱۱:۴۱:۵۸ - تاریخ: ۱۳۹۳/۰۸/۱۸
درود . . . بله درسته ، تصاویر png بهتره.
خیلی ممنون از راهنماییتون. یا علی
خیلی ممنون از راهنماییتون. یا علی
نویسنده: viva
زمان: ۲۲:۴۸:۱۸ - تاریخ: ۱۳۹۴/۰۴/۰۸
با سلام
رفیق من یه وبلاگ ساختم که میخوام ببنیش
رفیق من یه وبلاگ ساختم که میخوام ببنیش
wowservers.blogfa.comاگه نگاه کنی پس زمینه نوشته ها آبی هستش کدی میخوام که پس زمینه نوشته ها حالت کمرنگ بشه حالت شیشه ای که تصویری که به عنوان پس زمینه اصلی هستش پشت نوشته ها دیده بشه توی سایتای زیادی رفتم اما همش برای کمرنگ کردن تصاویر بوده نه رنگ
.bodyposts{نکته: دقت کنید که کد بالا را باید قبل از بسته شدن تگ style درج کنید، یعنی دقیقا قبل از قسمت زیر:
color:#000000;
background:rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
background:rgba(204, 204, 204, 0.5);
}
</style>
<script language="javascript">
function GetBC(lngPostid)
نویسنده: خودمم
زمان: ۱۰:۲۳:۴۲ - تاریخ: ۱۳۹۴/۱۰/۳۰
سلام. خسته نباشید
من برای طراحی سایتم خیلی از سایت شما کمک گرفتم
موفق و پیروز باشید
من برای طراحی سایتم خیلی از سایت شما کمک گرفتم
موفق و پیروز باشید
نویسنده: علیرضا نیکپور
زمان: ۰۱:۴۲:۵۰ - تاریخ: ۱۳۹۵/۰۷/۲۳
سلام
واقعا دستتون درد نکنه بابت مطالب آموزنده و پر محتوایی که تو سایت میزارید من یه دوماهی میشه طراحی وب رو شروع کردم یه سوال در مورد رنگ آمیزی بلاک و صفحات دارم دارم ما چطور میتونیم رنگهای یک بلاک رو برجسته کنیم منظورم اینه که فلان قسمت بلاک مشکی باشه ولی اونطرف بلاک رنگ مشکی روشن تر به نظر بیاد
واقعا دستتون درد نکنه بابت مطالب آموزنده و پر محتوایی که تو سایت میزارید من یه دوماهی میشه طراحی وب رو شروع کردم یه سوال در مورد رنگ آمیزی بلاک و صفحات دارم دارم ما چطور میتونیم رنگهای یک بلاک رو برجسته کنیم منظورم اینه که فلان قسمت بلاک مشکی باشه ولی اونطرف بلاک رنگ مشکی روشن تر به نظر بیاد
http://css3gen.com/box-shadow

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