در این جلسه  طراحی سایت شما را  با خاصیت های 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 (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

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