تم فارست فارسی

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

.helptip{

    position: absolute;

    top: 18px;

    right: 18px;

    textalign: center;

    backgroundcolor: #BCDBEA;

    borderradius: 50%;

    width: 24px;

    height: 24px;

    fontsize: 14px;

    lineheight: 26px;

    cursor: default;

}

 

.helptip:before{

    content:‘?’;

    fontweight: bold;

    color:#fff;

}

 

.helptip:hover p{

    display:block;

    transformorigin: 100% 0%;

 

    webkitanimation: fadeIn 0.3s easeinout;

    animation: fadeIn 0.3s easeinout;

 

}

 

.helptip p{ /* The tooltip */

    display: none;

    textalign: left;

    backgroundcolor: #1E2021;

    padding: 20px;

    width: 300px;

    position: absolute;

    borderradius: 3px;

    boxshadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

    right: 4px;

    color: #FFF;

    fontsize: 13px;

    lineheight: 1.4;

}

 

.helptip p:before{ /* The pointer of the tooltip */

    position: absolute;

    content: ;

    width:0;

    height: 0;

    border:6px solid transparent;

    borderbottomcolor:#1E2021;

    right:10px;

    top:12px;

}

 

.helptip p:after{ /* Prevents the tooltip from being hidden */

    width:100%;

    height:40px;

    content:;

    position: absolute;

    top:40px;

    left:0;

}

 

/* CSS animation */

 

@webkitkeyframes fadeIn {

    ۰% {

        opacity:0;

        transform: scale(0.6);

    }

 

    ۱۰۰% {

        opacity:100%;

        transform: scale(1);

    }

}

 

@keyframes fadeIn {

    ۰% { opacity:0; }

    ۱۰۰% { opacity:100%; }

}

mojadam

    نوشته‌های مرتبط

    قوانین ارسال دیدگاه

    • دیدگاه های فینگلیش تایید نخواهند شد.
    • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
    • از درج دیدگاه های تکراری پرهیز نمایید.
    دیدگاه‌ها

    *
    *

    0