/ آموزش ساخت یک افکت هاور ویژه تصاویر (اختصاصی ویکی وی بی)
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 9 از 9

موضوع: آموزش ساخت یک افکت هاور ویژه تصاویر (اختصاصی ویکی وی بی)

  1. #1
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir

    آموزش ساخت یک افکت هاور ویژه تصاویر (اختصاصی ویکی وی بی)

    درود.
    خب می خوایم در این آموزش یک هاور بسازیم که مخصوص تصاویر هستن مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    همین الان بگم که این آموزش با لوگوی فعلی ویکی وی بی فرق داره چونکه لوگوی ویکی وی بی با اسپرایت اینطوری شده اما ما می خوایم یک افکت ساده رو اجرا بکنیم
    خب اول از همه دو تا عکس رو جدا می کنیم اینطوری :
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    و حالت بعدیش (سیاه سفید)


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    خوبه ! حالا خیلی سریع با html اینها رو می نویسیم :

    کد:
    <div class="logo"></div>
    تمام شد ! حالا با سی اس اس کلس رو ایجاد می کنیم :
    کد:
    .logo {
    
    
    }
    عالی ! خب من به خاطر اینکه حجم آموزش زیاد نشه خیلی توضیح نمی دم و خیلی سریع کارمونو تمام می کنیم
    خب یه خاصیت بگراند می دیم بهش حالا با عکسی که آپلود کردیم :
    کد:
    background: url(http://upload.wikivb.ir/images/1erbpwfapzjegc4mm45a.png);
    من خودم توی کد نویسی no-repeat نمی دم ! آخه چه سودی داره ! برای اینکه تکرار نشه ؟ ! خب طول و عرض می دیم ، اول و آخر باید طول و عرض بدیم پس دیگه اون برای چیه مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی پس منم نمی به نظر من شما هم نزارید بهتره
    این طول و عرض رو اضافه می کنیم تا نمایش بده :
    کد:
    width: 118px;
    height: 104px;
    تمام شد !
    نیازی به سورس هم نیست چونکه چیزی نبود ! اما الان افکتی نداره ! پس این خاصیت ها رو بهش می دیم :
    این خاصیت انیمیشن هست بر 2 ثانیه هم تنظیم کردیم :
    کد:
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    حالا یک کلس جدید اینطوری ایجاد می کنیم و خاصیت بگراند هم مثل کلس قبلی بهش می دم فقط لینک عکس رو عکس دوم می دیم ( طول و عرض هم نمی خوات چونکه همه چیز از قبلی خودش اتوماتیک در هاور تکرار میشه)
    کد:
    .logo:hover {
    background: url(http://upload.wikivb.ir/images/z4r58cokl30xw909vj.png);
    }
    آموزش تمام شد !
    حالا یه سورس می زاریم
    html :
    کد:
    <div class="logo"></div>
    css :
    کد:
    .logo {
    background: url(http://upload.wikivb.ir/images/1erbpwfapzjegc4mm45a.png);
    width: 118px;
    height: 104px;
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    }
    
    
    .logo:hover {
    background: url(http://upload.wikivb.ir/images/z4r58cokl30xw909vj.png);
    }
    دیدید چقدر ساده بود ! و زیبا !
    امیدوارم تونسته باشم رضایت شما را جلب کنم
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    11 نفر از اعضا پست CodeSaz را پسندیده اند


    Coming Soon New Project ■

  2. نوين وردپرس تبلیغات شما

  3. #2
    Ali.shafaey آنلاین نیست.
    Ali.shafaey
    کاربر برتر فصل
    مدير ارشد
    6,425نوشته8,292مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1571
    پسندیده است
    4,628 پست
    بلاگ
    پست
    میزان امتیاز
    8298
    مسئول 7 ستاره
    king-design.ir
    ممنون
    ولی الان چی شد؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    یعنی در نتیجه عکس چجوری میشه؟

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #3
    Mahdi-MA آنلاین نیست.
    Mahdi-MA
    کاربر سايت
    113نوشته76مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    36
    پسندیده است
    68 پست
    بلاگ
    0 پست
    میزان امتیاز
    86
    No Set
    نقل قول نوشته اصلی توسط ali.sh نمایش پست ها
    ممنون
    ولی الان چی شد؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    یعنی در نتیجه عکس چجوری میشه؟
    مثل هدر ویکی ویبی وقتی نشانشگر ماوس روش قرار بگیره میره روی تصویر بعدی.

  5. #4
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    درود.
    خوبه گفتم مثل لوگو ویکی وی بی نیست مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    این مکانش تکون نمی خوره ! موس می ره روش سیاه سفید میشه
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    Coming Soon New Project ■

  6. #5
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    نقل قول نوشته اصلی توسط Dξ3ІGПEЯ نمایش پست ها
    درود.
    خوبه گفتم مثل لوگو ویکی وی بی نیست مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    این مکانش تکون نمی خوره ! موس می ره روش سیاه سفید میشه
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خیلی خیلی ممنون بله درسته بنده یک چا رو اشتباه میرفتم.مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    - - - Updated - - -

    نقل قول نوشته اصلی توسط Dξ3ІGПEЯ نمایش پست ها
    درود.
    خوبه گفتم مثل لوگو ویکی وی بی نیست مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    این مکانش تکون نمی خوره ! موس می ره روش سیاه سفید میشه
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خیلی خیلی ممنون بله درسته بنده یک چا رو اشتباه میرفتم.مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست local را پسندیده است:


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  7. #6
    tafi آنلاین نیست.
    tafi
    کاربر سايت
    123نوشته283مورد پسند

    تاریخ عضویت
    Jan 2013
    شماره عضویت
    438
    پسندیده است
    157 پست
    بلاگ
    پست
    میزان امتیاز
    293
    www.funport.ir
    خب چیکار کنیم مثل اون باشه یعنی از سمت چپ بالا یا راست اینا بیاد ؟؟؟؟ مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    کاربران و بازدید سایت و انجمن شما را تضمین میکنیم

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  8. #7
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    درود.
    برای اینکه مثل لوگو ویکی وی بی باشه باید اسپرایت باشه
    قولشو نمی دم اما سعی می کنم آموزشش رو بزارم
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست CodeSaz را پسندیده است:


    Coming Soon New Project ■

  9. #8
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    ممد آموزش هات حرف نداره مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


    اینا جاشون تو قسمت ویژه هستا مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    - - - Updated - - -

    عــــالـــــی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست Farshad Ghanbari را پسندیده است:



  10. #9
    C.I.A آنلاین نیست.
    C.I.A
    کاربر سايت
    393نوشته207مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    2035
    پسندیده است
    197 پست
    بلاگ
    2 پست
    میزان امتیاز
    217
    holoo-f.ir
    نقل قول نوشته اصلی توسط Dξ3ІGПEЯ نمایش پست ها
    درود.
    خب می خوایم در این آموزش یک هاور بسازیم که مخصوص تصاویر هستن مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    همین الان بگم که این آموزش با لوگوی فعلی ویکی وی بی فرق داره چونکه لوگوی ویکی وی بی با اسپرایت اینطوری شده اما ما می خوایم یک افکت ساده رو اجرا بکنیم
    خب اول از همه دو تا عکس رو جدا می کنیم اینطوری :
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    و حالت بعدیش (سیاه سفید)


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    خوبه ! حالا خیلی سریع با html اینها رو می نویسیم :

    کد:
    <div class="logo"></div>
    تمام شد ! حالا با سی اس اس کلس رو ایجاد می کنیم :
    کد:
    .logo {
    
    
    }
    عالی ! خب من به خاطر اینکه حجم آموزش زیاد نشه خیلی توضیح نمی دم و خیلی سریع کارمونو تمام می کنیم
    خب یه خاصیت بگراند می دیم بهش حالا با عکسی که آپلود کردیم :
    کد:
    background: url(http://upload.wikivb.ir/images/1erbpwfapzjegc4mm45a.png);
    من خودم توی کد نویسی no-repeat نمی دم ! آخه چه سودی داره ! برای اینکه تکرار نشه ؟ ! خب طول و عرض می دیم ، اول و آخر باید طول و عرض بدیم پس دیگه اون برای چیه مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی پس منم نمی به نظر من شما هم نزارید بهتره
    این طول و عرض رو اضافه می کنیم تا نمایش بده :
    کد:
    width: 118px;
    height: 104px;
    تمام شد !
    نیازی به سورس هم نیست چونکه چیزی نبود ! اما الان افکتی نداره ! پس این خاصیت ها رو بهش می دیم :
    این خاصیت انیمیشن هست بر 2 ثانیه هم تنظیم کردیم :
    کد:
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    حالا یک کلس جدید اینطوری ایجاد می کنیم و خاصیت بگراند هم مثل کلس قبلی بهش می دم فقط لینک عکس رو عکس دوم می دیم ( طول و عرض هم نمی خوات چونکه همه چیز از قبلی خودش اتوماتیک در هاور تکرار میشه)
    کد:
    .logo:hover {
    background: url(http://upload.wikivb.ir/images/z4r58cokl30xw909vj.png);
    }
    آموزش تمام شد !
    حالا یه سورس می زاریم
    html :
    کد:
    <div class="logo"></div>
    css :
    کد:
    .logo {
    background: url(http://upload.wikivb.ir/images/1erbpwfapzjegc4mm45a.png);
    width: 118px;
    height: 104px;
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    }
    
    
    .logo:hover {
    background: url(http://upload.wikivb.ir/images/z4r58cokl30xw909vj.png);
    }
    دیدید چقدر ساده بود ! و زیبا !
    امیدوارم تونسته باشم رضایت شما را جلب کنم
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ایول داداش اگه بدونی چقدر بدردم خورد

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

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

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

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

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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