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

امیر میرزائی

فوریه 4, 2012 / 10099 بار نمایش یافته

امروز براتون آموزش ساخت تولتیپ های متحرک رو آماده کردم که در آموزش شما می توانید تولتیپ های بسیار زیبا و در انواع مختلف فقط با 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 به عنوان تولتیپ ماست و میزان کدری اون رو روی 0 میذاریم تا مخفی بشه . افکتی رو که من می خوام برای شما بیان کنم اینه که تولتیپ به صورت fade میاد و از بالا ظاهر میشه . پس یه اون فاصله 100px رو از پایین (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 هنوز اونجا هست، فقط کدری آن روی 0 است که باعث دیده نشدن آن میشود )

برای اشاره گر کوچک، ما به شبه-عنصر ها (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]

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

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