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

موضوع: سایه دار شدن تصویر یا کادر با بردن ماوس روی آن (Hover-CSS3)

  1. #1
    amirashkan آنلاین نیست.
    amirashkan
    کاربر سايت
    8نوشته19مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    46
    پسندیده است
    5 پست
    بلاگ
    0 پست
    میزان امتیاز
    29
    No Set

    سایه دار شدن تصویر یا کادر با بردن ماوس روی آن (Hover-CSS3)

    درود!

    در این آموزش قصد دارم قسمتی ازCSS Hoverرا به شما عزیزان آموزش دهم!

    برای این کار طبق معمول کادر اولیه رو ایجاد میکنیم!


    کد استایل:


    کد:
    .witest
    width:220px;
    height:180px;
    background-color:#00c6ff;
    border-radius:15px;
    حالا از همین کد یه کپی میگیریم و اون رو در استایل های قالبمون و زیر همون استایل هایwitest قرار میدیم!منتها بعد از نام استایل( witest ) کلمه :hoverرو قرار میدیم!
    به این صورت:

    کد:
    .witest:hover
    width:220px;
    height:180px;
    background-color:#00c6ff;
    border-radius:15px;
    box-shadow:  0 0 40px #000;
    { دقت کنید که در استایلwitest:hover باید تغییرات مورد نظرمون رو اعمال کنیم! }






    کد نهایی به این صورت خواهد شد:


    کد:
    <html>
    
    
    <head>
    
    
    <style type="text/css">
    
    
    
    
    .witest
    {
    width:220px;
    height:180px;
    background-color:#00c6ff;
    border-radius:15px;
    
    
    
    
    
    
    }
    
    
    .witest:hover
    {
    width:220px;
    height:180px;
    background-color:#00c6ff;
    border-radius:15px;
    box-shadow:  0 0 40px #000;
    
    
    
    
    }
    
    
    
    
    
    
    
    
    
    
    </style>
    
    
    
    
    </head>
    
    
    
    
    <body>
    
    
    <div class="witest">
    
    
    </div>
    
    
    
    
    
    
    
    
    </body>
    
    
    </html>


    امیدوارم این آموزش مورد پسند شما عزیزان قرار بگیرد!
    منتظر آموزش های بعدی باشید...!



    {در ضمن این آموزش ها به صورت اختصاصی از ویکی وی بی منتشر میشود!لطفا کپی رایت را رعایت کنید!}


    (برای تست کد ها میتوانید از این سایت کمک بگیرید:
    http://htmledit.squarefree.com/
    )

    3 نفر از اعضا پست amirashkan را پسندیده اند



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

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

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

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

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

  1. پاسخ: 0
    آخرين نوشته: 11-11-2012, 04:35 PM
  2. آموزش کادر بندی پست بیت + CSS hover
    توسط The Ph@ntom در انجمن آموزش های ویبولتین ورژن 4
    پاسخ: 0
    آخرين نوشته: 11-08-2012, 05:52 PM

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

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

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