آموزش ساخت تولتیپ های متحرک با CSS3

امروز براتون آموزش ساخت تولتیپ های متحرک رو آماده کردم که در آموزش شما می توانید تولتیپ های بسیار زیبا و در انواع مختلف فقط با CSS3 طراحی کنید . برای دیدن آموزش به ادامه نوشته بروید .

ایده این است که یک لیست از لینک ها یا در این نمونه ، آیکون های اجتماعی ، داشته باشیم که یک تولتیپ کوچک با اشاره به آن ها شناور شود .

لیست شبیه چیزی مانند این است :

[html]

[/html]

این عناصر به سمت چپ شناور خواهند بود و استایل های روبرو را خواهیم داشت :

[css].tt-wrapper li a{

display: block;

width: 68px;

height: 70px;

margin: 0 2px;

outline: none;

background: transparent url(../images/icons.png) no-repeat top left;

position: relative;

}[/css]

هر عنصر مکان پس زمینه متفاوتی برای تصویر پس زمینه دارد :

[css].tt-wrapper li .tt-gplus{

background-position: 0px 0px;

}

.tt-wrapper li .tt-twitter{

background-position: -68px 0px;

}

.tt-wrapper li .tt-dribbble{

background-position: -136px 0px;

}

.tt-wrapper li .tt-facebook{

background-position: -204px 0px;

}

.tt-wrapper li .tt-linkedin{

background-position: -272px 0px;

}

.tt-wrapper li .tt-forrst{

background-position: -340px 0px;

}[/css]

span به عنوان تولتیپ ماست و میزان کدری اون رو روی ۰ میذاریم تا مخفی بشه . افکتی رو که من می خوام برای شما بیان کنم اینه که تولتیپ به صورت fade میاد و از بالا ظاهر میشه . پس یه اون فاصله ۱۰۰px رو از پایین (bottom) میدهیم و بالای عنصر خودمون قرار میدیم:

[css].tt-wrapper li a span{

width: 100px;

height: auto;

line-height: 20px;

padding: 10px;

left: 50%;

margin-left: -64px;

font-family: ‘Alegreya SC’, Georgia, serif;

font-weight: 400;

font-style: italic;

font-size: 14px;

color: #719DAB;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

text-align: center;

border: 4px solid #fff;

background: rgba(255,255,255,0.3);

text-indent: 0px;

border-radius: 5px;

position: absolute;

pointer-events: none;

bottom: 100px;

opacity: 0;

box-shadow: 1px 1px 2px rgba(0,0,0,0.1);

transition: all 0.3s ease-in-out;

}[/css]

ما تولتیپی خواهیم ساخت که هنگام اشاره به عنصر ظاهر میشود (و فضای اطرافش یا همون span هم جزء عنصر است) همچنین تولتیپ هنگام اشاره به عنصر در منطقه بالای آن قرار می گیرد ( span هنوز اونجا هست، فقط کدری آن روی ۰ است که باعث دیده نشدن آن میشود )

برای اشاره گر کوچک، ما به شبه-عنصر ها (pseudo-elements) استایل های :before و :after خواهیم افزود. ما با همین روش به آنها استایل میدیم و یک مثلث با استفاده از border های چپ و راست می سازیم . شبه عنصر :before به عنوان یک سایه ای برای شبه عنصر :after بکار میره، پس به آن رنگ rgba سیاه با کدری کم می دهیم .

[css].tt-wrapper li a span:before,

.tt-wrapper li a span:after{

content: ”;

position: absolute;

bottom: -15px;

left: 50%;

margin-left: -9px;

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid rgba(0,0,0,0.1);

}[/css]

شبه-عنصر :after ما یک پیکسل به عقب میرود و ما آن را سفید می سازیم، درست مثل borderهای تولتتیپ خودش.

[css].tt-wrapper li a span:after{

bottom: -14px;

margin-left: -10px;

border-top: 10px solid #fff;

}[/css]

و در آخر ، هنگام اشاره ، ما span را از بالا به حرکت در می آوریم و آن را به صورت fade ظاهر می کنیم :

[css].tt-wrapper li a:hover span{

opacity: 0.9;

bottom: 70px;

}[/css]

و پایان! شما توانستید به سادگی تولتیپ های متحرک بسازید ! در دموی دوم،شما می توانید استایل دیگه ای از تولتیپ رو ببینید (یک دایره جالب) که به صورت متحرک تغییر اندازه داده و بزرگ میشود و در دموی سوم تولتیپ ها حالت چرخشی دارند . دموی چهارم شکل دیگری از این آموزش است .

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

 


