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

  • بهینه سازی موتور جستجو(SEO)

    بهینه سازی موتور جستجو(SEO) چیست؟ سئو یک رشته بازاریابی است که در آن تمرکز بر روی قابلیت د…
  • تاثیر سئو وبلاگ در طراحی سایت

    امروز می خواهیم در مورد موضوع تاثیر وبلاگ در طراحی سایت باهم صحبت کنیم. در طراحی سایت که ا…
  • الگوریتم Rank Brain گوگل

      مقاله ای که در طراحی سایت اسپیناس می خواهیم در مورد آن صحبت کنیم در مورد الگوریتم R…
  • CRM چیست ؟

    Crm چیست ؟ امروز در طراحی وب سایت اسپیناس به این موضوع میپردازیم یک شرکت برای بیزنس خود عل…
  • کمپین تبلیغاتی Advertising Campaign در طراحی وب سایت

      امروز در طراحی سایت اسپیناس می خواهیم در مورد یک موضوع داغ امروز صحبت کنیم. بیشتر م…
  • شبکه تحویل محتوا یا CDN در طراحی سایت

    امروز می خواهیم در طراحی سایت اسپیناس درباره شبکه تحویل محتوا یا CDN در طراحی سایت را با ه…
بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Css در طراحی سایت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بررسی کنید

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

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