رفتن به مطلب

ارسال های توصیه شده

uvpd80x3ho7candv24ya.png

زمانی که 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 رو یاد بگیرید.

لینک به دیدگاه

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

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

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

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

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

1. file -> new -> web site

eyd94z8y82976xj13uq8.png

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

rcy7otjudfdueou9nw.png

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

 

417ucp3qxjx0aks2mvf.png

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

 

 

n6sz0hq4m21asejvta8.png

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

 

ساختار CSS

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

انتخابگر 
{
مقدار خاصیت : خاصیت ;
}

مثال:

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

div { 
  width:500px;
   height:200px;
}

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

لینک به دیدگاه
  • 4 هفته بعد...

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

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

1. درون خطی

2. css داخلی

3. css خارجی

 

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

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

مثال:

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title></title>
   </head>
   <body>
       <p style="background:yellow;color:red;">
           hello
       </p>
   </body>
</html>

 

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

 

2. css داخلی:

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

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title></title>
       <style>
           p 
          {
               background:yellow;
               color:red;
           }
       </style>
   </head>
   <body>
       <p>
           hello
       </p>
   </body>
</html>

 

3. css خارجی

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

 

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

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

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

p
{
    background:yellow;
    color:red;
}

 

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

 

مثال:

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

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title></title>
       <link href="mycss.css" rel="stylesheet" />
   </head>
   <body>
       <p>
           hello
       </p>
   </body>
</html>

نکته مهم:

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

 

اولیت ها:

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

 

 

 

لینک به دیدگاه

جلسه 3:

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

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

 

در فایل html
<head> <link href="mycss.css" rel="stylesheet" /> 
<title></title>
</head>

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

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

در فایل css
div {
width:500px;
height:400px;
}

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

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

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

 

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

<body><div id="mydiv1"></div>
<div id="mydiv2"></div>
</body>

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

#mydiv1 {
width:500px
; height:400px;
background-color:red;}
#mydiv2 
{
width:800px;
height:600px;
background-color:yellow;
}

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

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

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

 

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

<body><div class="myclass"></div>
<table class="myclass">
<tr>
<td>hello</td>
</tr>
</table>
</body>

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

.myclass{
background-color:blue;
width:800px;
height:600px;
}

توضیحات
:

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

 

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

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

مثال :
background-color:red;

 

2. مقدار دهی هگزا دسیمال:
که بصورت شش عدد در مبنای هگزا می باشد. RRGGBB#

مثال :
background-color:#0011ff;

 

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

مثال :
background-color:rgb(12,200,150);

 

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

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

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

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

لینک به دیدگاه

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

 

1. Background-image:

[font=byekan]background-image:url(../پسوند.مسیر);[/font]

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

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

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

 

مثال:

در فایل css

[font=byekan]body [/font]
[font=byekan]{[/font]
[font=byekan]    background-image:url(../img/1.jpg);[/font]
[font=byekan]}[/font]

نکته:

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

 

2. Background-repeat:

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

 


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

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

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

مثال:

در فایل css:

