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

نمایش نتایج: از شماره 1 تا 2 از مجموع 2
  1. #1
    مدیر بازنشسته
    تاریخ عضویت
    2011 October
    محل سکونت
    زیر سایه ی خدا
    ارسال ها
    272
    تشکر
    424
    تشکر شده 899 بار در 324 پست
    نوشته های وبلاگ
    1


    4 امتياز مثبت از 4 راي
    آيا اين پست براي شما سودمند بود؟ بله | خیر

    متحرک سازی دکمه با Css3

    قابلیت های CSS3 هر روز گسترده تر می شود

    در این آموزش شما را با متحرک سازی دکمه توسط CSS3 آشنا می کنم

    توجه داشته باشید که این قابلیت فقط در مرورگرهایی که از CSS3 پشتبانی می کنند قابل استفاده می باشد.





    گام اول : ساختار HTML

    ساختار HTML بسیار ساده می باشد . توجه کنید که همه عناصر داخل تگ span باشند


    <a href="#" class="a-btn">
    <span class="a-btn-slide-text"> 20R</span>
    <img src="images/icons/1.png" alt="Photos" />
    <span class="a-btn-text"><small>Idehdesign</small>Download</span>
    <span class="a-btn-icon-right"><span></span></span>
    </a>

    گام دوم : ساختار CSS

    .a-btn{
    background: linear-gradient(top, #a9db80 0%,#96c56f 100%);
    padding-left: 90px;
    padding-right: 105px;
    height: 90px;
    display: inline-block;
    position: relative;
    border: 1px solid #80ab5d;
    box-shadow:
    0px 1px 1px rgba(255,255,255,0.8) inset,
    1px 1px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
    }
    .a-btn img{
    position: absolute;
    left: 15px;
    top: 13px;
    border: none;
    transition: all 0.3s ease-in-out;
    }
    .a-btn .a-btn-slide-text{
    position: absolute;
    font-size: 36px;
    top: 18px;
    left: 18px;
    color: #6d954e;
    opacity: 0;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    transition: opacity 0.2s ease-in-out;
    }
    .a-btn-text{
    padding-top: 13px;
    display: block;
    font-size: 30px;
    text-shadow: 0px -1px 1px #80ab5d;
    }
    .a-btn-text small{
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    }
    .a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 80px;
    border-left: 1px solid #80ab5d;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
    }
    .a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    border: 1px solid rgba(0,0,0,0.5);
    background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;
    box-shadow:
    0px 1px 1px rgba(255,255,255,0.3) inset,
    0px 1px 2px rgba(255,255,255,0.5);
    transition: all 0.3s ease-in-out;
    }


    در حالت Hover

    .a-btn:hover{
    box-shadow:
    0px 1px 1px rgba(255,255,255,0.8) inset,
    1px 1px 5px rgba(0,0,0,0.4);
    }
    .a-btn:hover img{
    transform: scale(10);
    opacity: 0;
    }
    .a-btn:hover .a-btn-slide-text,
    .a-btn:hover .a-btn-icon-right span{
    opacity: 1;
    }


    در حالت Active

    .a-btn:active {
    position:relative;
    top:1px;
    background:#80ab5d;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #a9db80;
    }
    .a-btn:active .a-btn-icon-right span{
    transform: scale(1.4);
    }



    ویرایش توسط Pouya : 12th July 2012 در ساعت 11:06 PM

    " ان الله مع الصابرین"

  2. #2
    کاربر عادی
    تاریخ عضویت
    2011 May
    محل سکونت
    تهران
    ارسال ها
    316
    تشکر
    37
    تشکر شده 688 بار در 303 پست
    نوشته های وبلاگ
    39


    آيا اين پست براي شما سودمند بود؟ بله | خیر
    ای کاش یک دمو و یا 2 تا img از 2 حالت این دکمه قرار میدین

    یک سوال داشتم، چرا برای position بعضی جاها از relative استفاده کردین و بعضی از جاها از absolute ؟

    در موردشون توضیح بدین ممنون میشم

    http://payline.ir

    http://flynet.ir

    the poor people are often the most generous

 

 

کاربران برچسب خورده در این موضوع

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

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

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

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


Powered by vBulletin
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.6.0
Persian Language By Ustmb.ir
این انجمن کاملا مستقل بوده و هیچ ارتباطی با دانشگاه علوم و فنون مازندران و مسئولان آن ندارد..این انجمن و تمامی محتوای تولید شده در آن توسط دانشجویان فعلی و فارغ التحصیل ادوار گذشته این دانشگاه برای استفاده دانشجویان جدید این دانشگاه و جامعه دانشگاهی کشور فراهم شده است.لطفا برای اطلاعات بیشتر در رابطه با ماهیت انجمن با مدیریت انجمن ارتباط برقرار کنید
ساعت 09:06 AM بر حسب GMT +4 می باشد.