气泡小角的css实现】的更多相关文章

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>CSS 箭头Demo</title> <style type="text/css"> /* 基本样式 */ .tip { background: #eee; border: 1px solid #ccc; pa…
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>CSS画对话框小三角</title> </head> <body> <div class=&q…
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆 出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之(不记得了),国外也有之(比方说CSS tricks上的这篇”lurry Transparent Header Effect…
由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" StrokeThickness="0.1" Fill="Yellow" HorizontalAlignment="Right"> <Path.Data> <PathGeometry Figures=" M , L , , L…
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世…
    小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川…
前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无数张图片"唰唰唰"的闪出来了.在这个过程中,浏览器会把这个网站的主资源(就是Html文件)拉取回来,然后开始分析网页中的Js,Img之类的标签,然后再去拉取这些图片和资源.可想而且这会多么的消耗内存.对于浏览器来说,他们的请求方式都是发起一个Http请求,经历三次握手. 首先我们来讲讲什么…
http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码…
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如…
1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html <div class="help-tip"> <p>臣妾在这里!<a href='xxx'>来嘛!</a></p> </div> .help-tip是包含一个带问号的小圆圈效果 p元素里的内容是要显示的提示内容.它默认是不…