CSS3实现气泡效果
首先定义一个
<p class="speech"></p>
先给外层的容器添加样式:
p.speech
{
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
没有什么特别复杂的,主要的核心就在postion:relative,用来定位对话浮层的。我们还需要一些Mozilla和webkit的属性来完成圆角和阴影,IE8以下的浏览器看不到这些属性,只是显示一个框,不影响总体的效果。
我们现在需要创建对话浮层下面的那个三角形的指向标志了。不使用图片,我们使用CSS边框来完成这个效果。看看下面这个用不同颜色边框完成的效果。
我们把高度和宽度减少到0px,然后给边框使用不同的大小,看看效果:
为了最后能做成指示标志的样子,我们把上边距和左边距设置为solid,下边距和右边距设置为透明:
但是我们把这个放哪呢?还好,我们可以使用CSS的伪类:before和:after来生成,所以:
p.speech:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
top: 100px;
border: 25px solid;
border-color: #666 transparent transparent #666;
}
现在三角形的标识就定位在我们的气泡下面了。另外,不要费事去考虑这个元素的阴影,他会定位在透明边界的旁边,而不是看到的图形的旁边。
我们还需要移除三角形的一部分。我们可以在里面放置一个白色的小三角形来达到这个效果。
p.speech:after
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
top: 100px;
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
我们的不使用图片的对话气泡就完成了:
另外,我们还可以使用:before和:after伪类来做很多其他的事情,比如,一个思考气泡也可以通过这样办法完成:
首先也是建一个
<p class="thought">I think...</p>
css代码:
p.thought{
position: relative;
width: 130px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 58px;
-moz-border-radius: 58px;
border-radius: 58px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
} p.thought:before, p.thought:after{
content: '';
position: absolute;
left: 10px;
top: 70px;
width: 40px;
height: 40px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
z-index:5;
} p.thought:after{
position: absolute;
width: 20px;
height: 20px;
left: 5px;
top: 100px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
z-index:6;
}
最新实现效果:
CSS3实现气泡效果的更多相关文章
- css3实现气泡效果的聊天框
因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...
- 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果
最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果. 这里分享下实现心得,希望能给大家一点启发. 首先分析下iphone的气泡效果有一下特点 1. 四面圆角 2. 界面上向下 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- CSS3圆角气泡框,评论对话框
<title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
随机推荐
- 搭建spring的开发环境
在eclipse中新建web项目,集成spring开发环境,把集成spring的过程描述如下, 1.从spring官网下载spring的jar包,我这里是spring4.1,下载的文件中包含了源码及文 ...
- 移位操作<<和>>,是逻辑数字上的移动(和大端小端无关)
问题描述 这几天帮同事调试DSP TMS320F28335,这鬼东西蛋疼死了.char是16bit的,16位就是他的最小内存单元.但是PC机串口发过来的有8bit的数据,然后转换就出问题. 一开始不知 ...
- 使用一般处理程序HTTPHandler下载文件
一般来说我们可以用HTTPHandler来处理一些简单的逻辑,比如验证码.下载文件等. 以下载word文档为例讲解一下如何在HHTPHandler中下载文件,不限于word文档,如果下载其他文件,需要 ...
- SharePoint 2013 创建web应用程序报错"This page can’t be displayed"
错误描述 This page can’t be displayed •Make sure the web address http://centeradmin is correct. •Look fo ...
- Emacs常用命令汇总
注意:以下命令中标注的按键,大写的C代表Control,在键盘上通常是Ctrl键,而M代表Meta,在键盘上通常是Alt键,S则代表Shift,在键盘上通常是Shift键,也就是 C Control ...
- git proxy
git config --global http.proxy http://127.0.0.1:1080 git config --global https.proxy https://127.0.0 ...
- Scrum不是万能药,要在时机成熟时推行
敏捷很火热,大家都在谈敏捷:但不是所有团队都适合敏捷! 需要等待时机,时机成熟了,才推! 什么时候算时机成熟呢? 我们的经验是需要两点: 一.团队有三名或以上的研发工程师 : 二. 团队内有一名合适的 ...
- 如何解决"应用程序无法启动,因为应用程序的并行配置不正确"问题
应用程序事件日志中: "C:\windows\system32\test.exe"的激活上下文生成失败.找不到从属程序集 Microsoft.VC80.MFC,processorA ...
- Memcache笔记04-Memcached机制深入了解
Memcached机制深入了解 ①基于c/s架构 ,协议简单 c/s架构,此时memcached为服务器端,我们可以使用如PHP,c/c++等程序连接memcached服务器. memcached的服 ...
- iphone,pad等真机不被xcode识别,解决方法
问题现象:xcode 的项目在进行真机调试时,xcode不能识别真机, 调测情况分析: 1 设备正常,itunes 能够识别 2 在apple developer 中创建项目的Provisioning ...