CssRain-前端技术

CSS Sprites:实用的技巧还是潜在的危险？

投稿人 : solari
Email : solari#foxmail.com

当今许多web程序员对这项技巧（CSS sprites）有着很娴熟的应用能力，介绍CSS sprites的教程和文章也是不计其数。几乎在每一篇教程中，都要求设计师以及程序员应该实施CSS sprites以减少HTTP请求和节省带宽。迄今为止，这项技术已经被许多网站所应用了，包括亚马逊，正在使用着极大数量的sprites……

详细请阅读：http://www.iamsolari.com/2010/04/05/css-sprites-useful-technique-or-potential-nuisance-translated/

CSS—pure-css-line-graph (线图).

刚刚在rss里面看到这个标题，pure-css-line-graph(纯的CSS线图)。心想:估计是标题党。
在我的记忆里，线图，一般都是通过N多小的div模块拼接而成。
于是怀着好奇心，进去看了看
http://cssglobe.com/post/4175/pure-css-line-graph 。
看作者是用了什么别出心裁的方法。
呵呵，看过之后，发现作者的思路还真好。
不过感觉可移植性还是不大。
用CSS或者JS做这种报表之类的东西还是算了吧。
最后就是觉得这幅图片设计的不错，嘿嘿。

http://cssglobe.com/lab/csslinegraph/csslinegraph/line.png

另外一个超简单的CSS柱形图：

http://grassegger.at/xperimente/charts-daten-semantik-css/

5种方法立刻写出更好的CSS代码.

文章转自：http://www.yeeyan.com/articles/view/toydime/30047

 

 

简介

当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！

1.重置

首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset

或者你自己编写的重置代码，只要使用就对了。

它能很简单的移除所有元素的填充（padding）和边距（margin）：

1. html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, 
2. pre, form, fieldset, table, th, td { margin: 0; padding: 0; }  
   

Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式表。

噢，请停止使用：

   * { margin: 0; padding: 0; } 

花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。

2.排序

一个小的测试

这个例子就是要让你思考如何更快的找到右边距属性？

Example#1

div#header h1 {  
    z-index: 101;  
    color: #000;  
    position: relative;  
    line-height: 24px;  
    margin-right: 48px;  
    border-bottom: 1px solid #dedede;  
    font-size: 18px;  
} 

Example#2

div#header h1 {
	border-bottom: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin-right: 48px;
	position: relative;
	z-index: 101;
}

你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。

我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

3.组织

你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：

/*****Reset*****/
移除元素的填充（padding）和边距（margin）。

/*****Basic Elements*****/
定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.

/*****Generic Classes*****/
定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等
当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。

/*****Basic Layout*****/
定义基本的模板: header, footer等. 帮助定义网页布局的基本元素

/*****Header*****/
定义所有Hearder元素

/*****Content*****/
定义所有内容框内的元素

/*****Footer*****/
定义所有Footer的元素
/*****Etc*****/
定义其他的选择器。

通过注解和归类相似元素的分组，将更快的找到你想要的。

4.一致性

无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。

就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。

div#header { float: left; width: 100%; }  
div#header div.column {  
    border-right: 1px solid #ccc;  
    float: rightright;  
    margin-right: 50px;  
    padding: 10px;  
    width: 300px;  
}  
div#header h1 { float: left; position: relative; width: 250px; }  

所以找到你喜欢的工作方式然后保持一致。

5.从正确的地方开始

在完成标记语言之前不要去尝试靠近你的样式表。

当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。

通过先标记文档，你将不会碰到本已注定的divities¹和classitis²麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译）。

利用CSS子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：没有一个良好的格式化文档（或者标记结构）CSS是无价值的。

总结

这些Tips能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束，接下来我将会去带来一些其他的与大家分享。

你有什么更好的Tips帮助我们完善CSS代码？

CSS—贴在底部的布局.

CSS 贴在底部的布局, 它始终在页面的底部。

http://www.cssstickyfooter.com

看这个网页的底部，为什么会跑到那儿去呢？即使内容很少的情况下，它也始终在页面的底部。
否则页面底部将留下大量空白。
下面是它实现的代码：

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;}
兼容性Hack：
.clearfix:after {content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

“评论表单”的设计.

使用CSS为图片添加更多趣味的5种方法.

文章转自暴风彬彬 BLOG：http://blog.bingo929.com/spice-up-your-images-with-css-5-way.html
[color=Red]1， 阴影效果.
通过使用带有一些padding之的背景图来添加阴影效果。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm
HTML：

CSS：
img.shadow {
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
[color=Red]2，双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm
HTML：

CSS：
img.double-border {
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
}
[color=Red]3，图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/framed.htm
HTML：

 

CSS：
.frame-block {
position: relative;
display: block;
height:335px;
width: 575px;
}
.frame-block span {
background: url(frame.png) no-repeat center top;
height:335px;
width: 575px;
display: block;
position: absolute;
}
[color=Red]4，水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/watermark.htm
HTML：

CSS：
.transp-block {
background: #000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:.75;
}
[color=Red]5，为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm
HTML：

Salone del mobile Milano, April 2008 – Peeta

CSS：
.img-desc {
position: relative;
display: block;
height:335px;
width: 575px;
}
.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 555px;
padding: 10px;
border-top: 1px solid #999;
}

免费后台(管理)模板.

演示：

http://webresourcesdepot.com/wp-content/uploads/file/admin-template/index.html

下载:

http://www.webresourcesdepot.com/wp-content/uploads/file/admin-template.zip

更多请浏览：

http://www.nextcool.cn/article.asp?id=619

CSS—横向tab和竖向tab.

很不错的TAB效果~！
点击下载此文件

登陆界面。

点击下载此文件

CSS—星级评分。

演示：

http://www.komodomedia.com/samples/star_rating_final/

下载:
http://www.komodomedia.com/samples/star_rating_final/star_rating_final.zip
官网：

http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/