آموزش CSS (فصل دهم) : آشنایی با خاصیت های opacity ، visibility و cursor

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۸ بهمن ۱۳۹۱

فهرست محتوای این مقاله

خصوصیت opacity  

با استفاده از خاصیت opacity می‌توان میزان شفافیت یک عنصر را کنترل کرد.

قاعده کلی :

opacity: <number>

مقدار پیشفرض : 1

مقدار 1 برای خاصیت opacity مشخص می‌کند که یک عنصر یا کاملا ناشفاف یا تیره ( مات ، کدر ، مبهم ، opaque)  باشد. و مقدار صفر برای ویژگی opacity تعیین میکند که عنصر کاملا نامرئی (invisible) باشد.

مقدار opacity را باید به صورت یک عدد اعشاری و حداکثر تا دو رقم اعشار تعریف کرد. مقادیر بین صفر و یک و تا دو رقم اعشار برای opacity مجاز می‌با شند.

نکته :

تمامی مرورگرها به غیر IE8 , IE7 , IE6 از خاصیت opacity پشتیبانی می‌کنند. یک روش اختصاصی برای تعیین opacity در IE8 و بقل از آن وجود دارد که عبارت است از :

filter:alpha(opacity=<number>);

مقدار پیشفرض : 100

در این روش برای مقدار opacity اعداد بین 0 تا 100 مجاز می‌باشد.

روش فوق فقط در ie8 و قبل از آن کار می‌کند.

IE9  از خاصیت opacity پشتیبانی می‌کند.

مثال :

<div>
<h1> 7Learn </h1>
<h2> 7Learn </h2>
<h3> 7Learn </h3>
<h4> 7Learn </h4>
<h5> 7Learn </h5>
</div>

کد css  :

div {background: #000;}
h1,h2,h3,h4,h5 {
color: #000;
font-size: 30px;
display: inline;
padding; 5px 10px;
margin: 0 10px;
background: red;
}
h1 { opacity: .20; }
h2 { opacity: .40; }
h3 { opacity: .60; }
h4 { opacity: .80; }
h5 { opacity: 1; }

نتیجه در مرورگر :

خصوصیت visibility  

با استفاده از این خاصیت می‌توان یک عنصر را در صفحه نمایش داد و یا مخفی کرد.

قاعده کلی :

visibility: visible | hidden;

مقدار پیشفرض:  visible

Visible : عنصر در صفحه نمایش داده خواهد شد.

Hidden : عنصر در صفحه مخفی شده و به جای ان یک فضای خالی نمایش داده شود.

خصوصیت Cursor  

با استفاده از خاصیت cursor می‌توان نوع اشاره گر موس مورد استفاده برای عناصر را تغییر داد.

قاعده کلی :

Cursor: url('') | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress

مقدار پیشفرض auto

با استفاده از مقادیر url می‌توان یک custom cursor را بر اساس یک img تعریف کرد. در عمل این روش تقریبا هرگز استفاده  نمیشود و برای استفاده توصیه نمی‌شود و استفاده از cursorهای استاندارد بهتر می‌باشد.

نکته :

تعدادی cursor غیر استاندارد نیز وجود دارد که فقط در برخی از مرورگرها پشتیبانی می‌شوند :

Cursor: hand | all-scroll |col-resize | row-resize | no-drop | not-allowed |vertical-text

بسیار خب، تا به اینجا با سه خاصیت دیگر از زبان css آشنا شدیم، در جلسه بعدی شما را با جلوه‌های ویژه  ی css3 آشنا خواهیم کرد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

پـــــویا پـــنج

اقا ببخشید وقتی لیست خاصیت ها باز میشه گزینه ی opacity توش نیست باید چکار کنم ؟

لقمان آوند

خودت بنویس !

javad75

سلام،پس چرا ادامه آموزش را قرار نمی دید؟؟!!

مگه قرار نبود 3 روز یکبار باشه؟

الان یک هفته هست که آپدیت نشده آموزش css

محمد جواد فصاحت

سلام،جاداره یه خسته نباشید بهتون بگم 😳

واقعا دستتون درد نکنه خیلی عالیه

لطفا ادامه بدید همین جوری 😳

mokha

سلام آقای آوند
من از مرورگر کروم استفاده میکنم یه اشکال هست اینکه سایتتون چند روز کش میشه و برای دیدن مطالب جدید باید صفحه رو رفرش کنم . 🙁

لقمان آوند

خوب برای افزایش سرعت اینکارو کردیم …
حالا دوباره بررسی می کنیم اگه نیاز شد مدت زمان کش رو کم می کنیم .

لقمان آوند

عالی بود …

کیوان علی محمدی

سجاد جون دمت گرم

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.