菠萝筐 » CSS http://www.blook.org.cn 菠萝筐，网罗网络精华！ Wed, 28 Jul 2010 15:33:38 +0000 en hourly 1 http://wordpress.org/?v=3.0 IE下全站变灰代码 http://www.blook.org.cn/1511.htm http://www.blook.org.cn/1511.htm#comments Wed, 21 Apr 2010 00:41:18 +0000 菠萝 http://www.blook.org.cn/?p=1511 因为512汶川地震、414玉树地震，很多站长为了表示哀悼，都把自己的全站弄成了灰色，在此菠萝分享一下代码，目前只有在IE下有用的：

方 法一：在全站的CSS样式表里添加：

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

即 可以实现全站变灰；

方法二：直接在网页里添加代码：

<style>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>

把 上面的代码加到相关页面的<head></head>之间。

但这些代码在Firefox浏览器不起作用，希望哪位朋友有更好的代 码，请与菠萝分享，谢谢！

]]> http://www.blook.org.cn/1511.htm/feed 11 一招实现 CSS格式化 | CSS减肥 http://www.blook.org.cn/1419.htm http://www.blook.org.cn/1419.htm#comments Sat, 27 Mar 2010 02:30:52 +0000 菠萝 http://www.blook.org.cn/?p=1419

今天写了个CSS样式表文件，感觉写完之后，有点乱乱的，格式也乱了，很多地方也出现了重复现象，菠萝找到一个非常简单的解决CSS格式化和CSS减肥的办法:

用W3C CSS进行错误和问题检测、修复，这个功能是非常强大的，开始我还有点害怕，就先备份了一下原来的CSS文件，之后大胆进行了检测和修复，哇靠！这么多的问题！系统会自动给你提供一个修复之后的CSS代码，这个代码就是完美无错的了！并且这个代码已经给你格式化好喽，直接使用就是。

这个工具可以对在线的CSS文件进行格式化和修复、可以自己上传CSS文件、也可以直接把你的代码复制过来。

菠萝指路＝》 CSS Validator: http://jigsaw.w3.org/css-validator/

如果你写的代码确保没有问题，那就只需要格式化就行了，这一操作不改变你的代码功能，只是进行格式化：

菠萝指路＝》 CSS Format: http://www.lonniebest.com/FormatCSS/

]]> http://www.blook.org.cn/1419.htm/feed 12 网页配色表 设计者必备 http://www.blook.org.cn/1225.htm http://www.blook.org.cn/1225.htm#comments Sat, 20 Feb 2010 14:49:02 +0000 菠萝 http://www.blook.org.cn/?p=1225

网页设计的时候需要各种颜色，都靠自己想象肯定很费脑子，把常用的颜色整理一下，方便以后直接拿来使用。

