文档章节

CSS基础教程——纯CSS开发的气泡式提示框

哟猫Intry
 哟猫Intry
发布于 2016/07/07 15:25
字数 295
阅读 25
收藏 2

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: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: 1px 1px 2px #202020;
  -webkit-border-shadow: 1px 1px 2px #202020;
  text-shadow: 0px 0px 15px #fff;
}复制代码
接下来我们处理:after伪标签:

.tip-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}复制代码
最后我们定义提示框的箭头方向:

.tip-bubble-top:after {
  border-bottom-color: #202020;
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}

http://www.h5edu.cn/

© 著作权归作者所有

哟猫Intry
粉丝 0
博文 46
码字总数 31138
作品 0
昌平
私信 提问
分享一个纯CSS开发的气泡式提示框

日期:2012-4-11 来源:GBin1.com 在线演示 在线调试 本地下载 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我...

gbin1
2012/04/12
239
0
纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE!

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

柠檬酷
2015/10/14
182
0
华丽的HTML5/CSS3输入框聚焦发光动画表单

华丽的HTML5/CSS3输入框聚焦发光动画表单 HTML5资源教程2017-11-038 阅读 css3聚焦表单html5输入框动画 今天我们要给大家分享一款非常特别的登录表单,基于 HTML5 和CSS3。当表单加载的时候,...

HTML5资源教程
2017/11/03
0
0
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端
2017/12/04
0
0
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1
2012/07/10
4.6K
12

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
3
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
7
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部