محبوبترینها
مزایای آستر مدول الیاف سرامیکی یا زد بلوک
سررسید تبلیغاتی 1404 چگونه می‌تواند برندینگ کسب‌وکارتان را تقویت کند؟
چگونه با ثبت آگهی رایگان در سایت های نیازمندیها، کسب و کارتان را به دیگران معرفی کنید؟
بهترین لوله برای لوله کشی آب ساختمان
دانلود آهنگ های برتر ایرانی و خارجی 2024
ماندگاری بیشتر محصولات باغ شما با این روش ساده!
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1853827072
آموزش 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]
[تعداد بازديد از اين مطلب: 1402]
-
گوناگون
پربازدیدترینها