首先定义一个

<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实现气泡效果的更多相关文章

  1. css3实现气泡效果的聊天框

    因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...

  2. 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果

    最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果. 这里分享下实现心得,希望能给大家一点启发. 首先分析下iphone的气泡效果有一下特点 1. 四面圆角 2. 界面上向下 ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. CSS3圆角气泡框,评论对话框

    <title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...

  5. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  7. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  8. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  9. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

随机推荐

  1. 搭建spring的开发环境

    在eclipse中新建web项目,集成spring开发环境,把集成spring的过程描述如下, 1.从spring官网下载spring的jar包,我这里是spring4.1,下载的文件中包含了源码及文 ...

  2. 移位操作<<和>>,是逻辑数字上的移动(和大端小端无关)

    问题描述 这几天帮同事调试DSP TMS320F28335,这鬼东西蛋疼死了.char是16bit的,16位就是他的最小内存单元.但是PC机串口发过来的有8bit的数据,然后转换就出问题. 一开始不知 ...

  3. 使用一般处理程序HTTPHandler下载文件

    一般来说我们可以用HTTPHandler来处理一些简单的逻辑,比如验证码.下载文件等. 以下载word文档为例讲解一下如何在HHTPHandler中下载文件,不限于word文档,如果下载其他文件,需要 ...

  4. 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 ...

  5. Emacs常用命令汇总

    注意:以下命令中标注的按键,大写的C代表Control,在键盘上通常是Ctrl键,而M代表Meta,在键盘上通常是Alt键,S则代表Shift,在键盘上通常是Shift键,也就是 C Control ...

  6. git proxy

    git config --global http.proxy http://127.0.0.1:1080 git config --global https.proxy https://127.0.0 ...

  7. Scrum不是万能药,要在时机成熟时推行

    敏捷很火热,大家都在谈敏捷:但不是所有团队都适合敏捷! 需要等待时机,时机成熟了,才推! 什么时候算时机成熟呢? 我们的经验是需要两点: 一.团队有三名或以上的研发工程师 : 二. 团队内有一名合适的 ...

  8. 如何解决"应用程序无法启动,因为应用程序的并行配置不正确"问题

    应用程序事件日志中: "C:\windows\system32\test.exe"的激活上下文生成失败.找不到从属程序集 Microsoft.VC80.MFC,processorA ...

  9. Memcache笔记04-Memcached机制深入了解

    Memcached机制深入了解 ①基于c/s架构 ,协议简单 c/s架构,此时memcached为服务器端,我们可以使用如PHP,c/c++等程序连接memcached服务器. memcached的服 ...

  10. iphone,pad等真机不被xcode识别,解决方法

    问题现象:xcode 的项目在进行真机调试时,xcode不能识别真机, 调测情况分析: 1 设备正常,itunes 能够识别 2 在apple developer 中创建项目的Provisioning ...