echessdesign
مدیر انجمن طراحی وب
درود بر شما
شاید پیش تر ها برای ساختن سایه عکس از فتوشاپ استفاده می کردید.
نظرتون چیه که این دفعه بدون استفاده از هیچ عکسی، برای سایه دادن به عکس استفاده کنیم.
در ابتدا سایه رو می سازیم:
در کد بالا، به پاراگرافمون ،طول و عرضی برار با عکسی که قراره در آن قرار دهیم دادیم. ما از رنگ پس زمینه ای که به پاراگراف دادیم به عنوان سایه استفاده می کنیم.
خب حالا نوبت عکس مورد نظر است:
خوب ، ابعاد عکس مورد نظر رو تعیین کردیم. از آنجا که نور فرضی، از سمت بالا و چپ به عکس می تابه، در نتیجه سایه های عکس باید در سمت راست و پایین عکس نمایش داده شوند. در نتیجه نیاز هست که عکس مورد نظر رو نسبت به موقعیت پاراگراف، به سمت بالا و چپ ببریم. کار مون تمام شد.
زمانی که عکس لینک باشه:
در صورتی که عکس مورد نظر لینک باشه، و علاقه داشته باشیم که آن زمان که موس بر روی عکس می رود، رویدادی پیش آید، می توانیم عکس رو به مبدا بر گردونیم، یعنی مختصات عکس رو در حالت 0 قرار می دیم.
کد به درستی در مرورگر های FF, Opera ، Safari کار میکنه، اما در IE 7 نه. زیرا تا برای حالتی که موس بر روی عکس میرود، برای آن خصیصه Position که مقدار آن برابر absolute باشد، تعریف نکنیم، عکس به مختصات 0 بر نمی گردد (اصطلاحا عکس را در صفحه شناور کنیم).
از اونجا که مرورگر Safari در سیتم عامل win، برای زمانی که موس بر روع عکس میرود، از خصیصه position که مقدار اون رو absolute باشد، پشتیبانی نمی کند، کد مورد نیاز IE7 را در حلقه شرطی IE تعریف می کنیم.
------------
چندین روش برای ایجاد سایه برای عکس توسط CSS وجود دارد که به نظر خودم، ساده ترین اون رو گفتم. تمام روش ها ابتکاری هستند. چون این روش رو در مطالعه مقالات خارجی CSS ابتکاری خلق کردم، اطمینان داشته باشید که اولین از این نوع رو به زبان پارسی می خونید.
کدها کاملا تحت استاندارد w3c.org می باشند.
منبع: تارنمای پارسیان
شاید پیش تر ها برای ساختن سایه عکس از فتوشاپ استفاده می کردید.
نظرتون چیه که این دفعه بدون استفاده از هیچ عکسی، برای سایه دادن به عکس استفاده کنیم.
در ابتدا سایه رو می سازیم:
HTML:
p {
position:relative;
width:195px;
height:117px;
background:#ccc;
}خب حالا نوبت عکس مورد نظر است:
HTML:
p img {
position:relative;
width:195px;
height:117px;
top:-5px;
left:-5px;
border:0;
}زمانی که عکس لینک باشه:
HTML:
p a:hover img {
left:0;
top:0;
border:0;
/*Khasiseh Position ro, Be eleate support nakaradan (dar in vaziat) dar Safari 3.0 dar Win , sarfeh nazar mikonim*/
}
</style>
<!--[if IE]><style type="text/css">p a:hover img {position:absolute;/*inam mahze dele IE*/}</style><![endif]-->کد به درستی در مرورگر های FF, Opera ، Safari کار میکنه، اما در IE 7 نه. زیرا تا برای حالتی که موس بر روی عکس میرود، برای آن خصیصه Position که مقدار آن برابر absolute باشد، تعریف نکنیم، عکس به مختصات 0 بر نمی گردد (اصطلاحا عکس را در صفحه شناور کنیم).
از اونجا که مرورگر Safari در سیتم عامل win، برای زمانی که موس بر روع عکس میرود، از خصیصه position که مقدار اون رو absolute باشد، پشتیبانی نمی کند، کد مورد نیاز IE7 را در حلقه شرطی IE تعریف می کنیم.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>echessdesign.com</title>
<style type="text/css">
p {
position:relative;
width:195px;
height:117px;
background:#ccc;
}
p img {
position:relative;
width:195px;
height:117px;
top:-5px;
left:-5px;
border:0;
}
p a:hover img {
left:0;
top:0;
border:0;
/*Khasiseh Position ro, Be eleate support nakaradan (dar in vaziat) dar Safari 3.0 dar Win , sarfeh nazar mikonim*/
}
</style>
<!--[if IE]><style type="text/css">p a:hover img {position:absolute;/*inam mahze dele IE*/}</style><![endif]-->
</head>
<body>
<p>
<a href="echessdesign.com">
<img src="echessdesign.jpg" alt="" />
</a>
</p>
</body>
</html>چندین روش برای ایجاد سایه برای عکس توسط CSS وجود دارد که به نظر خودم، ساده ترین اون رو گفتم. تمام روش ها ابتکاری هستند. چون این روش رو در مطالعه مقالات خارجی CSS ابتکاری خلق کردم، اطمینان داشته باشید که اولین از این نوع رو به زبان پارسی می خونید.
کدها کاملا تحت استاندارد w3c.org می باشند.
منبع: تارنمای پارسیان
آخرین ویرایش:
