Want create site? Find Free WordPress Themes and plugins.

زبان CSS برای tooltip

طراحی سایت در اصفهان

زبان CSS برای tooltip  . Tooltip یک راه بسیار آسان میباشد که بتوانیم به بازدید کنندگان وب سایت اطلاعات بیشتری را بدهیم, بطوریکه کاربران با بردن موس بر روی آبجکت یا لینک مورد نظر بتوانند آن را ببینند. به عنوان مثال میتواند از آن برای توضیح و توصیف یک تصویر و یا توضیحات طولانی تر و بیشتر برای یک لینک و یا هر اطلاعات دیگری که باعث شود کاربران بهتر بتوانند از مطالب وب سایت استفاده نمایند بدون اینکه طراحی خراب شود مورد استفاده قرار میگیرد.

امروز و در این مقاله از سلسله مقاله های طراحی وب سایت و سئو و بهینه سازی سایت که برای شما بازدید کنندگان عزیر وبسایت شرکت اطلس وب تهیه شده است,قصد داریم آموزش ساختن یک tooltip ساده توسط زبان های HTML و CSS را بدهیم.

برای شروع کار شما به کدهای HTML زیر احتیاج دارید.

<a title="This is some information for our tooltip." class="tooltip">CSS3 Tooltip</a>

در ادامه کار شما میتوانید css متداول که برای بسیاری از کارها از آنها استفاده مینمایید را به کدهای HTML خود بدهید.

.tooltip{
    display: inline;
    position: relative;
}

در ادامه برای بهتر شدن آن از کد زیر استفاده نمایید

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}
content: attr(title);
<a href="#" title="This is some information for our tooltip."><span title="More">CSS3 Tooltip</span></a>
.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

طراحی سایت در اصفهان

طراحی سایت ارزان در اصفهان

طراحی سایت ارزان

طراحی سایت در اصفهان

طراحی سایت پوشش

اصفهان سایت

زبان CSS برای tooltip

Did you find apk for android? You can find new Free Android Games and apps.
نمای کلی بررسی
حجم مطلب
کیفیت مطلب
کیفیت آموزشی مطلب
کیفیت نگارش
نویسندهسایت اصفهان
منبعسایت اصفهان
اشتراک
مقاله قبلینقش شبکه های اجتماعی در اینترانت ها
مقاله بعدی۸ افکت بسیار ساده transition
طراحی سایت پوشش همواره تلاش کرده است تا با بکار گیری جدیدترین و بروز ترین متد های طراحی وب سایت روز دنیا, دست به طراحی انواع پورتال یا وب سایت دولتی,سایت شرکتی,سایت فروشگاهی,سایت خبری,سایت مذهبی,سایت ورزشی,سایت دانلود و بازی,سایت شخصی و حتی طراحی سایت رایگان نماید تا تحولی جدید در دنیای طراحی وبسایت بوجود آورد به گونه ای که دیگر در طراحی های وب سایت پوشش, سایت های معمولی و سه ستونه و دو ستونه و پر زرق و برق قدیمی که حوصله ی هر کاربری را به سر می برد جای خود را به سایت هایی با گرافیک و کیفیت و از همه مهمتر سئوی بالا می دهند و هر کاربری را مجذوب خود کرده و اینگونه است که راندمان کار یک وب سایت بالا رفته و طراحی سایت مورد نظر به هدف خود که رضایت و بازدید بیشتر کاربران است, می رسد.

بدون نظر