-
-
Save LukyVj/2464601 to your computer and use it in GitHub Desktop.
"The Cool tooltip"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* "The Cool tooltip" | |
Author: Web-gate -> Luky_Vj | |
*/ | |
body { | |
background-color: #ccc; | |
/*background-size*/ | |
-webkit-background-size: 1000px 1000px, 1000px 100px, 100px 100px, 100px 100px; | |
-moz-background-size: 1000px 1000px, 1000px 100px, 100px 100px, 100px 100px; | |
-o-background-size: 1000px 1000px, 1000px 100px, 100px 100px, 100px 100px; | |
background-size: 1000px 1000px, 1000px 100px, 100px 100px, 100px 100px; | |
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; | |
background-image: -webkit-linear-gradient(white 2px, transparent 2px), -webkit-linear-gradient(0, white 2px, transparent 2px), -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px); | |
background-image: -moz-linear-gradient(white 2px, transparent 2px), -moz-linear-gradient(0, white 2px, transparent 2px), -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px); | |
background-image: -ms-linear-gradient(white 2px, transparent 2px), -ms-linear-gradient(0, white 2px, transparent 2px), -ms-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), -ms-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px); | |
background-image: -o-linear-gradient(white 2px, transparent 2px), -o-linear-gradient(0, white 2px, transparent 2px), -o-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), -o-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px); | |
background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(0, white 2px, transparent 2px), linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px); | |
-pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px, linear-gradient(0, white 2px, transparent 2px) -2px -2px / 100px, linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px, linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px, #269; | |
} | |
#container { | |
width: 400px; | |
margin: auto; | |
margin-top: 208px; | |
} | |
a { | |
text-decoration: none; | |
text-shadow: 0 0 1px #fff; | |
color: #666; | |
width: 30pxrtoext-align:center; | |
background: #cdd4dc; | |
/*linear-gradient*/ | |
background: -webkit-gradient(linear,left top,left bottom,color-stop(#cdd4dc,0),color-stop(#959ca4,1)); | |
background: -webkit-linear-gradient(top, #cdd4dc 0%, #959ca4 100%); | |
background: -moz-linear-gradient(top, #cdd4dc 0%, #959ca4 100%); | |
background: -o-linear-gradient(top, #cdd4dc 0%, #959ca4 100%); | |
background: linear-gradient(top, #cdd4dc 0%, #959ca4 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdd4dc), color-stop(100%,#959ca4)); | |
background: -webkit-linear-gradient(top, #cdd4dc 0%,#959ca4 100%); | |
background: -moz-linear-gradient(top, #cdd4dc 0%,#959ca4 100%); | |
background: -o-linear-gradient(top, #cdd4dc 0%,#959ca4 100%); | |
background: linear-gradient(top, #cdd4dc 0%,#959ca4 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdd4dc', endColorstr='#959ca4',GradientType=0 ); | |
padding: 5px 10px; | |
/*border-radius*/ | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
border: 2px solid #B3B3B3; | |
margin-left: 05px; | |
} | |
a:hover { | |
/*box-shadow*/ | |
-webkit-box-shadow: 0 0 10px #999; | |
-moz-box-shadow: 0 0 10px #999; | |
box-shadow: 0 0 10px #999; | |
} | |
a:active { border: 0.1em solid #999 } | |
.link { | |
} | |
.toolTip { | |
display:none; | |
background: rgba(0,0,0,0.6); | |
color: #eee; | |
padding: 5px 10px; | |
width: auto; | |
/*Animations*/ | |
-webkit-animation: fade 1s ease; | |
-moz-animation: fade 1s ease; | |
-ms-animation: fade 1s ease; | |
/*transition*/ | |
-webkit-transition: all 0.2s ease; | |
-moz-transition: all 0.2s ease; | |
-o-transition: all 0.2s ease; | |
transition: all 0.2s ease; | |
/*border-radius*/ | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
border-top-left-radius: 2px; | |
border-bottom-left-radius: 2px; | |
text-shadow: 0 0 1px #000; | |
} | |
a:hover ~ .toolTip { | |
display:inline-block; | |
margin-left: 30px; | |
margin-top: -50px; | |
/*transition*/ | |
-webkit-transition: all 0.5s ease; | |
-moz-transition: all 0.5s ease; | |
-o-transition: all 0.5s ease; | |
transition: all 0.5s ease; | |
} | |
a:active ~ .toolTip { | |
margin-left: 25px; | |
/*transition*/ | |
-webkit-transition: all 0.5s ease; | |
-moz-transition: all 0.5s ease; | |
-o-transition: all 0.5s ease; | |
transition: all 0.5s ease; | |
} | |
.toolTip:before { | |
content: ""; | |
position: absolute; | |
width: 0; | |
height: 0; | |
border-top: 15px solid transparent; | |
border-right: 26px dotted rgba(0,0,0,0.6); | |
border-bottom: 15px dotted transparent; | |
margin: -5px -35px; | |
} | |
/* First, create the keyframes behavior */ | |
@-webkit-keyframes fade { | |
0% { opacity: 0; } | |
100% { opacity: 1; } | |
} | |
@-moz-keyframes fade { | |
0% { opacity: 0; } | |
100% { opacity: 1; } | |
} | |
@-ms-keyframes fade { | |
0% { opacity: 0; } | |
100% { opacity: 1; } | |
} | |
/* Then apply your animation to the element */ | |
span:hover{ | |
-webkit-animation: fade 1s ease; | |
-moz-animation: fade 1s ease; | |
-ms-animation: fade 1s ease; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="container"> | |
<a href="#" class="link" >Click Meh !</a> | |
<span class="toolTip">I'm the amazing tooltip</span> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment