تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 1 از 1

موضوع: [CSS] ظاهر شدن عکس ، نوشته و توضیح در سلكتور hover !

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 14.0.1
    میزان امتیاز
    80

    پیش فرض [CSS] ظاهر شدن عکس ، نوشته و توضیح در سلكتور hover !

    درود !
    با یه آموزش بسیار عالی و اختصاصی در خدمت شما هستیم
    اول دمو رو ببینید ( این دمو همه ی آموزشو توش داره اما ما تک تک آموزش میدیم) .
    http://padz.zzl.org/vbiran/minicss/tiper.html



    • مرحله اول : اومدن عکس در صورت اومدن موس روی عکس !
    • شاید شما هم میخواید یه تولتیپ بسیار زیبا درست کنید . مثلا شما یک عکس که شامل توضیحات هست رو در نظر میگیرید و در نظر دارید با اومدن موس روی یه عکس دیگه اون عکس که شامل توضیحاته بیاد ! ( در دمو عکس آبی عکس اصلیه و عکس کوچیک لوگو وی بی ایران نقش tooltip رو داره ! )

    میریم سر آموزش : فرض کنید این کد سورس ما هست :
    کد PHP:
    <div class="vbiranparssofttiper">
    <
    img src="http://myup.ir/images/20844450377752411588.jpg">
    <
    span><img  src="http://www.vbiran.ir/images/vbiranv5/statusicon/forum_new-48.png"/></span>
    </
    div
    اگه این رو خالی و بدون استایل در نظر بگیرید فقط دو تا عکس زیر هم هستن .
    اما با اضافه کردن استایل :
    کد PHP:
    .vbiranparssofttiper {
        
        -
    webkit-transitionall 0.5s ease;
        -
    moz-transitionall 0.5s ease;
        -
    o-transitionall 0.5s ease;
    }
     

    }
    .
    vbiranparssofttiper span opacity:0;     -webkit-transitionall 0.5s ease; -moz-transitionall 0.5s ease;-o-transitionall 0.5s ease;transitionall 0.5s ease;}
    .
    vbiranparssofttiper:hover span opacity:1; -webkit-transitionall 0.5s ease; -moz-transitionall 0.5s ease;-o-transitionall 0.5s ease;transitionall 0.5s ease;} 
    ( اگه میخواین tooltip بیاد خط پایین یه <br> بزنید )


    • مرحله دوم: اومدن متن بعد از اوردن موس رو عکس !
    • این مرحله دقیقا مثله مرحله قبلیه با یکم تغییر ... به این دو تا مشخصه توجه کنید و خودتون متوجه میشید color , line-height

    کد PHP:
    .vbiranparssofttiper {
        
    line-height0px;
        
    colortransparent;
        
    font-size35px;
        -
    webkit-transitionall 0.5s ease;
        -
    moz-transitionall 0.5s ease;
        -
    o-transitionall 0.5s ease;
        
    font-family:tahoma;
    }
     
    .
    vbiranparssofttiper:hover {
        
    line-height30px;
        
    colorblack;




    موفق باشید
    ویرایش توسط jcs.w : 2012/12/12 در ساعت 03:49 PM

    7 تشکر توسط:

    Retired Mod <




  2. گیفت کارت آیتونز

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. آموزش قرار دادن آواتار درون یک کادر ساده ( + افکت Hover )
    توسط VBIran در انجمن آموزش های وی بولتین
    پاسخ: 23
    آخرين نوشته: 2012/12/14, 12:52 PM
  2. استایل دادن به input field ها به وسیله سلکتور های hover و focus
    توسط jcs.w در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2012/08/16, 09:04 PM
  3. در خواست اسكريپت دايركتوري
    توسط reza13641 در انجمن دانلود اسکریپت های صد در صد نال شده
    پاسخ: 13
    آخرين نوشته: 2012/06/15, 11:35 PM
  4. سوال در مورد افکت hover
    توسط Nama136te در انجمن پرسش و پاسخ
    پاسخ: 3
    آخرين نوشته: 2011/11/06, 12:25 AM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •