تبلیغات
تبلیغات متنی
آموزشگاه آرایشگری مردانه شفیع رسالت
دکتر علی پرند فوق تخصص جراحی پلاستیک
بهترین دکتر پروتز سینه در تهران
محبوبترینها
راهنمای انتخاب شرکت‌های معتبر باربری برای حمل مایعات در ایران
چگونه اینورتر های صنعتی را عیب یابی و تعمیر کنیم؟
جاهای دیدنی قشم در شب که نباید از دست بدهید
سیگنال سهام چیست؟ مزایا و معایب استفاده از سیگنال خرید و فروش سهم
کاغذ دیواری از کجا بخرم؟ راهنمای جامع خرید کاغذ دیواری با کیفیت و قیمت مناسب
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
آفریقای جنوبی چگونه کشوری است؟
بهترین فروشگاه اینترنتی خرید کتاب زبان آلمانی: پیک زبان
با این روش ساده، فروش خود را چند برابر کنید (تست‌شده و 100٪ عملی)
خصوصیات نگین و سنگ های قیمتی از نگاه اسلام
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1866396901
آموزش 3/7 : ساخت سایه برای عکس با Css -
واضح آرشیو وب فارسی:سایت ریسک: آموزش 3/7 : ساخت سایه برای عکس با Css echessdesign 05 شهريور 1386, 00:39درود بر شما شاید پیش تر ها برای ساختن سایه عکس از فتوشاپ استفاده می کردید. نظرتون چیه که این دفعه بدون استفاده از هیچ عکسی، برای سایه دادن به عکس استفاده کنیم. در ابتدا سایه رو می سازیم: 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]--> در صورتی که عکس مورد نظر لینک باشه، و علاقه داشته باشیم که آن زمان که موس بر روی عکس می رود، رویدادی پیش آید، می توانیم عکس رو به مبدا بر گردونیم، یعنی مختصات عکس رو در حالت 0 قرار می دیم. کد به درستی در مرورگر های FF, Opera ، Safari کار میکنه، اما در IE 7 نه. زیرا تا برای حالتی که موس بر روی عکس میرود، برای آن خصیصه Position که مقدار آن برابر absolute باشد، تعریف نکنیم، عکس به مختصات 0 بر نمی گردد (اصطلاحا عکس را در صفحه شناور کنیم). از اونجا که مرورگر Safari در سیتم عامل win، برای زمانی که موس بر روع عکس میرود، از خصیصه position که مقدار اون رو absolute باشد، پشتیبانی نمی کند، کد مورد نیاز IE7 را در حلقه شرطی IE تعریف می کنیم. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta "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 می باشند. منبع: خودم () the-MA 26 مهر 1386, 07:37خواستم خواهش کنم در کنار این آموزش هایی که میذارید ... لطف کنید یه صفحه نمونه هم بذارید ... ( منظورم یه صفحه اماده هست که این کدها توش استفاده شده باشن) راستش این درخواست از اونجایی سرچشمه میگیره که توی آموزش مخفی کردن زمینه شفاف عکسهای پی ان جی من اصلا متوجه نشدم کدها رو چطور به هم ربط بدم !!! اگه لطف کنید و برای هر آموزش پر ارزشتون یه نمونه صفحه html هم قرار بدید دیگه فکر کنم کارتون تکمیله تکمیله ...!!! موفق باشید ... Hadi Moradi 02 اسفند 1386, 14:28منم با نظر دوستمونthe-ms موافقم.اگه یه نمونه هم بذلرید کارتون کامل که هست کاملتر میشه.
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 1407]
-
گوناگون
پربازدیدترینها