آموزش CSS (فصل دهم) : آشنایی با خاصیت های opacity ، visibility و cursor



visibility  
mode_comment   ۸

خصوصیت opacity  

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

قاعده کلی :

مقدار پیشفرض : 1

مقدار 1 برای خاصیت opacity مشخص می کند که یک عنصر یا کاملا ناشفاف یا تیره ( مات ، کدر ، مبهم ، opaque)  باشد. و مقدار صفر برای ویژگی opacity تعیین میکند که عنصر کاملا نامرئی (invisible) باشد.

مقدار opacity را باید به صورت یک عدد اعشاری و حداکثر تا دو رقم اعشار تعریف کرد. مقادیر بین صفر و یک و تا دو رقم اعشار برای opacity مجاز می با شند.

info نکته :

تمامی مرورگرها به غیر IE8 , IE7 , IE6 از خاصیت opacity پشتیبانی می کنند. یک روش اختصاصی برای تعیین opacity در IE8 و بقل از آن وجود دارد که عبارت است از :

مقدار پیشفرض : 100

در این روش برای مقدار opacity اعداد بین 0 تا 100 مجاز می باشد.

روش فوق فقط در ie8 و قبل از آن کار می کند.

IE9  از خاصیت opacity پشتیبانی می کند.

مثال :

کد css  :

نتیجه در مرورگر :

خصوصیت visibility  

با استفاده از این خاصیت می توان یک عنصر را در صفحه نمایش داد و یا مخفی کرد.

قاعده کلی :

مقدار پیشفرض:  visible

Visible : عنصر در صفحه نمایش داده خواهد شد.

Hidden : عنصر در صفحه مخفی شده و به جای ان یک فضای خالی نمایش داده شود.

خصوصیت Cursor  

با استفاده از خاصیت cursor می توان نوع اشاره گر موس مورد استفاده برای عناصر را تغییر داد.

قاعده کلی :

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

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

info نکته :

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

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

comment دیدگاه کاربران
کیوان علی محمدی

سجاد جون دمت گرم

لقمان آوند

عالی بود …

mokha

سلام آقای آوند
من از مرورگر کروم استفاده میکنم یه اشکال هست اینکه سایتتون چند روز کش میشه و برای دیدن مطالب جدید باید صفحه رو رفرش کنم . 🙁

لقمان آوند

خوب برای افزایش سرعت اینکارو کردیم …
حالا دوباره بررسی می کنیم اگه نیاز شد مدت زمان کش رو کم می کنیم .

محمد جواد فصاحت

سلام،جاداره یه خسته نباشید بهتون بگم 😳

واقعا دستتون درد نکنه خیلی عالیه

لطفا ادامه بدید همین جوری 😳

javad75

سلام،پس چرا ادامه آموزش را قرار نمی دید؟؟!!

مگه قرار نبود 3 روز یکبار باشه؟

الان یک هفته هست که آپدیت نشده آموزش css

پـــــویا پـــنج

اقا ببخشید وقتی لیست خاصیت ها باز میشه گزینه ی opacity توش نیست باید چکار کنم ؟

لقمان آوند

خودت بنویس !

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.