首页 > 代码库 > 涂鸦风格的对话框

涂鸦风格的对话框

这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。


1.png


在线演示    源码下载


下面我们来分享一下实现的方法,主要由HTML代码和CSS代码组成。


HTML代码:


  1. <div>

  2.         <div>

  3.                 <div>CSS3简单实现涂鸦风格边框 ** to</div>

  4.         </div>

  5. </div>

复制代码

HTML代码结构非常简单,仅仅是3个div组成,当然后面的CSS代码才是关键,我们一步步来解说一下。


CSS代码:



  1. .wrap {

  2.         padding:35px 25px;

  3.         width:450px;

  4.         margin:40px auto;

  5.         background:#58**6;

  6.         border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

  7.         color:#eee;

  8.         box-shadow:1px 1px 0px rgba(0, 0, 0, .75)

  9. }

复制代码

这个CSS代码定义了最外面的边框,利用border-radius实现边框的圆角效果,同时利用了box-shadow实现类微微的阴影效果,不是很明显,你也可以修个属性值来让阴影变得更加明显一点。


  1. .box {

  2.         position:relative;

  3.         background:#fff;

  4.         border:solid 5px #fff;

  5.         width:200px;

  6.         height:100px;

  7.         margin:0 auto;

  8.         border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

  9.         padding:10px;

  10.         color:#666;

  11.         box-shadow:2px 3px 1px rgba(0, 0, 0, .75)

  12. }

  13. .box:before {

  14.         content: "";

  15.         position: absolute;

  16.         bottom: -20px;

  17.         left: 60px;

  18.         border: 0;

  19.         border-right-width: 30px;

  20.         border-bottom-width: 20px;

  21.         border-style: solid;

  22.         border-color: transparent #fff;

  23.         display: block;

  24.         width: 0;

  25. }

复制代码

这个box类和之前的类似,不过多了一个特性,就是利用CSS3的:before属性实现了下边框的小三角效果,这样就有tooltip的效果了。
  1. .box .box {

  2.         position:absolute;

  3.         top:5px;

  4.         left:5px;

  5.         width:180px;

  6.         height:80px;

  7.         border-color:#593207;

  8.         box-shadow:none;

  9. }

  10. .box .box:before {

  11.         left: 45px;

  12.         border-color: transparent #593207;

  13. }

复制代码

这是最内部的box,和它外面那层box实现一样,同样利用before属性实现小三角效果。


其他就是一些边框线颜色和背景颜色的设置,就非常简单了。