آموزش آموزش CSS

[sun-shine 7672]

زمانی که HTML بوجود آمد، تصور بر این بود که این زبان، تنها برای نمایش متن و عکس است و بسیاری از موارد پیشرفته و همچنین کاربرپسند بودن در طراحی آن در نظر گرفته نشده بود. به همین منظور،

CSS برای رفع نقاط ضعف و خلاهای HTML بوجود آمد.

(CSS (Cascade Style Sheets :

CSS (الگوهای آبشاری سبک) زبان برنامه نویسی می باشد که W3C(کنسرسیوم بین المللی شبکه جهانی وب) برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است، پیشنهاد داده است و مکملی برایHTML است. توسط CSS می توان استیل طراحی صفحات وب سایت را یکبار تعریف کرده و به صفحات مورد نظر اعمال نمود. مثلا اگر 100 صفحه به زبان HTML داشته باشید و تصمیم بگیرید که فونت تمام کلمات را تغییر دهید، در صورتی که از CSS استفاده نکرده باشید، کار بسیار دشواری است ولی با CSS تنا کافی است که در استیل مورد نظر، نوع فونت را تغییر دهید.

CSS روش ساده ای برای نمایش چیدمان و جلوه های تصویری (مانند نوع قلم، رنگ و اندازه ها) بر صفحات وب است.

مزایای CSS:

1. تمیزتر شدن کدهای برنامه نویسی

2. سهولت در تغییرات آتی

3. افزایش بهره وری

4. سازگاری بیشتر با مرورگرهای محتلف

5. انعطاف پذیری بالای CSS

6. کم حجم کردن فایل HTML و کاهش استفاده از پهنای باند شبکه

 

پیش نیاز یادگیری CSS، آشنایی با زبان برنامه نویسی HTML است که در تاپیک یادگیری HTML از پایه آموزش داده شده است. پس در صورتی که HTML آشنایی ندارید بهتر است قبل از شروع CSS، ابتدا زبان HTML رو یاد بگیرید.

[sun-shine 7672]

جلسه 1: شروع به کار در CSS

برای ایجاد فایل CSS، همانند فایل HTML می توان از نرم افزارهای مختلفی مانند notpad++، notpad، ویژوال استادیو و ... استفاده نمود. تنها کافی است که کدهای مورد نظر را نوشته و با پسوند css ذخیره نمود و در فایل html استفاده نمود. در نامگذاری فایلهای css موارد زیر را باید رعایت نمود:

• از حروف a-z و اعداد 0-9، خط زیر و فاصله استفاده شود و از کاراکترهای خاص استفاده نشود
  

• نام فایل با یک حرف شروع شود و تا حد امکان کوتاه باشد.
  

نرم افزاری که ما استفاده می کنیم، ویژوال استادیو 2012 است. به منظور ایجاد سایت جدید و فایل css بصورت زیر عمل می کنیم:

1. file -> new -> web site

2. در صفحه ایی که باز می شود، در قسمت وسط، گزینه ASP.net empty web site را انتخاب کنید. در قسمت web location می توان مکان ذخیره سایت و نام آن را مشخص کنیم.

3. سپس برای ایجاد فایل css و فایل HTML، در پنجره solution Explorer، بروی نام سایت راست کلیک کرده، سپس گزینه ADD New Item، Add را انتخاب می کنیم.

 

4. در این پنجره یک فایل HTML و یک فایل css ایجاد می کنیم. مثلا برای ایجاد فایل css، گزینه Style Sheet را انتخاب نموده و در قسمت name یک نام با پسوند css ایجاد می کنیم.

 

 

برای ایجاد فایل html نیز تنها کافی است که از پنجره بالا گزینه HTML Page را انتخاب نموده و یک نام با پسوند HTML برای آن تعریف نمود.

 

ساختار CSS

ساختار css به صورت زیر است:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مثال:

اگر بخواهیم که طول و عرض برای یک DIV تعیین کنیم، در فایل CSS به صورت زیر می نویسیم:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نکته: بین مقدار و واحد نباید فاصله گذاشت (مثلا در مثال بالا نباید بین 500 و px فاصله باشد.)

[sun-shine 7672]

جلسه 2: افزودن کدهای css به html:

سه روش برای اینکار وجود دارد:

1. درون خطی

2. css داخلی

3. css خارجی

 

1. روش درون خطی:

این روش، از دو روش بعدی اولویت بالاتری دارد و در صورتی که از هر سه روش برای افزودن css استفاده شده باشد، کدهای این روش اجرا می شود. روش کار همانند خاصیت دادن به تگ ها می باشد. در تگ مورد نظر یک فاصله گذاشته و یک ویژگی style تعریف کرده و کدهای css را همانند بالا مقدار می دهیم یعنی ابتدا نام خاصیت سپس کولن(:) و مقدار خاصیت را می نویسیم. انتهای هر خاصیت سیمیکالن قرار می دهیم.

مثال:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

نکته

: برای اجرا بروی دکمه play کلیک می کنیم.

 

2. css داخلی:

در این روش، کدهای css درون فایل html و داخل تگ head نوشته می شود. اولویت این روش نسبت به css خارجی بیشتر است ولی اشکال این روش در این است که تنها در صفحاتی که در آن هستند، تاثیر می گذارد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

3. css خارجی

بهترین روش می باشد که برنامه نویسان حرفه ایی از آن استفاده می کنند. در این روش کدهای css در یک فایل خارجی نوشته و ذخیره می شود و سپس به فایل html لینک می شود.

 

برای اینکار باید مراحل زیر را انجام داد:

1. برای ایجاد یک فایل css، همانند جلسه 1، یک فایل css ایجاد کرده و کدهای مورد نظر را در آن می نویسیم.

مثال: در فایل css کدهای زیر را می نویسیم:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

2. سپس باید این فایل را به فایل html لینک کنیم. برای اینکار از تگ link درون تگ head استفاده می کنیم:

 

مثال:

اگر نام فایل css ما mycss باشد، بصورت زیر به فایل html آن را لینک می کنیم.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نکته مهم:

برای لینک کردن، کافی است که فایل css را از درون پنجره solution explorer درون تگ head درگ کنیم. کد بالا بصورت اتوماتیک نوشته می شود.

 

اولیت ها:

اگر هر سه استایل به روش های بالا تعریف گردد، اولیت اول با روش درون خطی، سپس css داخلی و در آخر css خارجی است.

 

 

 

[sun-shine 7672]

جلسه 3:

یک فایل html بنام site و یک فایل css بنام mycss ایجاد می کنیم.

در فایل html کدهای زیر را در تگ head نوشته تا فایل css به فایل html لینک شود.

 

در فایل html

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

1. استفاده از نام تگ ها به عنوان انتخابگر

اگر داخل فایل html دو تگ Div داشته باشیم و داخل فایل css انتخابگر Div را تعریف کرده و مقدار دهیم، به هر دو Div مقدار دهی می شود.

در فایل css

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

2. استفاده از ID بعنوان انتخابگر

در صورتی که بخواهیم به تک تک Div ها مقدار دهی کنیم باید ابتدا برای هر div در فایل Html یک id تعریف کرده، سپس انتخابگر id را در فایل css تعریف کنیم.

نکته

: برای تعریف id از # استفاده می کنیم.

 

الف. ابتدا در فایل html برای هر div یک id منحصر به فرد تعریف نموده

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

ب. سپس در فایل css انتخابگر id را تعریف می کنیم

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

3. استفاده از class بعنوان انتخابگر

زمانی که بخواهیم به دو عنصر مختلف، یک استایل دهیم از انتخابگر class استفاده می کنیم. مثلا به div و table یک استایل دهیم باید از کلاس استفاده کنیم.

نکته

: برای تعریف کلاس از نقطه استفاده می کنیم

 

الف. ابتدا برای div و table کلاسی با یک نام تعریف نموده

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

ب. سپس در فایل css انتخابگر کلاس را تعریف می کنیم.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

توضیحات

:

برای نوشتن توضیحات در css از /* توضیحات */ استافاده می شود.

 

روش های مقدار دهی به رنگ:

1. استفاده از نام رنگ :

مثال :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

2. مقدار دهی هگزا دسیمال:

که بصورت شش عدد در مبنای هگزا می باشد. RRGGBB#

مثال :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

3. استفاده از تابع rgb:

که در داخل پرانتز سه مقدار (R,G,B) بین 0 تا 255 نوشته می شود

مثال :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

4. HSL:

که روش جدیدی است که در CSS3 ساپورت می شود.

h: عدد رنگ است که بین 0 تا 359 است.

S: پر رنگ و کم رنگ بودن را مشخص می کند که بر حسب درصد است.

L: میزان نور تابیده شده به رنگ است که برحسب درصد است.

[sun-shine 7672]

جلسه 4: خواص مربوط به background قسمت 1

 

1. Background-image:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

برای قرار دادن عکس در پس زمینه، بهتر است ابتدا یک پوشه برای تصاویری که در طراحی استفاده می شود ایجاد کرده و تمام تصاویر را در آن قرار دهیم. برای ایجاد پوشه بروی نام سایت در پنجره solution explorer کلیک راست کرده، add و سپس new folder را انتخاب کرده و نامی برای آن انتخاب می کنیم مثلا img

سپس برای قرار دادن عکس در پوشه مورد نظر، بروی پوشه راست کلیک کرده، add و سپس existing item را انتخاب کرده و مسیر عکس را می دهیم. قسمت پایین آن را بروی image file می گذاریم.

سپس در آدرس دهی عکس، بصورت نسبی آدرس دهی می کنیم یعنی ابتدا نام پوشه ایجاد شده (در اینجا img) سپس یک اسلش و سپس نام عکس و پسوند عکس را می نویسیم(توضیح بیشتر در آموزش html). در ویژوال استادیو باید /.. نیز قرار دهیم تا عکس نمایش داده شود.

 

مثال:

در فایل css

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نکته:

با استفاده از نرم افزار Gif movie grear می توان چندین تصویر را پشت سرهم بصورت یک تصویر متحرک تبدیل کرد.

 

2. Background-repeat:

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

 

[*=right]no-repeat: اصلا عکس تکرار نشود.:
[*=right]repeat: عکس در همه جهات تکرار می شود که پیش فرض است.

[*=right]repeat-x: عکس در جهت x تکرار می شود.

[*=right]repeat-y: عکس در جهت y تکرار می شود.

مثال:

در فایل css:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

3. background-attachment:

اگر صفحه اسکرول داشته باشد، این خاصیت، ثابت ماندن یا حرکت پس زمینه با بقیه صفحه را مشخص می کند و شامل مقادیر زیر است:

 

[*=right]fixed: پس زمینه ثابت است و حرکت نمی کند.
[*=right]scroll: حالت پیش فرض است که با حرکت اسکرول، پس زمنیه حرکت می کند.

​

مثال:

در فایل css

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

4. background-position:

موقعیت شروع تصویر پس زمنیه را مشخص می کند که شامل مقادیر یر است:

botton , center , inherit , initial , left , right, top

همچنین با استفاده از خواص زیر می توان به آن مقدار دارد

 

مثال:

در فایل css

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

4. background-position-x:

موقعیت عکس پس زمینه در جهت x

 

5. background-position-y :

موقعیت عکس پس زمنیه در جهت y

 

مثال:

در فایل css

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[sun-shine 7672]

جلسه 4- خواص مربوط به background قسمت 2

در طراحی سایت دو نکته اهمیت دارد: 1. سرعت 2. امنیت

برای بالا بردن سرعت، تا حد امکان از عکس و فیلم کمتر استفاده شود. در css3 به جای background-image از گرادیانت استفاده می شود تا سرعت بالا رود.

 

1. گرادیانت خطی:

برای ایجاد گرادیانت از کد زیر استفاده می شود(شکل 1).

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نکته:

در گرادیانت حداقل باید از دو رنگ استفاده نمود.

 

می توان برای گرادیانت، عرض و طول در نظر گرفت(شکل 2).

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

تغییر زاویه گرادیانت:

قبل از ذکر رنگهای گرادیانت می توان زاویه آن را مشخص نمود

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

درصد دادن به گرادیانت:

می توان به هر رنگ درصد داد. در اینصورت برحسب درصد، میزان رنگ ها نسبت بهم کم یا زیاد می شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

تکرار گرادیانت:

به این معنی است که چند پیکسل، چند پیکسل گرادیانت تکرار شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

گرادیانت radial:

شکل گرادیانت بصورت دایره وار است.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

در صورتی که کد بالا را اجرا کنید، گرادیانت حالت بیضی دارد(شکل 3). در صورتی که بخواهید کاملا بشکل دایره تبدیل شود باید کد زیر را استفاده نمود(شکل 4).

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

حتی می توان به جای کلمه circle، بصورت زیر عدد گذاشت:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نکته: بین دو عدد، ویرگول نیاز ندارد.

جابه جا کردن و انتقال دایره در گرادیانت:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نکته:

برای تبدیل دایره به بیضی از Ellipse استفاده می شود.

 

تکرار گرادیانت radial

یعنی چند درصد چند درصد گرادیانت تکرار شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

شفافیت رنگ ها

از خاصیت opacity استفاده می شود که مقادیری از 0 تا 1 می گیرد. این خاصیت عناصر داخلی را نیز شفاف می کند یعنی مثلا اگر برای رنگ div شفافیت تعیین کنیم، متن یا عناصری که داخل آن باشد نیز شفاف می شود ولی در RGBA به اینصورت نیست و تنها پس زمینه شفاف می شود نه عناصر داخلی.

 

مثال opacity(شکل 5):

در فایل css:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

در فایل html

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مثال RGBA(شکل 6):

در فایل css

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

در تصویر زیر، به نوشته css دقت کنید. در شکل 5 زمانی که به رنگ پس زمینه opacity دادیم، نوشته داخل div نیز شفاف شده ولی در RGBA تنها پس زمینه شفاف شده است.

[sun-shine 7672]

جلسه 5- فونت در CSS

font-family: برای انتخاب نام فونت است. می توانیم چندین فونت که با کاما از هم جدا شده است را به font family بدهیم تا در صورتی که کاربر، فونت اول را در سیستم نداشت، فونت دوم را استفاده کند.

 

font-size: اندازه فونت است که برحسب پیکسل یا برحسب large، xlarge و ... می توان مشخص نمود.

 

font-style: حالت فونت را مشخص می کند که می تواند normal(معمولی)، italic (کج) یا

oblique (شبیه italic است ولی کجی کمتری دارد) باشد.

 

font-weight: برای bold کردن فونت استفاده می شود که از 100 تا 900 عدد می تواند بگیرد یا اینکه از عبارت bold، bolder و ... استفاده می شود.

 

color: برای انتخاب رنگ فونت استفاده می شود.

direction: جهت نوشتن متن است که برای فارسی از rtl و برای انگلیسی از ltr استفاده می شود.

 

text-align:تراز متن است که می تواند مقادیر right و left و justify و ... بگیرد.

 

مثال:

مثلا برای تگ p می توان خصوصیات زیر را برای فونت قلم در نظر گرفت:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

text-decoration:این خاصیت مربوط به لینک هاست و خط زیر لینک را مشخص می کند. مثلا در صورتی که نخواهیم لینک، زیر خط دار باشد، مقدار آن را none می گذاریم.

 

مثال:

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

text-indent: میزان تورفتگی از لبه تگ را نشان می دهد.

 

text-transform:این خاصیت مربوط به حروف انگلیسی است که می تواند حروف را به حروف بزرگ یا حروف کوچک تبدیل کند.

 

word-spacing: فاصله بین کلمات است که برحسب پیکسل مقدار دهی می شود.

 

letter-spacing: فاصله بین کاراکترهاست.

text-shadow: سایه متن است که چهار پارامتر دارد 1. عرض به پیکس 2. ارتفاع به پیکسل 3. محوشدگی 4. رنگ

در صورتی که عرض و ارتفاع را منفی دهیم، سایه به طرف بالا می آید.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

[sun-shine 7672]

جلسه 6: تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS از چند ویژگی می‌توان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height می‌باشد.

در ذیل به توضیح این ویژگی‌ها با توجه به ورژن تعریف شده در CSS می‌پردازیم.

height: این ویژگی در تمام مرورگر ها پشتیبانی می‌شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

با دو ویژگی max-height و max-width شما می‌توانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

 

max-height: این ویژگی در تمام مرورگر ها پشتیبانی می‌شود. به استثتا IE6 و ورژن های پایین تر

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

max-width: این ویژگی در تمام مرورگر ها پشتیبانی می‌شود. به استثتا IE6 و ورژن های پایین تر

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

با دو ویژگی min-height و min-width شما می‌توانید حداقل مقدار را برای یک عنصر تنظیم کنید.

min-height: این ویژگی در تمام مرورگر ها پشتیبانی می‌شود. به استثتا IE6 و ورژن های پایین تر

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

min-width: این ویژگی در تمام مرورگر ها پشتیبانی می‌شود. به استثتا IE6 و ورژن های پایین تر

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

Width: این ویژگی در تمام مرورگر ها پشتیبانی می‌شود.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

عرض استاندارد برای طراحی سایت:

برای تنظیم عرض استاندارد برای طراحی سایت با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده می‌کنند (768*1024) ، بهتر است عرض 980px را تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.

 

 

محل قرارگیری عناصر - خواص مربوط به Position

در این بخش از آموزش css به توضیح خواص مربوط به Position می‌پردازیم.

با استفاده از ویژگی Position موقعیت عنصر در صفحه را مشخص کنید. همچنین می‌توانید یک عنصر را پشت عنصر دیگر قرار دهید و اینکه چه اتفاقی بیفتد زمانی که محتوای یک عنصر بیش از اندازه بزرگ است.

عناصری که از ویژگی Position استفاده می‌کنند،ویژگی‌های زیر را نیز می‌توانند داشته باشند.

1. top

2. bottom

3. left

4. right

چهار روش مختلف برای موقعیت دهی عناصر در صفحه وجود دارد:

 

float

در این بخش از آموزش css به توضیح ویژگی محل قرارگیری عناصر - خواص Clear , Float می‌پردازیم.

با این ویژگی از css موقعیت یک عنصررا می‌توانید سمت چپ یا راست تنظیم کنید.

یکی از پرکاربردترین ویژگی‌ها در css می‌باشد. بادادن این ویژگی به تگ ها شما می‌توانید سایت های چند ستونه ایجاد کنید.

این خاصیت یکی از پایه های اساسی در طراحی قالب بر اساس div می‌باشد.

وقتی به یک عنصر در کد خود float به سمت چپ یا راست می‌دهید ، عنصر مورد نظر به آن سمت خاص میرود و بقیه عنصر هایی که بعد از تگ مذکور آمده اند و float ندارند به سمت مخالف رانده می‌شوند و اطراف عنصر مورد نظر قرار می‌گیرند.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

Opacity

با ویژگی

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

می‌توانید شفافیت تصاویر را تغییر دهید.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

در مثال بالا زمانیکه opacity=4 تنظیم شده است ، تصویر کدر تر نمایش داده می‌شود و زمانیکه opacity=100 در نظر گرفته شده است تصویر به صورت کاملا شفاف نمایش داده می‌شود. این حالت زمانی اتفاق می‌افتد که img: hover انجام گیرد. یعنی با زفتن ماوس روی تصویر عکس به صورت شفاف نمایش داده می‌شود.