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

موضوع: آموزشTransition در CSS3 (آموزش مختصر! ادامهCSS Hover)

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

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

    آموزشTransition در CSS3 (آموزش مختصر! ادامهCSS Hover)

    درود!

    در این تاپیک میخواهیم کدی که در تاپیک زیر با هم ساخیتم رو زیبا تر و جلوه خاصی به اون ببخشیم:

    http://www.wikivb.ir/thread170.html#post479


    اگه دقت کرده باشین،میبینید که سایهِ کادر خیلی سریع ظاهر میشه و خیلی کاربر پسند نیست!!


    برای این که جلوهِ زیبا تری به کامون بدیم میتونیم ازTransitionاستفاده کنیم!

    در ضمن مرورگر اکسپلورر از این کد پشتیبانی نمیکند و مرور گر های دیگر هر کدام به کد هاصی نیازمندند!


    اپرا:

    کد:
    -o-
    فایرفاکس:

    کد:
    -moz-
    و مرورگر های هوشمند مانند گوگل کروم:

    کد:
    -webkit-
    مثالی برای استفاده این کد در مرورگر فایر فاکس:

    کد:
    -moz-transition: all 1s;
    یعنی برای اینکه این سه مرورگر این کد را نمایش دهند،باید از کد زیر استفاده شود:

    کد:
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    کدی که قبلا ساخته بوددیم اگر یادتان باشد این بود! :

    کد:
    <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;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    
    
    }
    
    
    
    
    
    
    
    
    
    
    </style>
    
    
    
    
    </head>
    
    
    
    
    <body>
    
    
    <div class="witest">
    
    
    </div>
    
    
    
    
    
    
    
    
    </body>
    
    
    </html>


    حالا برای این جلوه،کد را به این صورت تغییر میدهیم(به کد ها توجه کنید! ) :

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

    میتوانید نتیجه را در این سایت مشاهده نموده و از کار خود لذت ببرید!!

    http://htmledit.squarefree.com/

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



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

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

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

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

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

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

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

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

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