[color=#333333][font=byekan]body [/font][/color]
[color=#333333][font=byekan]{[/font][/color]
[color=#333333][font=byekan]    background-image:url(../img/1.jpg);[/font][/color]
[color=#333333][font=byekan]    background-repeat:repeat-x;[/font][/color]
[color=#333333][font=byekan]}[/font][/color]

3. background-attachment:

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

 


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

مثال:

در فایل css

[color=#333333][font=byekan]body [/font][/color]
[color=#333333][font=byekan]{[/font][/color]
[color=#333333][font=byekan]    background-image:url(../img/1.jpg);[/font][/color]
[color=#333333][font=byekan]    background-attachment:fixed;[/font][/color]
[color=#333333][font=byekan]}[/font][/color]

4. background-position:

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

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

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

 

مثال:

در فایل css

[color=#333333][font=byekan]body [/font][/color]
[color=#333333][font=byekan]{[/font][/color]
[color=#333333][font=byekan]    background-image:url(../img/1.jpg);[/font][/color]
[color=#333333][font=byekan]    background-repeat:no-repeat;[/font][/color]
[color=#333333][font=byekan]    background-position:top;[/font][/color]
[color=#333333][font=byekan]}[/font][/color]

4. background-position-x:

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

 

5. background-position-y :

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

 

مثال:

در فایل css

[color=#333333][font=byekan]body[/font][/color]
[color=#333333][font=byekan] {[/font][/color]
[color=#333333][font=byekan]    background-image:url(../img/1.jpg);[/font][/color]
[color=#333333][font=byekan]    background-position-x:400px;[/font][/color]
[color=#333333][font=byekan]    background-position-y:300px;[/font][/color]
[color=#333333][font=byekan]}[/font][/color]

لینک به دیدگاه

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

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

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

 

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

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

body 
{
   background:linear-gradient(red,blue);
}

نکته:

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

 

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

body {    background:linear-gradient(red,blue);
   width:500px;
   height:200px;
}

za0dzjet5c9i53f7n5u.jpg

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

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

    background:linear-gradient(70deg,red,blue);

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

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

[font=byekan] background:linear-gradient(red 30%,blue 50%);[/font]

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

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

    background:repeating-linear-gradient(red,blue 10px);

گرادیانت radial:

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

body {
   background:radial-gradient(red,blue,yellow);
   width:500px;
   height:500px;
}

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

body {
   background:radial-gradient(circle,red,blue,yellow);
   width:500px;
   height:500px;
}

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

    background:radial-gradient(100px 100px,red,blue,yellow);

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

n3unqr1ivgs7cnzz33g4.jpg

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

body {
   background:radial-gradient(circle at 50px 50px,red,blue,yellow);
   width:500px;
   height:500px;
}

msnnn3x5bj2a3p2g0br.png

نکته:

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

 

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

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

body {
   background:repeating-radial-gradient(red,blue,yellow 20%);
   width:500px;
   height:500px;
}

شفافیت رنگ ها

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

 

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

در فایل css:

#mydiv {
   width:500px;
   height:500px;
   background-color:red;
   opacity:0.3;
}

در فایل html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <link href="mycss.css" rel="stylesheet" />
   <title></title>
</head>
<body>
   <div id="mydiv">css3</div>
</body>
</html>

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

در فایل css

#mydiv {
   width:500px;
   height:500px;
   background-color:rgba(255, 0, 0,0.3);
}

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

qyg61fmtc5rhj6hjzsh6.jpg

لینک به دیدگاه

جلسه 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 می توان خصوصیات زیر را برای فونت قلم در نظر گرفت:

p {    font-family:'Adobe Fan Heiti Std','Adobe Caslon Pro';
   font-size:50px;
   direction:rtl;
   font-style:italic;
   font-weight:500;
   color:red;
   text-align:justify;
}

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

 

مثال:

 

a{
[color=#000000] text-decoration: none;
[/color][font=byekan][color=#000000]}
[/color][/font]

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

 

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

 

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

 

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

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

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

    text-shadow: 5px 10px 10px red;

لینک به دیدگاه
  • 5 ماه بعد...

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

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

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

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

p
{
   height: 100px;
}

 

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

 

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

p
{
  max-height: 50px;
}

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

 p
{
   max-width: 100px;
}

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

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

 p
{
   min-height: 100px;
}

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

p
{
min-width: 1000px;
}

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

p. 
{
width: 100px;
}

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

برای تنظیم عرض استاندارد برای طراحی سایت با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده می‌کنند (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 ندارند به سمت مخالف رانده می‌شوند و اطراف عنصر مورد نظر قرار می‌گیرند.

. text 
{
float: left;
width: 110px;
height: 90px;
margin: 5px;
}

Opacity

با ویژگی Opacity می‌توانید شفافیت تصاویر را تغییر دهید.

img
{
opacity: 0.4;
filter: alpha (opacity=40) ; /* For IE8 and earlier */
}
img: hover
{
opacity: 1. 0;
filter: alpha (opacity=100) ; /* For IE8 and earlier */
}

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

لینک به دیدگاه

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...