کار با filter و تغییر opacity

[شايان]

يكي از بهترين راه هاي يادگيري CSS آناليز كردن مثال هاست !

هر كس هر مثال قابل بحثي داره بذاره اينجا در موردش صحبت كنيم !

 

[شايان]

اين فايل رو بگيريد ... نگاه كنيد !

اگر ديديد و خوب بود ... در موردش حرف بزنيم !

http://shayan.ws/css/picture_menu_opacity.zip

 

[شايان]

اگر نميخوايد سورسش رو دانلود كنيد ، اجرا شدش رو از اينجا ببينيد :

http://www.shayan.ws/css/pt_css_a_picture_menu.htm

 

[ehsan]

دمت گرم. من دیدم این مثال رو. خیلی خوب بود. با عوض کردن Opacity مربوط به هر کدوم از عکسها افکت خوبی برای حالت hover ایجاد کرده. با این کار دیگه لازم نیست دو تا عکس لود بشه و این افکت خیلی سریع عمل میکنه و Preload هم لازم نداره.
یه نکته خیلی خوب این مثال هم اینه که با درنظر گرفتن browser های مختلف کاری کرده که توی همشون به خوبی عمل کنه.
من عنوان این بحث رو عوض میکنم و توصیه میکنم برای هر مثالی که میزنید که تاپیک جدید درست کنید که توش در مورد همون بحث بشه فقط.

 

[nima178]

سلام
راه اندازي سي اس اس را تبريك مي گويم!
چون اطلاعات من در اين زمينه محدود است و اين بخش را به طور ديمي ياد گرفته ام
بيشتر خواننده خواهم بود
با تشكر از دوستان
در ضمن شايد بهتر باشد از حامد بنايي نيز براي كمك بهره بگيريم با شناختي كه من از ايشان دارم
احتمالا قبول خواهند كرد

 

[شايان]

از اين افكت تو فوروم مجيد زياد استفاده شده ! ولي فكر ميكنم با Dhtml يا جاوااسكريپت استفاده كرده !

ولي با اين دستورات CSS بدون حتي يك خط برنامه نويسي ... و با يك عكس ميشه افكت رو ايجاد كرد .

 

[ehsan]

حالا که بحث در مورد تغییر opacity است من قدیما با یه اسکریپت ساده ظاهر این تغییر opacity رو زیبا و کندتر میکردم و توی یه جایی از وبلاگم استفاده کرده بودم.
البته اینو اضافه کنم که دیگه از بحث css خارج میشیم ولی خب به موضوع بحث یه مقدار مربوطه.

<script>

FadeObjects = new Object();
FadeTimers = new Object();

