CSS3 के साथ एनिमेटेड टूलटिप्स बनाना

टूलटिप्स के निर्माण के बारे में लेख इस तत्व की महान लोकप्रियता को देखते हुए बार-बार हब [ 1 , 2 ] पर उठाए गए हैं। आज आप छद्म तत्वों का उपयोग करने से पहले और बाद में ट्रांज़िट गुणों के साथ सरल, एनिमेटेड टूलटिप बनाने का एक और तरीका सीखेंगे।



एक उदाहरण के रूप में, सामाजिक सेवाओं के आइकन बनाए गए थे, जब आप उन पर मंडराते हैं, तो इन सेवाओं के नाम प्रदर्शित होते हैं।


तो चलिए शुरू करते हैं।

सेवाओं की अनियंत्रित सूची:

<ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li> <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li> <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li> <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li> </ul> 

आइकन के लिए मुख्य शैली और उनकी स्थिति के लिए अतिरिक्त शैली।

 .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; } .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; } 

तत्वों के अंदर हम टूलटिप्स छिपाएंगे, पहले से पारदर्शिता को शून्य पर सेट करते हैं, और "चढ़ाई" गति को 0.3 पर सेट किया जाएगा। पहले उदाहरण में, टूलटिप्स सबसे ऊपर दिखाई देंगे, इसलिए हम उन्हें आइकनों से 100 पिक्सेल ऊपर रखेंगे।

 .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; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; } 

जब आप आइकन पर होवर करते हैं या जब आप उस स्थान पर होवर करते हैं, जहां टूलटिप स्थित है। सूचक पहले और बाद में छद्म तत्वों का उपयोग करके बनाया जाएगा और एक छोटी छाया के साथ एक त्रिकोण होगा।

 .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); } .tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; } 

जब आप होवर करते हैं, तो हम टूलटिप के साथ ब्लॉक की पारदर्शिता को बढ़ाकर 0.9 कर देंगे और उपस्थिति सीमा निर्धारित करेंगे।

 .tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; } 

यहाँ एक ऐसा आसान तरीका है। डेमो में तीन अन्य उदाहरण देखे जा सकते हैं। सूत्रों को यहां डाउनलोड किया जा सकता है ।

दुर्भाग्य से, उदाहरण केवल उन ब्राउज़रों में काम करेंगे जो छद्म तत्वों और संक्रमण संपत्ति का समर्थन करते हैं।