. #FFFFFF #FFFFF0 #FFFFE0 #FFFF00
. #FFFAFA #FFFAF0 #FFFACD #FFF8DC
#FFF68F #FFF5EE #FFF0F5 #FFEFDB
#FFEFD5 #FFEC8B #FFEBCD #FFE7BA
#FFE4E1 #FFE4C4 #FFE4B5 #FFE1FF
#FFDEAD #FFDAB9 #FFD700 #FFD39B
#FFC1C1 #FFC125 #FFC0CB #FFBBFF
#FFB90F #FFB6C1 #FFB5C5 #FFAEB9
#FFA54F #FFA500 #FFA07A #FF8C69
#FF8C00 #FF83FA #FF82AB #FF8247
#FF7F50 #FF7F24 #FF7F00 #FF7256
#FF6EB4 #FF6A6A #FF69B4 #FF6347
#FF4500 #FF4040 #FF3E96 #FF34B3
#FF3030 #FF1493 #FF00FF #FF0000
#FDF5E6 #FCFCFC #FAFAFA #FAFAD2
#FAF0E6 #FAEBD7 #FA8072 #F8F8FF
#F7F7F7 #F5FFFA #F5F5F5 #F5F5DC
#F5DEB3 #F4F4F4 #F4A460 #F2F2F2
#F0FFFF #F0FFF0 #F0F8FF #F0F0F0
#F0E68C #F08080 #EEEEE0 #EEEED1
#EEEE00 #EEE9E9 #EEE9BF #EEE8CD
#EEE8AA #EEE685 #EEE5DE #EEE0E5
#EEDFCC #EEDC82 #EED8AE #EED5D2
#EED5B7 #EED2EE #EECFA1 #EECBAD
#EEC900 #EEC591 #EEB4B4 #EEB422
#EEAEEE #EEAD0E #EEA9B8 #EEA2AD
#EE9A49 #EE9A00 #EE9572 #EE82EE
#EE8262 #EE7AE9 #EE799F #EE7942
#EE7621 #EE7600 #EE6AA7 #EE6A50
#EE6363 #EE5C42 #EE4000 #EE3B3B
#EE3A8C #EE30A7 #EE2C2C #EE1289
#EE00EE #EE0000 #EDEDED #EBEBEB
#EAEAEA #E9967A #E8E8E8 #E6E6FA
#E5E5E5 #E3E3E3 #E0FFFF #E0EEEE
#E0EEE0 #E0E0E0 #E066FF #DEDEDE
#DEB887 #DDA0DD #DCDCDC #DC143C
#DBDBDB #DB7093 #DAA520 #DA70D6
#D9D9D9 #D8BFD8 #D6D6D6 #D4D4D4
#D3D3D3 #D2B48C #D2691E #D1EEEE
#D1D1D1 #D15FEE #D02090 #CFCFCF
#CDCDC1 #CDCDB4 #CDCD00 #CDC9C9
#CDC9A5 #CDC8B1 #CDC673 #CDC5BF
#CDC1C5 #CDC0B0 #CDBE70 #CDBA96
#CDB7B5 #CDB79E #CDB5CD #CDB38B
#CDAF95 #CDAD00 #CDAA7D #CD9B9B
#CD9B1D #CD96CD #CD950C #CD919E
#CD8C95 #CD853F #CD8500 #CD8162
#CD7054 #CD69C9 #CD6889 #CD6839
#CD661D #CD6600 #CD6090 #CD5C5C
#CD5B45 #CD5555 #CD4F39 #CD3700
#CD3333 #CD3278 #CD2990 #CD2626
#CD1076 #CD00CD #CD0000 #CCCCCC
#CAFF70 #CAE1FF #C9C9C9 #C7C7C7
#C71585 #C6E2FF #C67171 #C5C1AA
#C4C4C4 #C2C2C2 #C1FFC1 #C1CDCD
#C1CDC1 #C1C1C1 #C0FF3E #BFEFFF
#BFBFBF #BF3EFF #BEBEBE #BDBDBD
#BDB76B #BCEE68 #BCD2EE #BC8F8F
#BBFFFF #BABABA #BA55D3 #B9D3EE
#B8B8B8 #B8860B #B7B7B7 #B5B5B5
#B4EEB4 #B4CDCD #B452CD #B3EE3A
#B3B3B3 #B2DFEE #B23AEE #B22222
#B0E2FF #B0E0E6 #B0C4DE #B0B0B0
#B03060 #AEEEEE #ADFF2F #ADD8E6
#ADADAD #ABABAB #AB82FF #AAAAAA
#A9A9A9 #A8A8A8 #A6A6A6 #A52A2A
#A4D3EE #A3A3A3 #A2CD5A #A2B5CD
#A1A1A1 #A0522D #A020F0 #9FB6CD
#9F79EE #9E9E9E #9C9C9C #9BCD9B
#9B30FF #9AFF9A #9ACD32 #9AC0CD
#9A32CD #999999 #9932CC #98FB98
#98F5FF #97FFFF #96CDCD #969696
#949494 #9400D3 #9370DB #919191
#912CEE #90EE90 #8FBC8F #8F8F8F
#8EE5EE #8E8E8E #8E8E38 #8E388E
#8DEEEE #8DB6CD #8C8C8C #8B8B83
#8B8B7A #8B8B00 #8B8989 #8B8970
#8B8878 #8B8682 #8B864E #8B8386
#8B8378 #8B814C #8B7E66 #8B7D7B
#8B7D6B #8B7B8B #8B795E #8B7765
#8B7500 #8B7355 #8B6969 #8B6914
#8B668B #8B6508 #8B636C #8B5F65
#8B5A2B #8B5A00 #8B5742 #8B4C39
#8B4789 #8B475D #8B4726 #8B4513
#8B4500 #8B3E2F #8B3A62 #8B3A3A
#8B3626 #8B2500 #8B2323 #8B2252
#8B1C62 #8B1A1A #8B0A50 #8B008B
#8B0000 #8A8A8A #8A2BE2 #8968CD
#87CEFF #87CEFA #87CEEB #878787
#858585 #848484 #8470FF #838B8B
#838B83 #836FFF #828282 #7FFFD4
#7FFF00 #7F7F7F #7EC0EE #7D9EC0
#7D7D7D #7D26CD #7CFC00 #7CCD7C
#7B68EE #7AC5CD #7A8B8B #7A7A7A
#7A67EE #7A378B #79CDCD #787878
#778899 #76EEC6 #76EE00 #757575
#737373 #71C671 #7171C6 #708090
#707070 #6E8B3D #6E7B8B #6E6E6E
#6CA6CD #6C7B8B #6B8E23 #6B6B6B
#6A5ACD #698B69 #698B22 #696969
#6959CD #68838B #68228B #66CDAA
#66CD00 #668B8B #666666 #6495ED
#63B8FF #636363 #616161 #607B8B
#5F9EA0 #5E5E5E #5D478B #5CACEE
#5C5C5C #5B5B5B #595959 #575757
#556B2F #555555 #551A8B #54FF9F
#548B54 #545454 #53868B #528B8B
#525252 #515151 #4F94CD #4F4F4F
#4EEE94 #4D4D4D #4B0082 #4A708B
#4A4A4A #48D1CC #4876FF #483D8B
#474747 #473C8B #4682B4 #458B74
#458B00 #454545 #43CD80 #436EEE
#424242 #4169E1 #40E0D0 #404040
#3D3D3D #3CB371 #3B3B3B #3A5FCD
#388E8E #383838 #36648B #363636
#333333 #32CD32 #303030 #2F4F4F
#2E8B57 #2E2E2E #2B2B2B #292929
#282828 #27408B #262626 #242424
#228B22 #218868 #212121 #20B2AA
#1F1F1F #1E90FF #1E1E1E #1C86EE
#1C1C1C #1A1A1A #191970 #1874CD
#171717 #141414 #121212 #104E8B
#0F0F0F #0D0D0D #0A0A0A #080808
#050505 #030303 #00FFFF #00FF7F
#00FF00 #00FA9A #00F5FF #00EEEE
#00EE76 #00EE00 #00E5EE #00CED1
#00CDCD #00CD66 #00CD00 #00C5CD
#00BFFF #00B2EE #009ACD #008B8B
#008B45 #008B00 #00868B #00688B
#006400 #0000FF #0000EE #0000CD
#0000AA #00008B #000080 #000000
]]> http://www.blook.org.cn/1225.htm/feed 22 30个精选的CSS技术和实例 http://www.blook.org.cn/1114.htm http://www.blook.org.cn/1114.htm#comments Sat, 30 Jan 2010 01:00:24 +0000 菠萝 http://www.blook.org.cn/?p=1114 1.Hoverbox 图片集