دیدگاه ها برای آموزش ساخت تولتیپ های متحرک با CSS3

  • ممنون دنبال همچین جیزی می گشتم

    امیر بهمن ۱۵, ۱۳۹۰ ۱۶:۳۲ پاسخ دادن
  • با تشکر
    لینک دانلود خراب است.

    parsa بهمن ۱۶, ۱۳۹۰ ۱۱:۲۳ پاسخ دادن
  • عالی بود !
    پاینده باشید

    علی حاجیلویی بهمن ۱۶, ۱۳۹۰ ۱۵:۴۵ پاسخ دادن
  • خیلی آموزش خوبی بود دستت درد نکنه پوریا جان 😀 .

    امید پناهی بهمن ۲۲, ۱۳۹۰ ۱۳:۴۷ پاسخ دادن
  • سپاس.

    بهتره از Syntax Highlighter استفاده کنید . . . کد ها به هم ریخته شدن.

    Ho.Mysterious بهمن ۲۳, ۱۳۹۰ ۲۰:۱۶ پاسخ دادن
    • از syntax استفاده شده است باید صبر کنید تا کامل صفحه بارگذاری شود …

      poufall بهمن ۲۳, ۱۳۹۰ ۲۰:۳۴ پاسخ دادن
  • میشه این ها رو توی HTML داشته باشیم؟

    محمد علی خرداد ۱۱, ۱۳۹۱ ۱۹:۱۲ پاسخ دادن
  • مرسی از آموزش عالیتون

    هدی خرداد ۱۴, ۱۳۹۱ ۰۰:۳۱ پاسخ دادن
  • Pingback: آموزش ساخت تولتیپ های متحرک با CSS3 « سایت شخصی بهنام ملکی

  • Pingback: تولتیپ در css3 « وب گراف

  • سلام . دست شما درد نکنه خیلی عالیه . فقط میشه بگید چجوری اینها رو تبدیل به لینک کنیم ؟
    یعنی مثلا ً وقتی روی شکل گوگل پلاس کلیک شد ، صفحه ای باز بشه و وصل شه به وبسایت گوگل پلاس و باقی مراحل .
    بسیار متشکرم .

    محمد مهر ۱۷, ۱۳۹۱ ۰۴:۰۵ پاسخ دادن
    • خواهش می‌کنم.
      برای خواندن آموزش انگلیسی به این لینک “http://www.w3schools.com/html/html_links.asp” برید

      poufall مهر ۱۷, ۱۳۹۱ ۲۱:۵۸ پاسخ دادن
  • دستت درد نکنه … توی همون کدها شما href رو گذاشته بودید من حواسم نبود .
    به هرحال خیلی متشکرم که ذکات علمتون رو به خوبی می پردازید . ان شاالله همیشه موفق باشید .

    یه سوال هم از خدمتتون داشتم که هرچی گوگل و جاهای دیگه رو گشتم به جایی نرسیدم . من یه قالب فارسی روی وردپرسم نصب کردم می خوام چپ چین بشه . توی فایل style.css قسمت body گزینه direction رو برابر ltr قرار دادم . دوتا فایل هم توی پوشه قالب موجود بود یکیش به اسم fa_ir.po اون یکی یادم نیست . اونارم پاک کردم ولی قالب بازم راست چینه .
    اگه راهنماییم کنید که واقعا ً ممنون میشم اگرم نکنید که بازم ممنونم .

    محمد مهر ۱۸, ۱۳۹۱ ۰۲:۴۱ پاسخ دادن
    • خب اگه توی وردپرس انگلیسی نصب کنید خود به خود میره سمت چپ.

      poufall مهر ۱۸, ۱۳۹۱ ۱۶:۴۷ پاسخ دادن
  • سلام.
    خیلی ممنون از مطالب خوبتون.
    اگر لطف بکنید آموزش ها رو بیشتر بکنید عالی میشه.
    ممنون

    Bahar آذر ۲۱, ۱۳۹۱ ۱۵:۳۸ پاسخ دادن
    • اگه بدونم این بخش علاقه‌مند و دنبال کننده زیاد داره بیشتر قرار خواهم داد

      poufall آذر ۲۲, ۱۳۹۱ ۱۵:۵۵ پاسخ دادن
  • سلام دوست من.
    دستت درد نکنه. عالی بود. خیلی مفید بود.

    فقط یه مشکلی که هست:
    تو مرورگر اکسپلورر اون قسمت که باید مخفی بشه رو نشون میده.
    تو مرورگرهای فایرفاکس و کروم و اپرا خوب نمایش میده. اما تو مرورگر اکسپلورر بد نمایش میده. با اینکه opacity قسمت span روی ۰ تنظیم شده.

    اینم لینک عکسش:
    #

    sohrab دی ۱۴, ۱۳۹۱ ۱۳:۰۱ پاسخ دادن
    • ie کلا با همه چی مشکل داره!

      poufall دی ۱۵, ۱۳۹۱ ۱۱:۰۳ پاسخ دادن
      • یعنی کاریش نمیشه کرد که توی ie درست نشون داده بشه؟

        حاتم مهر ۱۰, ۱۳۹۲ ۰۹:۳۵ پاسخ دادن
  • سپاس از زحمات شما 🙂

    سید مجتبی فروردین ۲۸, ۱۳۹۲ ۲۱:۲۹ پاسخ دادن
  • صفحه های سایت شما بسیار سنگینه خیلی دیر لود میشه!

    آیا این مشکل مال هاست شماست یا طراحی قالبتون!

    hamid reza اردیبهشت ۱۱, ۱۳۹۲ ۱۰:۵۸ پاسخ دادن
  • خیلی جالب و کاربردی. تشکر

    امین خرداد ۱۸, ۱۳۹۲ ۱۸:۴۸ پاسخ دادن
  • خیلی قشنگ بود .
    دموی ۴ رو بیشتر از بقیه دوست داشتم . البته همه عالی بودند .

    داود تیر ۲۰, ۱۳۹۲ ۱۲:۲۴ پاسخ دادن
  • ممنون واقعاً کمک کرد

    ramin مرداد ۴, ۱۳۹۳ ۰۰:۲۴ پاسخ دادن
  • ممنون

    بلیان مرداد ۷, ۱۳۹۳ ۱۱:۴۸ پاسخ دادن
  • عالی بود واقعا عالی بود لطفا اموزشاتونو بیشتر کنین ممنون

    سایتتون عالیه

    Javad مرداد ۲۵, ۱۳۹۴ ۱۹:۲۹ پاسخ دادن

با نظرات و پیشنهادات خود تمپ ها را همراهی کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *