CSS设计网页教程:制作网页气泡状文本框

2016-02-20 00:29 31 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是CSS设计网页教程:制作网页气泡状文本框,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

气泡对话框在网页中经常用于说明提示等功能,可以形象生动的现实一些需要用户注意的文字与内容,本文介绍仅用CSS来实现这种简单的网页效果。

气泡状文本框,是一种很生动的网页设计手段。

它可以用来表示用户的发言。

也可以用来作为特定信息的提示符。

DVD租借网站Netflix,还用它显示碟片的详细信息。

=========================

制作CSS气泡框的传统方法,需要5张背景图片,分别是:

  * tl.gif,左上方的圆角。
  * tr.gif,右上方的圆角。
  * bl.gif,左下方的圆角。
  * br.gif,右下方的圆角。
  * angle.gif,突出的三角形。

现在假定有这样一段代码:

 

blockquote床前明月光,疑是地上霜。/blockquote

p李白/p

 

我们希望通过气泡框,产生一种视觉效果,将李白与诗句对应起来。

那么,首先需要为诗句添加四个钩子(handler):

 

div class="tl"
   div class="tr"
    div class="br"
     div class="bl"
      blockquote床前明月光,疑是地上霜。/blockquote
     /div
    /div
   /div
  /div

 

然后,为最外面的容器div.tl指定高度和宽度,使它形成一个视觉方框:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 

.tl{
    width:300px;
    height:50px;
    text-align:center;
    line-height:50px;
  }

 

接着,为四个钩子依次添加四个不同的圆角背景:

 

  .tl{background:url('tl.gif') top left no-repeat #ff8c45;}
  .tr{background:url('tr.gif') top right no-repeat;}
  .bl{background:url('bl.gif') bottom left no-repeat;}
  .br{background:url('br.gif') bottom right no-repeat;}

 

最后,在李白前面加上三角形图片。

 

  p{
    padding: 15px 0px 0px 50px;
    background: url('angle.gif') 40px top no-repeat;
  }

 

气泡框就生成了。

这种方法的优点是所有浏览器都支持,缺点是比较麻烦,必须制作专门的图片,增加多余的标签,代码的灵活性较小。

============================

随着CSS3的出现,现在有了更好的方法,不需要任何背景图片和多余的标签,就能生成漂亮的文本框。

请看新方法发明人制作的范例:

由于这种方法用到了CSS3,所以IE6不支持,IE7和IE8无法显示圆角效果。其他浏览器的最新版本,都能够正常显示。

还是以前面的代码为例。

 

  blockquote class="bubble"床前明月光,疑是地上霜。/blockquote

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

 

第一步,生成基本的方框。

 

  .bubble{
    position:relative;
    padding:15px;
    margin:1em 0em 3em;
    width:300px;
    line-height:1.2;
    text-align:center;
    color:#fff;
    background:#075698;
  }

 

第二步,生成圆角。

 

  .bubble{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
  }

 

第三步,制作线性渐变的效果。

 

  .bubble{
    background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(top, #f9d835, #f3961c);
    background:-o-linear-gradient(top, #f9d835, #f3961c);
    background:linear-gradient(top, #f9d835, #f3961c);
  }

 

第四步,在容器后面添加一个空元素,并将长度和宽度都设为0。

 

  .bubble:after {
    content:"0a0";
    width:0;
    height:0;
  }

 

第五步,指定这个空元素为块级元素,并且四个边框之中,只显示上方的边框,其他三个边框,都设为透明。因为该元素的大小为0,所以它的每一个边框,都是一个等腰三角形。

 

  .bubble:after{
    display:block;
    border-style:solid;
    border-width:15px;
    border-color:#f3961c transparent transparent transparent;
  }

 

这时,已经可以看见这个三角形了(其实是一个上边框)。

第六步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右移一定的距离(这里是50像素),再垂直下移两个边界的距离。(由于第五步将空元素的边界设为15像素,所以这里就是下移30像素。)

 

  .bubble:after{
    position:absolute;
    z-index:-1;
    bottom:-30px;
    left:50px;
  }

 

至此,一个不需要任何背景图片和多余标签的气泡框,就出现在我们眼前了。

灵活处理空元素的边框,或者改变大小,或者生成圆角,或者将两个空元素的边框重叠,就会产生各种各样的变化。具体的效果和代码,请参考的范例页。

来源:http://www.tulaoshi.com/n/20160220/1631944.html

延伸阅读
标签: Web开发
在设计网页时,没有比页面的外观更重要的了。所以,如果发现设计人员十分关注字体及字体大小,我并不感到惊奇。使用 CSS 来编辑字体有各种各样的方法,每位设计师都会有自己偏爱的设计习惯,但必须选择更能提高 用户体验 的方法。今天暴风彬彬将集中讨论字体大小的控制来体现更多的 用户体验 。 字体大小 CSS2规范中关于水平和垂...
标签: Web开发
在前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现,但是,我想出了一个我个人比较喜欢的方法。今天,我将于你分享一下。 我对你是不了解的,但我试图弄明白如何让我的布局垂直拉伸到页面的100%高度,这样一个令我沮丧的问题。我想让div结构自动延伸,但是它就是不能自动...
标签: Web开发
这个CSS书写格式是我自创的,常有朋友提出异议,这里做个简单总结: 分类,一个模块或者同类功能定义为一类定义,每类定义之间用段落隔开; 分级,每类定义中的每个定义语句,根据结构或语意级别使用Tab缩进纵向对齐; 分断,每个定义内的每个属性定义之间,用分号+空格隔开,注意定义语句与分号间无空格,{}内前有空格而后无空格; 连排,...
最终效果 这里是作品预览图. 点击 此处 预览全图. 新建PSD文件 1 开始创建文档(Ctrl+N); 高和宽均为 1200 像素 . 使背景图层可编辑 2 按照默认设置, Photoshop将会锁定背景图层因此你不能进行编辑.为了使它可编辑, 在图层面板双击背景图层 (如果图层面板未激活,按下F7触发). 另外一种方法, 你可以在背景层上击右键,选择 “背景图层”...
标签: Web开发
CSS命名规范 一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright 导 航:m...

经验教程

509

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部