2011 八月

欢迎来到 jackNEss'窝窝
I like simple mind
  • CSS3 线性渐变介绍

    2011年08月31日

    gradient

    在 css3出现之前,给一个容器做一个渐变效果的一般做法是 切一张背景图做循环,然而,CSS3的到来,我们可以通过 CSS 来实现,告别图片。
    以下就说说不同浏览器实现渐变的方法:

    Webkit

    Webkit是第一个支持渐变的浏览器内核(包括 chrome 和 safari ,还有各种webkit内核的浏览器),它使用下面的结构:

    语法:

    background-image:-webkit-gradient(type,x1 y1,x2 y2,from(开始颜色值),to(结束颜色值),[color-stop(偏移量小数,停靠颜色值),...]);
    

    变量解释:

    1. -webkit-gradient: 是background的一个属性值;
    2. type: webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;
    3. x1 y1,x2 y2: 为线性渐变的开始点坐标和结束点坐标。x1,x2,y1,y2 的取值范围为 0% – 100%,当x1,x2,y1,y2取值为极值的时候,x1,x2 可以取值 left (0%) 或者 right (100%);同理y1,y2可以取值top (0%) 或者 bottom (100%);

      • 当 x1 == x2, y1 != y2,实现垂直渐变,调整 y1,y2的值可以调整渐变半径大小;
      • 当 y1 == y2, x1 != x2,实现水平渐变,调整 x1,x2的值可以调整渐变半径大小;
      • 当 y1 != y2, x1 != x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
      • 当 y1 == y2, x1 == x2,实现无渐变,取from的色值,即 “from(颜色值)”
      • 实现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(0%)或right(100%),y1和y2可以最简单的取值是top(0%)或bottom(100%);
    4. from(开始颜色值):渐变开始颜色值;
    5. to(结束颜色值):渐变结束颜色值;
    6. [color-stop(偏移量<小数>,停靠颜色值),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效;

    阅读全文…

  • 纯css实现元素跨浏览器的固定定位

    理论上呢 在页面上固定一个漂浮窗,可以使用 position:fixed 来实现,但是很遗憾地,IE6这老大不支持..所以就得另谋他法了

    实现这个功能有2种方法,一个是依赖于js,另一种则是纯css实现,在这里我就贴一下纯css实现的代码:
    阅读全文…

  • 最佳默认字体(转)

    2011年08月24日

    原文作者: 岁月如歌
    原文地址:http://lifesinger.wordpress.com/2011/04/06/best-web-default-fonts/

    最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂。以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置。今天做了个更详尽的测试:

    http://lifesinger.github.com/lab/2011/default-fonts/

    在不同操作系统下,用各个浏览器打开,特别是 Firefox 和 Opera,混乱的世界啊,真真的与浏览器斗,乐趣全无!

    虽然沮丧悲情愤,但分析研究的工作还是得继续:

    • lang, charset 和 font-family 都会对默认字体产生影响,规律很复杂。
    • 浏览器偏好里的字体设置,对默认字体有直接影响,比如 WebKit 内核的 Chrome 浏览器。
    • 宋体转成 “\5b8b\4f53″ 也不能通吃所有浏览器。比如在 Mac OS 的 Chrome 中,只认识 simsun.
    • 宋体其实是 serif 有衬线字体,后面跟 sans-serif, 逻辑上是错的。(修正:并没有规定前面的 font name 要和最后的 general family 保持一致)
    • 不同操作系统下,各个浏览器默认的 sans-serif 中文字体,一般都是最佳选择或用户已调整为最佳,不能强制用户都用宋体。

    阅读全文…

  • ie9文字bug

    一些在ie9出现之前就已经开发完成的项目中,在ie9下常常会见到一些灵异的事件如下图:

    ie9下:

    其他浏览器:

    这个的产生是由于ie9对 sans-serif 字体的兼容性不好而导致的;

    下面是出现问题的 html代码

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>ie9文字bug</title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    .txtbox{ 
    	display:block; 
    	width:200px; 
    	height:35px; 
    	margin:50px auto; 
    	font:12px/35px sans-serif; 
    	text-align:center; 
    	background:#e5f9ff; 
    	border:1px solid #b8efff;
    }
    </style>
    </head>
    
    <body>
    <div class="txtbox">这里是的博客</div>
    </body>
    </html>
    

    bug触发条件:页面编码为 非 utf-8 并且字体设置了 font-family:sans-serif;
    典型例子:http://www.hltm.cc

    阅读全文…

  • 有过一些编程基础的童鞋应该知道这两个 或运算符 和 与运算符,

    一般的用法如下:

    //与运算符用法
    if(i < 10 && i > 0){
      //代码部分
    }
    
    //或运算符用法
    if(i < 0 || i > 10){
      //代码部分
    } 
    

    以上是这2个运算符的一般用法,就是用来表示判断,我想介绍的这2个运算符的一些稍微高级用法,首先,我举一个例子:

    var a = 2||3;
    alert(a);//2
    
    var b = 2&&3;
    alert(b);//2
    

    拿 “||” 来作说明

    由于 “||” 的优先级比 “=” 高,所以优先处理 “||”运算;

    由于 javascript 语言的特性, “2||3” 返回的并不是 布尔值 true 或者 false,而是 对比的那2个对象的其中一个,例如这个例子,或运算符首先判断 “||” 左边的 值是否为非空 或者 非0,如果是的话,a = 第一个值,否则,取 “||”右边的值。

    阅读全文…

  • 去掉 inline-block 元素之间的空隙

    inline-block的适用范围其实很广泛,例如在遇到下面途中布局的时候:

    在这里的需求是 元素蓝色元素里面的高度不确定,要求做到 这些模块在页面上居中显示,并且垂直居中。处理这个的时候,我们就需要用到 inline-block了

    现代的浏览器都支持inline-block,只有IE6、IE7不支持 inline-block,不过可以通过样式 display:inline; zoom:1;进行模拟;

    以下是 inline-block的兼容代码:

    .box{display:inline-block; *display:inline; *zoom:1;}
    

    阅读全文…

  • 纯CSS制作带小三角提示框

    前言

    在我们开发项目的过程中,常常会遇到要制作一些 带小三角的提示框组件:

    遇到这种需求我们一般会采取2种方法:

    1. 把小三角切出来做成背景图,然后内容部分通过 border 和 background-color 实现;

    2. 通过纯css方法将一个标签做成符合需求的小三角,然后内容部分通过border 和 background-color 实现;

    阅读全文…

  • HTML5-在实际项目中的应用:使标签更具语义化

    前言:

    本文章从页面的 DOCTYPE 说起,一步步解释 如何运用 HTML5 新标签搭建语义化更明确的html页面,并提供新标签如何兼容各个主流浏览器的解决方案。

    HTML5,作为 下一代web的开发标准,相信有不少开发者已经垂涎他各种具有革命性的新功能诸如 语义化明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、告别插件的富动画(canvas)、强大的api支持等。本文首先说说如何利用html5的各种更具语义化的标签来构建我们的html页面.

    阅读全文…

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS