HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 CSS3教程 查看内容

分享一个纯CSS开发的气泡式提示框

2012-6-28 15:09| 发布者: html5cn| 查看: 18064| 评论: 5|来自: GBin1

摘要: 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢! Demo下载: ...
title.jpg

作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢!

Demo下载:分享一个纯CSS开发的气泡式提示框.zip

在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头。

首先我们定义提示框相关属性,我们添加了box阴影和文字阴影效果,这样让提示框更加漂亮:

  1. /* bubble */
  2. .tip-bubble {
  3.   position: relative;
  4.   background-color: #202020;
  5.   width: 100px;
  6.   padding: 20px;
  7.   color: #CCC;
  8.   text-align: center;
  9.   border-radius: 10px;
  10.   margin: 50px;
  11.   border: 1px solid #111;
  12.   box-shadow: 1px 1px 2px #202020;
  13.   -moz-box-shadow: 1px 1px 2px #202020;
  14.   -webkit-border-shadow: 1px 1px 2px #202020;
  15.   text-shadow: 0px 0px 15px #fff;
  16. }
复制代码

接下来我们处理:after伪标签:

  1. .tip-bubble:after {
  2.   content: '';
  3.   position: absolute;
  4.   width: 0;
  5.   height: 0;
  6.   border: 15px solid;
  7. }
复制代码

最后我们定义提示框的箭头方向:

  1. .tip-bubble-top:after {
  2.   border-bottom-color: #202020;
  3.   left: 50%;
  4.   bottom: 100%;
  5.   margin-left: -15px;
  6. }
复制代码

以上定义了顶端的箭头方向,其它的代码类似。是不是很简单,希望大家喜欢!


更多
6

鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (7 人)

发表评论

最新评论

引用 epqvldti 2012-6-29 02:17
头大~~~~~``


















防辐射服有用吗
引用 !活得乐! 2012-7-13 16:53
失败,没图,没demo
引用 异dù空间 2012-7-31 20:59
好强 '
引用 ゛被伤的沉淀つ 2012-9-20 16:16
body换个背景色 就暴露问题了,:after 继承了tip-bubble中的color,出现灰色三角
引用 童炎 2012-9-29 16:53

查看全部评论(5)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-26 11:54

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部