در این جلسه  طراحی سایت شما را  با خاصیت های visibility ، opacity و curso آشنا می کنیم:

 

خصوصیت opacity

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

opacity: <number>

مقدار پیشفرض : ۱
مقدار ۱ برای خاصیت opacity مشخص می کند که یک عنصر یا کاملا ناشفاف یا تیره ( مات ، کدر ، مبھم ، opaque)
باشد. و مقدار صفر برای ویژگی opacity تعیین میکند که عنصر کاملا نامرئی (invisible) باشد.
مقدار opacity را باید به صورت یک عدد اعشاری و حداکثر تا دو رقم اعشار تعریف کرد. مقادیر بین صفر و یک و تا دو رقم
اعشار برای opacity مجاز می با شند.
نکته :
تمامی مرورگرھا به غیر IE6 , IE7 , IE8 از خاصیت opacity پشتیبانی می کنند. یک روش اختصاصی برای تعیین
opacity در IE8 و بقل از آن وجود دارد که عبارت است از :

filter: alpha(opacity=<number>) ;

مقدار پیشفرض : ۱۰۰
در این روش برای مقدار opacity اعداد بین ۰ تا ۱۰۰ مجاز می باشد.
روش فوق فقط در ie8 و قبل از آن کار می کند.
IE9 از خاصیت opacity پشتیبانی می کند.
مثال :

 

<div>
 <h1> Espinas </h1>
 <h2> Espinas  </h2>
 <h3> Espinas  </h3>
 <h4> Espinas  </h4>
 <h5> Espinas </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;
 }h
 ۱ { 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-r
 esize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progr
 ess

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

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

نکته :

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

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

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

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Css در طراحی سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پنج + 2 =

بررسی کنید

آموزش CSS (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

در این جلسه  طراحی سایت شما را با جلوه های ویژه ی CSS3 آشنا می کنیم: خاصیت transform شما م…