در این جلسه طراحی سایت شما را با خاصیت هاي 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 در شرکت اسپیناس مشتری مداری حرف اول را می زند