纯CSS3实现的色彩丰富的动态提示信息框tips效果

2014-05-01 06:37:48 -0400

此代码仅供参考

代码说明

纯CSS3实现的色彩丰富的动态提示信息框tips效果，无需任何js代码，只需要在需要的链接上添加一个小小的class即可，提示信息框根据需要有多种颜色可选，非常漂亮，实用，强力推荐。

html代码

.tooltip
{
  position: relative;
  background: #eaeaea;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute; 
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;  
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;        
  border-bottom: 0;  
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}

/* Yellow */

.yellow-tooltip span
{

border-color: #e1ca82;
  background-color: #ffeaa6;                     
}

.yellow-tooltip span:after
{ 
  border-top-color: #ffeaa6;
}

.yellow-tooltip span:before
{
  border-top-color: #e1ca82;
}

/* Navy */

.navy-tooltip span
{
  color: #fff;
  text-shadow: 0 1px 0 #000;  
  border-color: #161a1f;
  background-color: #1e2227;
}

.navy-tooltip span:after
{ 
  border-top-color: #1e2227;
}

.navy-tooltip span:before
{
  border-top-color: #161a1f;
}

/* Blue */

.blue-tooltip span 
{
  border-color: #59add4;
  background-color: #61bde7;
}

.blue-tooltip span:after
{ 
  border-top-color: #61bde7;
}

.blue-tooltip span:before
{
  border-top-color: #59add4;
}

/* Pink */

.pink-tooltip span 
{
  border-color: #ce4378;
  background-color: #ea4c88;
}

.pink-tooltip span:after
{ 
  border-top-color: #ea4c88;
}

.pink-tooltip span:before
{
  border-top-color: #ce4378;
}
</style>

<style>
#adpacks-wrapper{font-family: Arial, Helvetica;width:280px;position: fixed;_position:absolute;bottom: 0;right: 20px;z-index: 9999;background: #eaeaea;padding: 10px;-moz-box-shadow: 0 0 15px #444;-webkit-box-shadow: 0 0 15px #444;box-shadow: 0 0 15px #444;}
body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;}
body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0;margin:0;}
body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:left;margin:0 10px 0 0;}
body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
body .one .bsa_it_ad .bsa_it_t{padding: 0 0 6px 0; font-size: 11px;}
body .one .bsa_it_p{display:none;}
body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:9px;margin: -15px 0 0 0;text-align:right;}
body .one .bsa_it_ad .bsa_it_d{font-size: 11px;}
body .one{overflow: hidden}
</style>

<body>

<h3>Gray tooltip</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus nisi
<a href="#" class="tooltip">vulputate<span><b>Optional title</b><br>This is a gray CSS3 tooltip.</span></a>
nulla pretium egestas. Aliquam pretium eros congue <a href="http://tzs.wodemo.com" class="tooltip">ultrices<span>This is another gray tooltip made with CSS3 only.</span></a> mauris auctor lobortis.</p>

<h3>Yellow tooltip</h3>
<p>Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, <a href="#" class="tooltip yellow-tooltip">velit<span><b>Optional title</b><br>This is a yellow CSS3 tooltip.</span></a>, nibh
consequat nulla, ac laoreet <a href="#" class="tooltip yellow-tooltip">justo<span>This is another yellow tooltip made with CSS3 only.</span></a> lacus lectus ac enim.

</p>

<h3>Navy tooltip</h3>
Nulla volutpat mattis egestas. Integer a neque at lorem ornare <a href="#" class="tooltip navy-tooltip">accumsan<span><b>Optional title</b><br>This is a navy CSS3 tooltip.</span></a> quis quis ipsum.
Nam id erat mi. Etiam <a href="http://tzs.wodemo.com" class="tooltip navy-tooltip">semper<span>This is another navy tooltip made with CSS3 only.</span></a> velit non risus ultricies faucibus.</p>

<h3>Blue tooltip</h3>

<p>Nullam tristique, eros nec feugiat bibendum, orci velit commodo <a href="#" class="tooltip blue-tooltip">justo<span><b>Optional title</b><br>This is a blue CSS3 tooltip.</span></a>, non ornare odio massa et ipsum.
Cras scelerisque <a href="#" class="tooltip blue-tooltip">ultrices<span>This is another blue tooltip made with CSS3 only.</span></a> leo congue laoreet.</p>

<h3>Pink tooltip</h3>
<p>Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, <a href="#" class="tooltip pink-tooltip">velit<span><b>Optional title</b><br>This is a pink CSS3 tooltip.</span></a>, nibh
consequat nulla, ac laoreet <a href="#" class="tooltip pink-tooltip">justo<span>This is another pink tooltip made with CSS3 only.</span></a> lacus lectus ac enim.

</p>

</body>

代码演示

Gray tooltip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus nisi vulputateOptional title
This is a gray CSS3 tooltip. nulla pretium egestas. Aliquam pretium eros congue ultricesThis is another gray tooltip made with CSS3 only. mauris auctor lobortis.

Yellow tooltip

Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, velitOptional title
This is a yellow CSS3 tooltip., nibh consequat nulla, ac laoreet justoThis is another yellow tooltip made with CSS3 only. lacus lectus ac enim.

Navy tooltip

Nulla volutpat mattis egestas. Integer a neque at lorem ornare quis quis ipsum. Nam id erat mi. Etiam velit non risus ultricies faucibus.

Blue tooltip

Nullam tristique, eros nec feugiat bibendum, orci velit commodo justoOptional title
This is a blue CSS3 tooltip., non ornare odio massa et ipsum. Cras scelerisque ultricesThis is another blue tooltip made with CSS3 only. leo congue laoreet.

Pink tooltip

Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, velitOptional title
This is a pink CSS3 tooltip., nibh consequat nulla, ac laoreet justoThis is another pink tooltip made with CSS3 only. lacus lectus ac enim.

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N