در این جلسه طراحی سایت شما را با خاصیت هاي visibility ، opacity و curso آشنا می کنیم:
با استفاده از خاصیت opacity می توان میزان شفافیت یک عنصر را کنترل کرد.
قاعده کلی :
opacity: <number>
مقدار پیشفرض : 1
مقدار 1 برای خاصیت opacity مشخص می کند که یک عنصر یا کاملا ناشفاف یا تیره ( مات ، کدر ، مبھم ، opaque)
باشد. و مقدار صفر برای ویژگی opacity تعیین میکند که عنصر کاملا نامرئی (invisible) باشد.
مقدار opacity را باید به صورت یک عدد اعشاری و حداکثر تا دو رقم اعشار تعریف کرد. مقادیر بین صفر و یک و تا دو رقم
اعشار برای opacity مجاز می با شند.
نکته :
تمامی مرورگرھا به غیر IE6 , IE7 , IE8 از خاصیت opacity پشتیبانی می کنند. یک روش اختصاصی برای تعیین
opacity در IE8 و بقل از آن وجود دارد که عبارت است از :
filter: alpha(opacity=<number>) ;
مقدار پیشفرض : 100
در این روش برای مقدار opacity اعداد بین 0 تا 100 مجاز می باشد.
روش فوق فقط در ie8 و قبل از آن کار می کند.
IE9 از خاصیت opacity پشتیبانی می کند.
مثال :
<div> <h1> Espinas </h1> <h2> Espinas </h2> <h3> Espinas </h3> <h4> Espinas </h4> <h5> Espinas </h5> </div>
div { background: #000; }
h1, h2, h3, h4, h5 {
color: #000;
font-size: 30px;
display: inline;
padding; 5px 10px;
margin: 0 10px;
background: red;
}h
1 { opacity: . 20; }
h2 { opacity: . 40; }
h3 { opacity: . 60; }
h4 { opacity: . 80; }
h5 { opacity: 1; }
با استفاده از این خاصیت می توان یک عنصر را در صفحه نمایش داد و یا مخفی کرد.
قاعده کلی :
visibility: visible | hidden;
مقدار پیشفرض: visible
Visible : عنصر در صفحه نمایش داده خواھد شد.
Hidden : عنصر در صفحه مخفی شده و به جای ان یک فضای خالی نمایش داده شود.
با استفاده از خاصیت 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
با استفاده از مقادیر 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 در شرکت اسپیناس مشتری مداری حرف اول را می زند