山寨一把QQ移动终端聊天框,网页版效果其实也很好的!
2013-05-23 19:34
323 查看
手机QQ的聊天框很漂亮,包括好多短信交互框也做成类似的风格,各种效果,各种炫,至于不规则形状的那种(称为手绘风格),比较麻烦,这里使用CSS3新特性,border-radius,进行信息框交互内容的设计.
border-radius样式用于***圆角边框,通过像素,百分比等单位制定圆角的形状.如果希望单独指定某一个边框的形状,可以使用border-top-left-radius, border-top-rigth-radius,border-bottom-left-radius,border-bottom-right-radius属性,分别指定左上、右上、左下、右下4个边角,border-radius可用于图像,表格,层等大部分元素,圆角之外的部分会以透明色填充. 我们先展示一个圆角边框的实例. 效果图如下:
源码如下
将层的边框设置为10个像素,并为不同的边框指定不同的颜色,然后不断缩小层的宽度和高度.当宽度和高度均为0时,每个方向的边框都会被分成三角形,将三个方向的边框颜色指定为背景色,就可以得到一个三角形. 下面模拟一个QQ聊天框的样式 效果图如下:
源码
border-radius样式用于***圆角边框,通过像素,百分比等单位制定圆角的形状.如果希望单独指定某一个边框的形状,可以使用border-top-left-radius, border-top-rigth-radius,border-bottom-left-radius,border-bottom-right-radius属性,分别指定左上、右上、左下、右下4个边角,border-radius可用于图像,表格,层等大部分元素,圆角之外的部分会以透明色填充. 我们先展示一个圆角边框的实例. 效果图如下:
源码如下
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <meta name="Author" content="dennisit"> <meta name="Description" content="dennisit@163.com,苏若年"> <title>HTML5+CSS3设计的漂亮面板 </title> <style> .column { height: 150px; width: 150px; float: left; background-color: #fe6; /*CSS3,设置圆角边框*/ border-radius: 10px; /*CSS3,设置阴影效果*/ box-shadow: 0 5px 10px rgba(0,0,0,0.5); text-align: center; cursor: move; margin-right: 5px; } .column header { color: #fff; padding: 5px; /*CSS3,设置文字阴影*/ text-shadow: #000 0 1px; box-shadow: 5px; /*针对webkit浏览器内核扩展,设置背景的渐变色*/ background: -webkit-gradient(linear, left top, right top, color-stop(0, #fb0), color-stop(0.5, #f80), color-stop(1, #fb0)); border-bottom: 1px solid #dd0; /*CSS3,设置圆角边框*/ border-top-left-radius: 10px; border-top-right-radius: 10px; } </style> </head> <body> <div id="columns"> <div class="column"><header>公 告 栏</header></div> <div class="column"><header>信息展示</header></div> </div> </body> </html>效果很漂亮吧,实例中我们使用的是圆角边框,可以利用浏览器会平分边框边缘的特性***小三角,然后再结合圆角边框,可以做成如下效果:
将层的边框设置为10个像素,并为不同的边框指定不同的颜色,然后不断缩小层的宽度和高度.当宽度和高度均为0时,每个方向的边框都会被分成三角形,将三个方向的边框颜色指定为背景色,就可以得到一个三角形. 下面模拟一个QQ聊天框的样式 效果图如下:
源码
<!DOCTYPE html> <html> <head> <meta charset="GBK"> <meta name="Author" content="dennisit"> <meta name="Description" content="dennisit@163.com,苏若年"> <title>CSS设计圆角边框 </title> <style> #container{ width:480px; } body{ font-size:12px; } p{ font-size:13px; font-weight:600; } .arrow{ border:solid 10px #3E3E3E; width:0px; height:0px; border-left-color:white; border-right-color:white; } .panel{ border:solid 4px #3E3E3E; border-radius:15px; padding:30px; } .left{ margin-left:60px; margin-top:-20px; width:250px; } .left .arrow{ border-top:none; margin-left:20px; } .left .panel{ background-color:#eef; border-bottom-right-radius:0px; } .right{ margin-left:160px; margin-top:20px; margin-bottom:-20px; width:250px; } .right .arrow{ border-bottom:none; margin-left:210px; } .right .panel{ background-color:#eef; border-bottom-left-radius:0px; } </style> </head> <body> <div id="container"> <p align="left">冰河咒印:</p> <div class="left"> <div class="arrow"></div> <div class="panel">苏若年 在啊?</div> </div> <div class="right"> <div class="panel">嗯!什么事呀?</div> <div class="arrow"></div> </div> <p align="right">:苏若年</p> <p align="left">冰河咒印:</p> <div class="left"> <div class="arrow"></div> <div class="panel">我的新邮箱<a href="mailto:dennisit@163.com">dennisit@163.com!</a></div> </div> </div> </body> </html>转载请注明出处:[http://www.cnblogs.com/dennisit/archive/2013/03/21/2973838.html]
相关文章推荐
- 山寨一把QQ移动终端聊天框,网页版效果其实也很好的!
- 随网页滚动条上下移动的效果 浮动QQ在线客服&网站QQ在线咨询
- JS网页图片查看器-可控制图片放大缩小还原移动效果
- 用户从手机的浏览器访问www.baidu.com,看到的可能跟桌面PC电脑,是不太一样的网页效果,会更适合移动设备使用。请简要分析一下,实现这种网页区分显示的原因及技术原理。
- 在移动网页网页上点击链接跳转到QQ聊天界面
- Javascript实战应用篇(1):让你的网页文本框增加光晕效果(类似QQ2012)
- jquery+CSS3实现淘宝移动网页菜单效果
- ajax 实现一个网页版山寨QQ .
- 腾讯QQ网页在线客服,随网页滚动条上下移动的效果一
- 在网页上实现图标的漂浮移动效果
- slides 带手势的图片滑动效果(用于移动终端)
- js - 图标在网页上漂浮移动效果
- android实现微信网页浏览、QQ下拉效果SlidingLayout
- [Phonegap+Sencha Touch] 移动开发58 从移动浏览器(或webview)网页上点击链接跳转到QQ聊天界面
- iOS粒子路径移动效果 iOS实现QQ拖动效果
- 实现qq ipad客户端的对话框平滑移动的效果
- QQ下面功能移动效果
- 腾讯QQ网页在线客服,随网页滚动条上下移动的效果
- slides 带手势的图片滑动效果(用于移动终端)
- 腾讯QQ网页在线客服,随网页滚动条上下移动的效果一