بهـســـون

پلی میان صفر تا صد


شماره ثبت : 513023

آموزش ساخت تولتیپ های متحرک با 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

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

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

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

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

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

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

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

      poufall بهمن ۲۲, ۱۳۹۰ ۱۳:۵۱ پاسخ
  • سپاس.

    بهتره از 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 مرداد ۲۵, ۱۳۹۴ ۱۹:۲۹ پاسخ

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

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