关于几种文本替换技术-CSS3, sIFR, Typeface.js, cufon

July 31, 2010 by SLJ | Category:HTML/CSS, Javascript | 6 Comments 5,372


在现今的开发中,客户对页面中字体的显示效果越来越重视,尤其是标题文字。以往采用的方法是使用静态图片,但因为图片中文字不是动态的,采用一种新的方式尤为重要,下面是4种文字替代技术。

More »

CSS3, Please! The Cross-Browser CSS3 Rule Generator

March 13, 2010 by SLJ | Category:HTML/CSS | No Comment 2,214

CSS3 Please一个在线生成跨浏览器的CSS3代码的网站,现在支持的CSS 3属性有圆角、阴影、渐变、自定义字体、旋转、rgba色彩。

点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

事实上,现在支持这些CSS3属性的浏览器大都没有完全的支持W3C标准属性,而是采用自己的私有属性,这显然增加了开发的复杂度,也给将来的维护带来一些不确定性。不过貌似chrome dev版开始支持原生的border-radius了。

点击进入:http://css3please.com/

揭秘HTML5和CSS3

December 28, 2009 by SLJ | Category:HTML/CSS | No Comment 2,470

转载自:http://ued.taobao.com/blog/2009/12/17/html5_css3/

互联网的发展总是在不断地催生新技术的产生,而HTML5和CSS3是最近一直被讨论的热门话题,对于每个互联网开发者尤其是前端开发者而言,都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢?我在WebRebuild北京交流会和珍珠奶茶帮上给大家分享了《揭秘 HTML5和CSS3》,PPT在这里:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5草案的前身名为Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些:

HTML5新增和移除的元素

More »

来用实用的CSS3来制作你的酷炫按钮吧

December 4, 2009 by SLJ | Category:HTML/CSS | No Comment 1,750

今天看Reader,又一次领略了CSS3的威力,CSS3做的按钮太酷炫了,进来看看把。因为没有时间,所以就不翻译了,原版抄来。

More »

CSS 3 – 前途一片光明

April 17, 2009 by SLJ | Category:HTML/CSS | No Comment 2,476

今天奇亚在逛的时候又发现了一些好东西,对CSS3早有耳闻,也到W3网站上看过。对CSS3我还是很期待的。
CSS3提供了非常多新途径去改善你的设计工作,且做了不少重要的变化。CSS3语言开发是朝着模块化发展的。 以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:

  • 盒子模型
  • 列表模块
  • 超连结方式
  • 语言模块
  • 背景和边框
  • 文字特效
  • 多栏布局

  几个模块现已完成,包括的SVG (可扩展矢量图形) ,媒介资源类型(Media Queries)和命名,而其他的模块开发工作则仍在进行中。如果要给出一个预定的日期的话,非常困难,不管怎样,web浏览器将全面支持CSS3的各种新特点,一些新的探索已经开始了。针对不同浏览器,新的功能是逐渐应用的,仍然需要1-2年的时间,每一个新的模块才有可能被广泛应用。

以下列出CSS3新的特性。

/* Columnas */
DIV {
	width: 400px;
	column-count: 4;
	column-width: 100px;
	column-gap: 10px
	column-rule: none;
}

/* Multi-background */
.multi {
	background: url('http://www.joostdevalk.nl/images/body-top.gif')
	top left no-repeat,
	url('http://www.joostdevalk.nl/images/banner_fresco.jpg')
	top 11px no-repeat,
	url('http://www.joostdevalk.nl/images/body-bottom.gif')
	bottom left no-repeat,
	url('http://www.joostdevalk.nl/images/body-middle.gif')
	left repeat-y;
}
 More »
↑ Top