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

شروع موضوع توسط شايان ‏15 اکتبر 2004 در انجمن CSS

  1. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    يكي از بهترين راه هاي يادگيري CSS آناليز كردن مثال هاست !

    هر كس هر مثال قابل بحثي داره بذاره اينجا در موردش صحبت كنيم !
     
  2. خرید بک لینکبازدیدیار - افزایش بازدید سایت و سیگنال های برند
  3. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
  4. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
  5. ehsan

    ehsan Administrator

    تاریخ عضویت:
    ‏5 دسامبر 2002
    نوشته ها:
    7,924
    تشکر شده:
    3,608
    محل سکونت:
    Internet
    دمت گرم. من دیدم این مثال رو. خیلی خوب بود. با عوض کردن Opacity مربوط به هر کدوم از عکسها افکت خوبی برای حالت hover ایجاد کرده. با این کار دیگه لازم نیست دو تا عکس لود بشه و این افکت خیلی سریع عمل میکنه و Preload هم لازم نداره.
    یه نکته خیلی خوب این مثال هم اینه که با درنظر گرفتن browser های مختلف کاری کرده که توی همشون به خوبی عمل کنه.
    من عنوان این بحث رو عوض میکنم و توصیه میکنم برای هر مثالی که میزنید که تاپیک جدید درست کنید که توش در مورد همون بحث بشه فقط.
     
  6. nima178

    nima178 Registered User

    تاریخ عضویت:
    ‏2 سپتامبر 2004
    نوشته ها:
    868
    تشکر شده:
    12
    محل سکونت:
    همان جایی که اینجا نیست
    سلام
    راه اندازي سي اس اس را تبريك مي گويم!
    چون اطلاعات من در اين زمينه محدود است و اين بخش را به طور ديمي ياد گرفته ام
    بيشتر خواننده خواهم بود
    با تشكر از دوستان
    در ضمن شايد بهتر باشد از حامد بنايي نيز براي كمك بهره بگيريم با شناختي كه من از ايشان دارم
    احتمالا قبول خواهند كرد
     
  7. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    از اين افكت تو فوروم مجيد زياد استفاده شده ! ولي فكر ميكنم با Dhtml يا جاوااسكريپت استفاده كرده !

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

    ehsan Administrator

    تاریخ عضویت:
    ‏5 دسامبر 2002
    نوشته ها:
    7,924
    تشکر شده:
    3,608
    محل سکونت:
    Internet
    حالا که بحث در مورد تغییر 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 شدن رو تغییر داد.
     

    فایل های ضمیمه:

  9. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    خيلي خوب شد اينو گذاشتي ! اين قدرت CSS رو نشون ميده ! كه كاريو با اين همه برنامه نويسي بايد كرد ، بدون يك خط برنامه نويسي و فقط با Style انجام ميده !

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

    اين كار رو تو فلش با اين كد ها ميشه انجام داد ! ( بي ربط :D :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 ساده تره ! اگه خواستيد بذارم .
     
  10. ei_baba_bi_khial

    ei_baba_bi_khial Registered User

    تاریخ عضویت:
    ‏25 اکتبر 2003
    نوشته ها:
    678
    تشکر شده:
    17
    محل سکونت:
    Esfahan
    moz-opacity و opacity باعث میشه که فیلتر alpha رو موزیلا هم نشون بده! شایان میدونی برای بقیه فیلتر ها باید از چی استفاده کرد؟!
     
  11. ei_baba_bi_khial

    ei_baba_bi_khial Registered User

    تاریخ عضویت:
    ‏25 اکتبر 2003
    نوشته ها:
    678
    تشکر شده:
    17
    محل سکونت:
    Esfahan
    یه سوال دیگه در مورد فیلتر alpha ! کسی میدونه اگه بخوایم از opacity و finishopacity با هم برای یک شیئ استفاده کنیم باید چیکار کرد که موزیلا اونو نشون بده؟
     
  12. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    مثلا چه فيلتري ؟!
     
  13. ei_baba_bi_khial

    ei_baba_bi_khial Registered User

    تاریخ عضویت:
    ‏25 اکتبر 2003
    نوشته ها:
    678
    تشکر شده:
    17
    محل سکونت:
    Esfahan
    مثلا gray یا shadow یا blur ... :)
     
  14. ehsan

    ehsan Administrator

    تاریخ عضویت:
    ‏5 دسامبر 2002
    نوشته ها:
    7,924
    تشکر شده:
    3,608
    محل سکونت:
    Internet
  15. littlerabbit

    littlerabbit مدیر بازنشسته کاربر فعال

    تاریخ عضویت:
    ‏13 جولای 2003
    نوشته ها:
    667
    تشکر شده:
    5
    محل سکونت:
    Iran
    قشنگه ولي يه مشكلي هست : اينجا رو ببينيد :
    http://jigsaw.w3.org/css-validator/...z-opacity:+1.00;+opacity:+1 }&usermedium=all

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

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

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    html ش رو كه ميدون هيچي نداره ! :D يعني اصلا سر و ته نداره ! همينطوري گذاشتم كه فقط بچه ها ببينن !

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

    littlerabbit مدیر بازنشسته کاربر فعال

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

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

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    من XP دارم ... SP2 البته فكر كنم Blocker رو OFF كردم !
     
  19. ei_baba_bi_khial

    ei_baba_bi_khial Registered User

    تاریخ عضویت:
    ‏25 اکتبر 2003
    نوشته ها:
    678
    تشکر شده:
    17
    محل سکونت:
    Esfahan
    IE SP2 با فيلتر هام مشكل داره..در نسخه اي كه من دارم اگه فايل html رو مستقيما با دو بار كليك! باز كني اثر فيلتر ها رو نشون نميده!! :eek: :)
     
  20. Mashaheer

    Mashaheer مدیر بازنشسته کاربر فعال

    تاریخ عضویت:
    ‏5 می 2003
    نوشته ها:
    1,972
    تشکر شده:
    17
    محل سکونت:
    UAE
    دستت درد نكنه شايان جان
    اتفاقا من دنبال اين چيز بودم كه ميخواستم با سي اس اس انجام بدم كه بلد نبودم :)
     
  21. rejena

    rejena کاربر تازه وارد

    تاریخ عضویت:
    ‏3 مارس 2005
    نوشته ها:
    60
    تشکر شده:
    0
    محل سکونت:
    NeverLand
    ميشه در مورد فيلتر ها بيشتر توضيح بدين
    :blink:
     
عسل طبیعی و گرده گل ایرانیخدمات پی پال، وسترن یونیون