function Fade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){
        setTimeout("Fade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
        
    clearTimeout(FadeTimers[object.sourceIndex]);
    
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;

    if (object.filters.alpha.opacity != destOp){
        FadeObjects[object.sourceIndex]=object;
        FadeTimers[object.sourceIndex]=setTimeout("Fade(FadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
</script>

و بعد کافیه که در حالتهای OnMouseOver و OnMouseOut از این function استفاده کنید.

<a href="http://www.blogger.com"><img width=88 height=31 src="http://buttons.blogger.com/bloggerbutton1.gif" style="filter:alpha(opacity=40)" onMouseOver="Fade(this,100,5,30)" onMouseOut="Fade(this,30,10,15)" border=0></a>

نتیجه رو توی فایلی که ضمیمه شده ببینید. فقط اونو به htm ذخیره کنید. میشه با پارامترهای این کد سرعت این fade شدن رو تغییر داد.

 

[شايان]

خيلي خوب شد اينو گذاشتي ! اين قدرت CSS رو نشون ميده ! كه كاريو با اين همه برنامه نويسي بايد كرد ، بدون يك خط برنامه نويسي و فقط با Style انجام ميده !

البته ! اين فرق رو هم باهم دارن كه با Script ميشه opacity رو به تدريج بالا پائين كرد ولي با CSS فقط مبدا و مقصد و ميشه نشون داد !

اين كار رو تو فلش با اين كد ها ميشه انجام داد ! ( بي ربط :lol: )

onClipEvent (load) {
    _alpha = 50;
}
onClipEvent (enterFrame) {
    if (hitTest(_root._xmouse, _root._ymouse, this)) {
        if (_alpha < 100) {
            _alpha = _alpha + 5;
        }
    } else {
        if (_alpha > 50) {
            _alpha = _alpha - 5;
        }
    }
}

اين كد براي Movie نوشته شده ! كه وقتي ماوس روش بره ،opacity زياد بشه ، وقتي كنار رفت كم بشه !

براي Botton ساده تره ! اگه خواستيد بذارم .

 

[ei_baba_bi_khial]

moz-opacity و opacity باعث میشه که فیلتر alpha رو موزیلا هم نشون بده! شایان میدونی برای بقیه فیلتر ها باید از چی استفاده کرد؟!

 

[ei_baba_bi_khial]

یه سوال دیگه در مورد فیلتر alpha ! کسی میدونه اگه بخوایم از opacity و finishopacity با هم برای یک شیئ استفاده کنیم باید چیکار کرد که موزیلا اونو نشون بده؟

 

[شايان]

moz-opacity و opacity باعث میشه که فیلتر alpha رو موزیلا هم نشون بده! شایان میدونی برای بقیه فیلتر ها باید از چی استفاده کرد؟!

مثلا چه فيلتري ؟!

 

[ei_baba_bi_khial]

مثلا چه فيلتري ؟!

مثلا gray یا shadow یا blur ...

 

[ehsan]

در تکمیل این بحث اینو حتما ببینید. اطلاعات خوبی داره
http://www.mandarindesign.com/opacity.html
و همچنین این:
http://www.mandarindesign.com/opacityblending.html

من در مورد بقیه browser ها جستجو کردم و فقط moz-opacity داریم.

 

[littlerabbit]

قشنگه ولي يه مشكلي هست : اينجا رو ببينيد :
http://jigsaw.w3.org/css-validator/...z-opacity:+1.00;+opacity:+1 }&usermedium=all

لينكش خفن شد ولي ببينيد همين فايلي كه شايان داده بود چك كرده (اين سايت w3c كل استانداردهاي مربوط به css و html رو تعيين ميكنه.)

اين نشون ميده كه دست كم ده تا خطا داره. علاوه بر همه اينها يه چند تايي رو هم نميشناسه البته اين مربوط به نسخه 1.1 هست و هنوز هم نسخه ديگه اي معرفي نشده.

 

[شايان]

html ش رو كه ميدون هيچي نداره ! يعني اصلا سر و ته نداره ! همينطوري گذاشتم كه فقط بچه ها ببينن !

ولي CSS ش ديگه چه مشكلي داره ؟!؟!

 

[littlerabbit]

html ش رو كه ميدون هيچي نداره ! يعني اصلا سر و ته نداره ! همينطوري گذاشتم كه فقط بچه ها ببينن !

ولي CSS ش ديگه چه مشكلي داره ؟!؟!

منم که فقط استیل شیت رو از اون جدا کرده بودم و گرنه تیدی از این HTML یه چیزی در خدود 4یا 5تا خطا میگیره! (تیدی یک HTML Checkerمعرکه و Open source هست که میتونید از http://tidy.sourceforge.net بگبریدش) من فقط قسمت استیل شیت رو منظورم بود! اون لينكي كه گذاشتم ببين اشكالاتشو ميبيني.

راستی تو ویندوز XP با اون popup blocker خودش (سرویس پک 2)اگه این فایلو بصورت لوکال (یعنی تو ویندوز روش دوبار کلیک کنی) ببینی یه خطا میده و عمل نمیکنه.

 

[شايان]

من XP دارم ... SP2 البته فكر كنم Blocker رو OFF كردم !

 

[ei_baba_bi_khial]

راستی تو ویندوز XP با اون popup blocker خودش (سرویس پک 2)اگه این فایلو بصورت لوکال (یعنی تو ویندوز روش دوبار کلیک کنی) ببینی یه خطا میده و عمل نمیکنه.

IE SP2 با فيلتر هام مشكل داره..در نسخه اي كه من دارم اگه فايل html رو مستقيما با دو بار كليك! باز كني اثر فيلتر ها رو نشون نميده!!

 

[Mashaheer]

دستت درد نكنه شايان جان
اتفاقا من دنبال اين چيز بودم كه ميخواستم با سي اس اس انجام بدم كه بلد نبودم

 

[rejena]

ميشه در مورد فيلتر ها بيشتر توضيح بدين
:blink: