首页风格
门户
博客

分享一个纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!

日期:2012-4-16  来源:GBin1.com

分享一个纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!

互联网拥有很多免费的工具和应用,几乎可以帮助你实现任何你需要的UI组件和设计,大家还记得上周我们介绍的纯CSS实现的气泡式提示文章吗?今天我们将介绍一个在线的生成气泡式提示的web工具 - CSS ARROW PLEASE,希望大家喜欢!

主要特性

  • 设置气泡提示位置(上下左右)
  • 提示尺寸大小
  • 文字颜色
  • 边框大小和尺寸
  • 边框颜色
  • 自动生成css代码

生成代码

.arrow_box {
    position: relative;
    background: #202020;
   
border: 4px solid # ccc;
}
.
arrow_box: after, .arrow_box: before {
    top: 100 % ;
    border
: solid transparent;
    content
: " ";
    height
: 0;
   
width: 0;
   
position: absolute;
    pointer
- events: none;
}
.
arrow_box: after {
    border - top - color: #202020;
    border-width
: 30px;
   
left: 50%;
    margin-left
: -30px;
}
.arrow_box:before {
    border-top-color
: # ccc;
    border
- width: 36px;
    left
: 50 % ;
    margin
-left: -36px;
}

来源:分享一个纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. 阿城守候

    此评论在等待批准中

    2013-10-20 上午4:30

  2. mxria.com

    不错的效果
    下载个库试一试
    2012-4-18 下午1:50

  3. Terry

    效果自动就在页面显示啊, 你用的是现代浏览器么? 不是IE6吧?
    2012-4-17 下午2:53

  4. bengben

    去了官网,参数设置好了,为什么不能展现效果?
    2012-4-17 下午2:50

  5. Terry

    这是一个在线CSS生成工具,你可以去工具首页看效果。本站没有提供demo效果。
    2012-4-17 下午12:57

  6. YQ

    站长忘了放DEMO链吧接?
    2012-4-17 上午10:32
今日推荐