پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
شفافیت opacity یکی دیگر از امکاناتی است که css در اختیار طراحان سایت قرار می دهد.
این ویژگی برای کنترل روی شفافیت(میزان پررنگی) یک محتوا به کار می آید.
با استفاده از این ویژگی شما میتوانید تعیین کنید که پس زمینه محتوا(عموما تصاویر) تا چه حد قابل رویت باشد.
در ادامه آموزش امروز همراه ما باشید. تا با هم مروری روی این ویژگی و نحوه کار با آن داشته با شیم.
با سلام خدمت همراهان همیشگی سایت پرنیان طرح
شفافیت opacity یکی دیگر از امکاناتی است که css در اختیار طراحان سایت قرار می دهد.
این ویژگی برای کنترل روی شفافیت(میزان پررنگی) یک محتوا به کار می آید.
با استفاده از این ویژگی شما میتوانید تعیین کنید که پس زمینه محتوا(عموما تصاویر) تا چه حد قابل رویت باشد.
در ادامه آموزش امروز همراه ما باشید. تا با هم مروری روی این ویژگی و نحوه کار با آن داشته با شیم.
تا قبل از اینکه ویژگی Opacity به css اضافه شود، طراحان سایت برای آنکه بتوانند بخشی از صفحه یا محتوا را شفاف کنند، نیاز داشتند از تصاویر gif یا png استفاده کنند.این تصاویر به خود خود قابلیت شفاف سازی دارند.
البته ویژگی opacity مربوط به css3 می باشد.
با ورود opacity به css، شما قادر هستید تا بدون استفاده از تصاویر نیز از ویژگی شفافیت بهره ببرید.
تصاویر شفاف
ویژگی opacity میتواند با مقداری در بازه 0.0 تا 1.0- مقداردهی شود. هر چه مقدار تعیین شده کمتر باشد ، میزان شفافیت(کمرنگی) بیشتر است.
مرورگر IE8 و نسخه های مقابل آن از filter:alpha(opacity=x) استفاده می کنند.
X میتواند مقداری بین 0 تا 100داشته باشد.
هر چه مقدار به صفر نزدیکتر باشد، تصویر شفاف تر خواهد بود.
تمرین و مثال
مثال زیر تصویری را به شما نمایش خواهد داد که دارای شفافیت 50% می باشد.
کدنویسی برای شفافیت نیز به این صورت خواهد بود:
[php]
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
[/php]
نتیجه را مشاهده کنید.
تعیین میزان شفافیت تصویر با استفاده از hover
شفافیت opacity همچنین میتواند به شما کمک کند که با استفاده از hover تصاویر را جذاب تر کنید. این ویژگی به این معناست که با عبور ماوس از روی تصویر، تصویر واضحتر دیده شود. و بد از رد شدن ماوس از روی آن، دوباره کمرنگ شود.
مثال زیر نحوه کدنویسی برای این منظو را برای IE8 و نسخه های ماقبل آن نمایش می دهد:
[PHP]
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
[/PHP]
نتیجه را مشاهده کنید.
توضیحات بیشتر برای مثال بالا
اولین بلوک CSS، شبیه به مثال اول (در این آموزش) است.
علاوه بر این ، در مثال های بالا، شما واضح تر شدن تصویر هنگام (HOVER) رد شدن ماوس از روی آن را تعیین کردید.
در مواقعی که نمیخواهیم تصویر هنگام رد شدن ماوس تغییر شفافیت بدهد، Opacityبرابر با 1 خواهد بود.
در اینحالت ، هنگامی که ماوس روی تصویر قرار دارد، تصویر در حالت عادی قرار دارد. و وقتی ماوس از آن عبور می کند، تصویر کمرنگ می شود.
اینحالت دقیقا برعکس نمونه قبلی است.
کد نویسی برای این حالت به شکل زیر خواهد بود:
[php]
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
[/php]
نتیجه را مشاهده کنید.
تنظیم شفافیت برای جعبه ها BOX
زمانی که از ویژگی شفافیت Opacity برای پس زمینه یک عنصر استفاده می کنید، تمام عناصر فرزند ان عنصر نیز، این ویژگی را از والد خود به ازث می برند.
این حالت میتواند در حین خواندن متون نوشته شده داخل عنصر والد که کمرنگ شده است، و به طبع آن متن نیز کمرنگ شده است، خواندن را برای مخاطب سخت کند.
برای مثال به کد زیر دقت کنید:
[php]
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
[/php]
تعیین شفافیت با استفاده از RGBA
گاهی نیاز است که عنصر فرزند ویژگی کمرنگ شدن را از والد خود به ارث نبرد.
درست برعکس نمونه بالا.
برای این کار کافیست از مقدار رنگ RGBA استفاده کنید.
در مثالی که در ادامه می آید شما خواهید دید که عنصر والد یا همان پس زمینه کمرنگ تر می شود. اما عنصر فرزند، که همان متن داخل جعب می باشد تغییر شفافیت نمی دهد.
از طریق این لینک میتوانید نحوه کار با مقداررنگ RGB را مطالعه کنید.
بعلاوه میتوانید از مقدار رنگ RGB همراه با یک کانال آلفا Alpha استفاده کنید. کانال آلفا، میزان مات بودن را مشخص می کند.
مقدار رنگ RGBA با مقادیر (RED;GREEN;BLUE;ALPHA) مقداردهی می شوذ. پارامتر آلفا عددی بین 0.0 (کاملا شفاف) و 1.0 (کاملا مات) می باشد.
در باره RGBA میتوانید از این لینک مطالعه کنید.
مثال زیرتفاوت بین استفاده از Opacity و RGBA را مشخص می کند.
[PHP]
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
[/PHP]
قراردادن متن درون جعبه شفاف
در مثالی که در ادامه خواهید دید، ایتدا یک عنصر <DIV> (با کلاس “BACKGROUND”) با یک تصویر پس زمینه background image و یک خط حاشیه border ایجاد میکنیم.
بعد یک عنصر <DIV> دیگر ( با کلاس “transbox”) درون عنصر <DIV> اول ایجاد میکنیم.
عنصر <div class = “transbox”> یک رنگ پس زمینه background image، و یک خط حاشیه border خواهد داشت. <div> شفاف خواهد بود.
درون عنصر <div> که شفاف است، یک متن درون عنصر<p> اضافه میکنیم.
برای ایجاد این حالت، کد زیر را درون تگ <style> وارد کنید:
[php]
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
[/php]
