آژانس هواپیماییexchanging

ساخت سایه برای عکس با Css

شروع موضوع توسط cssdesign ‏27 آگوست 2007 در انجمن CSS

  1. cssdesign

    cssdesign Registered User

    تاریخ عضویت:
    ‏5 دسامبر 2006
    نوشته ها:
    319
    تشکر شده:
    2
    محل سکونت:
    sAri
    درود بر شما
    شاید پیش تر ها برای ساختن سایه عکس از فتوشاپ استفاده می کردید.
    نظرتون چیه که این دفعه بدون استفاده از هیچ عکسی، برای سایه دادن به عکس استفاده کنیم.
    در ابتدا سایه رو می سازیم:
    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]-->
    
    در صورتی که عکس مورد نظر لینک باشه، و علاقه داشته باشیم که آن زمان که موس بر روی عکس می رود، رویدادی پیش آید، می توانیم عکس رو به مبدا بر گردونیم، یعنی مختصات عکس رو در حالت 0 قرار می دیم.
    کد به درستی در مرورگر های 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 می باشند.
    منبع: خودم www.echessdesign.com
     
  2. Tony.65

    Tony.65 Registered User

    تاریخ عضویت:
    ‏30 نوامبر 2006
    نوشته ها:
    74
    تشکر شده:
    0
    محل سکونت:
    Success land
    روش خیلی جالبیه دوست عزیز.موفق باشی