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

شايان

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

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

ehsan

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

nima178

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

شايان

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

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

ehsan

Administrator
حالا که بحث در مورد تغییر 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 فقط مبدا و مقصد و ميشه نشون داد !

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

ei_baba_bi_khial

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

ei_baba_bi_khial

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

littlerabbit

مدیر بازنشسته
کاربر فعال
قشنگه ولي يه مشكلي هست : اينجا رو ببينيد :
http://jigsaw.w3.org/css-validator/validator?text= IMG+{ BORDER-TOP-WIDTH:+0px;+BORDER-LEFT-WIDTH:+0px;+BORDER-BOTTOM-WIDTH:+0px;+BORDER-RIGHT-WIDTH:+0px } #menu+{ POSITION:+relative;+TOP:+0px;+HEIGHT:+100px } #menu+A:visited+{ FONT-WEIGHT:+bold;+COLOR:+#d00;+TEXT-DECORATION:+none } #menu+A+{ FONT-WEIGHT:+bold;+COLOR:+#d00;+TEXT-DECORATION:+none } #menu+A:visited+IMG+{ FILTER:+progid:DXImageTransform.Microsoft.Alpha(opacity=40);+moz-opacity:+0.40;+opacity:+0.4 } #menu+A+IMG+{ FILTER:+progid:DXImageTransform.Microsoft.Alpha(opacity=40);+moz-opacity:+0.40;+opacity:+0.4 } #menu+A:hover+{ COLOR:+#f88;+BACKGROUND-COLOR:+transparent } #menu+A:hover+IMG+{ FILTER:+progid:DXImageTransform.Microsoft.Alpha(opacity=100);+moz-opacity:+1.00;+opacity:+1 }&usermedium=all

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

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

شايان

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

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

littlerabbit

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

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

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

ei_baba_bi_khial

Registered User
به نقل از littlerabbit :
راستی تو ویندوز XP با اون popup blocker خودش (سرویس پک 2)اگه این فایلو بصورت لوکال (یعنی تو ویندوز روش دوبار کلیک کنی) ببینی یه خطا میده و عمل نمیکنه.
IE SP2 با فيلتر هام مشكل داره..در نسخه اي كه من دارم اگه فايل html رو مستقيما با دو بار كليك! باز كني اثر فيلتر ها رو نشون نميده!! :eek: :)
 

Mashaheer

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