一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。
CSS-实例

2.高级CSS菜单

一款很有创意且复杂的CSS导航方案。
CSS-实例

3.滑动影集

手风琴效果的影集，悬停便可拉伸图片。
CSS-实例

4.Lightbox幻灯片

题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。
CSS-实例

5.图片的阴影效果

在A List Apart上的一个关于图片效果Demo的讨论文章“CSS Drop shadows“.
CSS-实例

6.跨浏览器多页式影集

悬停标签改变分类，悬停缩略图显示放大图。
CSS-实例

7.CSS照片放大

使用简单的图片和background-position属性来进行调解。
CSS-实例

8.CSS gallery layout—smells like a table

模仿表格布局，但使用的是列表。图集是流式宽度。
CSS-实例

9.Sticky Footer

仅使用了很少XHTML的静态页脚。
CSS-实例

10.whatever: hover

模仿Windows开始菜单的CSS导航菜单。

11.纯CSS手风琴效果

使用div和:hover伪类的手风琴效果，这个效果可以垂直显示也可以水平显示。
CSS-实例

12.使用PNG和背景色的可扩展按钮

CSS-实例

13.Pushbutton Links

链接在不使用图片的情况下看起来像个按钮。
CSS-实例

14.含固定Header的可卷动表格

表格的标题被固定的优秀长表格。
CSS-实例

15.CSS内容遮盖

当你悬停在图片上时，div容器会显示更多文字。
CSS-实例

16.CSS样式表格版本2

一个使用背景图片且非常漂亮，被语义化标记的表格。
CSS-实例

17.PNG遮盖

另一种为图片添加圆角的方法。（圆角、边框、阴影）
CSS-实例

18.利用CSS为超链接添加提示

关于为不同类型的链接添加图标的简单教程。
CSS-实例

19.简单的CSS圆角边框

仅适用了一张图片和很少的几行代码及标记。
CSS-实例

20.Sitemap Celebration

使用嵌套列表的树形导航，很适合网站地图页面。

21.简单的跨浏览器幻灯片

不使用JavaScript实现透明度技巧（但是以不符合XHTML验证为代价）
CSS-实例

22.圆角2

流式跨度和高度的圆角div。
CSS-实例

23.使用背景图片百分比来创建图表

条线图使用列表<li>。
CSS-实例

24.CSS柱状图:实例

3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。
CSS-实例

25.动态翻转简单头

箭头会平滑的跟随鼠标移动，没有使用一丁点JavaScript和gif动画。
CSS-实例

26.基于CSS的表单模板

CSS-实例

27.CSS图片文本结合技巧

使用了空白div来让文本能围绕背景图中的图像显示。
CSS-实例

28.使用CSS实现淡入效果的图片

这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。
CSS-实例

29.纯CSS弹出效果

一个在IE5(Mac)上也能正常工作的弹出技巧。
CSS-实例

30.使用CSS实现文本渐变效果

使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。
CSS-实例

CSS-实例

CSS-实例

]]> http://www.blook.org.cn/1114.htm/feed 2