分类目录 ‘CSS’

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了 一些如何实现高效整洁的CSS代码原则:

1. 使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局 Reset:


*{ margin:0; padding:0; }

这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI ResetEric Meyer的 做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的 Reset如下:
(全文 …)

CSS透明大汇总

作者: seasun

近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情。目前还没有一个通用方法,以 确保透明度设置可以在目前使用的所有浏览器上有效。

这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。

关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标准技术,应该是CSS3规范的一部分。

1. 旧的Opacity设置

以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement {-khtml-opacity: .5; -moz-opacity: 0.5;}

-khtml-opacity设置是针对旧版本的Webkit渲染引擎,这种专用属性现在已经过时了,除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本,以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性,Firefox 3.5(现在使用Gecko引擎)已经不在支持这个属性。
(全文 …)

尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标,那么微妙的色彩与纹理,真的难以置信。

奥林匹克标志

作者: Doug Neiner
基于纯 CSS,以 em 为单位,可动态调整尺寸,需要浏览器支持 border-radius 属性,目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。

Olympics Logo
(全文 …)

CSS3为设计师和开发者打开一片新天地。以前需要用到图片,JavaScript或者Flash的地方,现在能用CSS来实现了。不幸的是,现在主流浏览器不支持CSS3,这些开发只能当作实验或学习。不过,如果你有兴趣了解CSS3的强大,下面例子值得一看。

文中我们列举了来自不同设计师/开发者25个CSS3的实验或例子。有一些比较实用,所有的例子都展现了CSS3的功能和创新之处。

Pure CSS Social Media Icons

25个令人惊奇的CSS3实验和例子 | iwanna.cn 我想网
(全文 …)

CSS 是了不起的技术,我第一次用到的时候,觉得这是我做梦都想不到的东西,随着 CSS3 的引入,圆角,阴影,旋转等等技术更将 CSS 带到前所未有的高度。然而,关于 CSS,我们是不是已经走得太远,本文以一个 Web 设计师的角度对 CSS 的一些实验性应用做了另一种思考。

那些有关 CSS 的前卫实验

几个月前,作者在 Six Revisions 发表了一篇文章,介绍了 5 个有趣的 CSS 实验:
(全文 …)

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见,但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中 的各种聊天泡泡只需要使用到CSS2.1来构建,并用CSS3来增强效果。不使用图片,也不使用JavaScript和更加不使用当前语义没用到的 HTML哦。
CSS文件中有大量对代码的注释,可以让你方便的看懂这些代码。(译者:在翻译时作者要求DEMO页面要用原先的网址,所以这些注释没有翻译,当然当你 看完本文,了解清楚实现方式,哪么不看注释也是可以看懂代码。)

查看DEMO:纯 CSS聊天泡泡

CSS聊天泡泡
只需要简单的HTML代码: <div>Content</div><p>Content</p> 就可以做出以下的聊天泡泡效果:
纯CSS聊天泡泡
(全文 …)

CSS Sprites 简介:

通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着Web设计向着精致、巧妙的方向发展,设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。

说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景 图片的位置。

当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩 短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
(全文 …)

一般而言,CSS是非常简单的。但是当浏览器开发商开始遵循CSS3特性,事情就变得有点复杂了。不困难,但是复杂。这主要有两个原因:第一,所有 CSS3新特性(如 transition、gradient、transform 等)都不简单;第二,我们不得不使用开发商特定的扩展。

收集CSS3有用的开发工具 | iwanna.cn 我想网
(全文 …)

1.使用jQuery的CSS3时钟

css3 clock
(全文 …)

By 邦彦
在网页局部的布局上,需要采用大量的自适应,来满足不同长度数据、内容的合理呈现。以此保证页面不至于因为内容过多等原因,导致重叠、溢出、撑开等 破坏整体视觉效果的情况。这里就简单谈谈几个自己碰到过的多栏自适应布局问题

1、两栏自适应布局

在实际项目中,常常遇到如红色线框部分的两栏自适应问题。其关键点是,左右两栏均不定宽,右侧栏条目数量不定。


(全文 …)