سورس برنامه نویسی ، آموزش ، قالب وردپرس ، اسکریپت ، گرافیک ، آموزش کاربردی، دانلود رایگان ، قالب

تبليغات شما در داده باران
تبلیغات در داده باران

آموزش ساخت Tooltip با استفاده از CSS3

آموزش ساخت Tooltip با استفاده از CSS3Reviewed by داده باران on Nov 2Rating:

 در ادامه مطلب همراه ما باشید

اگر در وب سایت خود ، لینک ، تصویر ، لوگو و یا آیکونی دارید که متن آن به اندازه کافی گویا نیست ، نیاز به یک Tooltip دارید . Tooltip ها کارایی سایت را بالا برده و باعث می شوند کاربری سایت آسان شود. همانطور که در مطلب ۸ راه برای دوری از اشتباهات رایج در طراحی وب عنوان شد ، یکی از مهمترین مسائلی که در طراحی سایت باید در نظر داشته باشید ، آسان بودن کاربری سایت است . در این آموزش یاد خواهید گرفت که چطور برای سایت خود Tooltip هایی بدون جاوااسکریپت و بدون استفاده از عکس و تنها با استفاده از HTML و CSS بسازید .

آیا من به یک Tooltip نیاز دارم ؟

به طور پیش فرض شما می توانید با استفاده از صفت Title در عناصر HTML برای هر کدام عناصر خود یک Tooltip تعریف کنید ، اما Tooltip پیش فرض قابلیت طراحی دلخواه ندارد . با این شرایط استفاده از کدهای CSS برای ساخت یک Tooltip زیبا و سفارشی شده راه حل مناسبی است .

چطور ساخته شده است ؟

برای داشتن عنصری در صفحه وب که بتواند روی دیگر لایه ها ظاهر شود و در چیدمان عناصر صفحه مشکلی به وجود نیاید ، تکنیکی وجود دارد به شرح زیر :
یک عنصر نگهدارنده مثل div یا span وجود دارد که یک عنصر دیگر را در بر میگیرد . در استایل عنصر نگهدارنده بیرونی خاصیت position را برابر relative و در داخلی همین خاصیت را برابر با absolute قرار میدهیم . شاید این تکنیک برای شما تکراری باشد و من هم قصد ندارم چرخ را دوباره اختراع کنم ، بلکه میخواهم چگونگی ساخت Tooltip را باهم یاد بگیریم .
در تصویر زیر ساختمان Tooltip را مشاهد میکنید . برای فلش اشاره گر و خط حاشیه (border) اطراف آن ، از خاصیت های after و befor در CSS استفاده میکنیم .

حتما بخوانید  دانلود قالب HTML در دست ساخت CST نسخه ۱٫۱

برای ایجاد سایه و گرادینت بر روی Tooltip از کدهای box-shodow و gradient در CSS3 استفاده میکنیم .

چرا از تگ <a> برای متن هایی که Tooltip دارند استفاده میکنیم؟

همانطور که مشاهده میکنید در کد HTML ، از تگ <a> متنی که میخواهیم Tooltip داشته باشد استفاده میکنیم . در داخل این تگ از یک عنصر <span>برای نمایش متن مورد نظر در Tooltip استفاده میکنیم . میتوانستیم از عنصر دیگری مثلا” <label> یا <p> به جای<a> برای بخش هایی که میخواهیم Tooltip داشته باشند استفاده کنیم ، اما استفاده از تگ <a>به این دلیل است که IE6 با خاصیت hover برای دیگر عناصر HTML کمی مشکل دارد . با این حال اگر میخواهید Tooltip را برای عنصر دیگری در صفحه وب ، بغیر از عنصر <a>بکار گیرید .

کدهای CSS

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: “”;
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

پشتیبانی مرورگرها

حتما بخوانید  نحوه ذخیره و نمایش مطالب با کلیدهای Ctrl+S در وردپرس

این Tooltip به صورت cross-browser ساخته شده است . بدین معنی که در مرورگرهای مدرن و محبوب و همچنین IE6 و IE7 می تواند کار کند . هر چند که این آموزش بر پایه CSS3 بوده و طراحی بر این اساس در حال گسترش تدریجی است .

لينك كوتاه اين مطلب : http://www.dadebaran.ir/?p=1007

رمز فايل : DADEBARAN.IR




تبلیغات در داده باران
ارسال دیدگاه

قبل از نوشتن دیدگاه به نکات زیر توجه کنید:
    » نظراتی که با تایپ فارسی نباشند تایید نخواهند شد
    » نظرات تبلیغاتی اسپم محسوب میشوند و IP شخص مسدود خواهد شد.

پاسخ دهید

نکته: نظر شما در انتظار بررسی است و پس از تایید مدیریت در سایت نمایش داده میشود..