首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

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

分享一个纯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;

标签: css提示框, css bubble, css tips, css气泡提示, CSS ARROW PLEASE!

阅读更多

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

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

在线演示  在线调试  本地下载

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

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

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

/* bubble */
.tip-bubble {
position: relative;
background-color: #202020;
width: 100px;
padding: 20px;
color: #CCC;
text-align: center;
border-radius: 10px;
margin: 50px;
border: 1px solid #111;
box-shadow: 1px 1px 2px #202020;
-moz-box-shadow:…

标签: css提示框, css bubble, css tips, css气泡提示

阅读更多

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

?ü?à

今日推荐