آشنایی با خاصیت های opacity ، visibility و cursor

 

خصوصیت opacity  

از طریق این خاصیت opacity می توان میزان شفافیت یک عنصر را کنترل کرد.

قاعده کلی :

1 opacity: <number>

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

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

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

نکته :

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

1 filter:alpha(opacity=<number>);

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

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

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

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

مثال :

1 <div>
2     <h1> 7Learn </h1>
3     <h2> 7Learn </h2>
4     <h3> 7Learn </h3>
5     <h4> 7Learn </h4>
6     <h5> 7Learn </h5>
7 </div>

کد css  :

1 div {background: #000;}
2 h1,h2,h3,h4,h5 {
3     color: #000;
4     font-size: 30px;
5     display: inline;
6     padding; 5px 10px;
7     margin: 0 10px;
8     background: red;
9 }
10 h1 { opacity: .20; }
11 h2 { opacity: .40; }
12 h3 { opacity: .60; }
13 h4 { opacity: .80; }
14 h5 { opacity: 1; }

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

opacity <a  style=آموزش CSS (فصل دهم) : آشنایی با خاصیت های opacity ، visibility و cursor" title="opacity" width="616" height="202" />

خصوصیت visibility  

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

قاعده کلی :

1 visibility: visible | hidden;

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

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

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

خصوصیت Cursor  

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

قاعده کلی :

1 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 غیر استاندارد نیز وجود دارد که فقط در برخی از مرورگرها پشتیبانی می شوند :

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

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

ارسال نظر