CSS | Heluyao's Blog

Posts Tagged ‘CSS’

不规则形状导航

2009-11-18 下午 - Web Development - CSS - 导航

不规则形状导航

这样的导航看起来挺复杂，做起来其实挺简单，只是IE6要用到滤镜来确保PNG的透明。万恶的IE6啊！

这里还用到inline-block，IE不支持inline-block，hack给inline，IE6下给定zoom也能解决，再利用负方向的margin值将透明部位重叠。

关键css:

display:inline-block; *display:inline; zoom:1; margin-left:-37px;

预览效果：不规则的导航条

下载文件：点击下载

No Comments » | 248 Views |

利用css中transform属性实现3d

2009-07-16 下午 - Web Development - 3d - CSS - transform

先上PP，容易明白此文内容。

multiple-cubes-css

不需要用到脚本(js)，仅css中transform属性(firefox文档, safari文档)，适当设置“值”，就能实现很酷的3d效果。

浏览器支持：Safari 3.2+, Google Chrome, Firefox 3.5+

基本是个华而无实的效果了，呵呵！玩玩还是不错的！

html：

<div class="cube">
   <div class="topFace">
   <div>Content</div>
   </div>
   <div class="leftFace">Content</div>
   <div class="rightFace">Content</div>
</div>

css：

.cube {position: relative;top: 200px;}
.rightFace,.leftFace,.topFace div {
   padding: 10px;
   width: 180px;
   height: 180px;
}
.rightFace,.leftFace,.topFace {
   position: absolute;
}
.leftFace {
   -webkit-transform: skewY(30deg);
   -moz-transform: skewY(30deg);
   background-color: #ccc;
}
.rightFace {
   -webkit-transform: skewY(-30deg);
   -moz-transform: skewY(-30deg);
   background-color: #ddd;
   left: 200px;
}
.topFace div {
   -webkit-transform: skewY(-30deg) scaleY(1.16);
   -moz-transform: skewY(-30deg) scaleY(1.16);
   background-color: #eee;
   font-size: 0.862em;
}
.topFace {
   -webkit-transform: rotate(60deg);
   -moz-transform: rotate(60deg);
   top: -158px;
   left: 100px;
}

看个例子：

3d演示文档 – 注意：Safari 3.2+, Google Chrome, Firefox 3.5+才能显示正确效果

本来出处：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/

2 Comments » | 299 Views |

CSS3来啦！做点笔记

2009-06-18 下午 - Web Development - CSS - CSS3 - IE8

首先在前端开发的角度BS一下IE8，说什么支持CSS3，现在看来，前端开发的同鞋们还得等IE9，甚至可能IE10！因为大部分它还是没有支持，不过还是有个“安慰奖”滴！

CSS3是个好东西，能支持它的浏览器都是好样的！Safari, Firefox, Opera(支持部分)。好久没做笔记了！

note:

这个css的升级，着实是帮了前端人员不小的“忙”，可惜的是浏览器们没赶上！不过，众多新加的功能中，个人认为真正有实用价值的也没几个！最有用的，当属“圆角(radius)”，其次“阴影(shadow)”、背景图像大小及数量(多背景)、嵌入字体(洋文的可能用得上)、透明度(opacity)、rgba等效果,剩下的就基本是华而无实了！最重要的，现在IE7、IE8都还和它们没“混熟”，默默期待吧！

1 Comment » | 287 Views |

笔记：CSS Selector

2009-02-18 下午 - Web Development - CSS - Selector

这些CSS Selector，目前可能还不适合用在实际项目中。但是将来是肯定能开创一片天地的。只要IE6“倒下”！

CSS2：除IE6外当前主流浏览器都是支持滴！
A > B 匹配A的子元素B
A:first-child 匹配父元素的第一个子元素是A的A
A + B 匹配紧贴着A后面的B
A[property] 匹配含property属性的A
A[property="warning"] 匹配property属性完全等于warning的A(注意“完全等于”)
E[property~="warnging"] 匹配property属性包含warning的A(仅“包含”)

CSS3
A ~ B 匹配A以后的所有B，IE6不支持
A:empty 匹配空元素A，IE6、IE7不支持

详细请进：W3C Specification on CSS3 Selectors

No Comments » | 561 Views |

CSS或js实现行间交替背景色效果

2008-09-24 下午 - Javascript/Ajax, Web Development - background - CSS - javascript

　　本文介绍两种方法，都挺简单的，略懂前端的同志们都应该能理解的。

1.利用CSS控制行的属性：

下载: code.html

<style type="text/css">
ul { list-style:none; font-size:12px; line-height:20px; color:#666;}
ul li{background-color: expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');}
</style>
<ul class="myul1">
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
</ul>

　　通过判断奇偶数来确定li的背景颜色，很简单吧！

2.利用JS控制各行的交替背景。

下载: code2.html

<style type="text/css">
ul { list-style:none; color:#666; font-size:12px;}
.li01 { background:#EAF8FD; }
.li02 { background:#fff; }
</style>
<ul id="list01">
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
<li>·河北作协副主席：我要给韩寒当爹真相</li>
<li>·易建联：在美国去超市没有被认出来</li>
<li>·徐友渔：买到假药举报无门的亲身经历</li>
<li>·航天员如何在太空中吃饭上厕所(图) </li>
<li>·90后大学生艳装军训雷晕教官(图)</li>
<li>·北京报纸涨价便宜了谁</li>
</ul>
<Script type="text/javascript">
objName=document.getElementById("list01").getElementsByTagName("li");
for (i=0;i<objName.length;i++){
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</Script>

　　两个方法都不错哦！值得推荐的！

No Comments » | 2,533 Views |

css解决中英混合链接下划线不对齐问题

2008-09-23 下午 - Web Development - CSS - 下划线 - 对齐 - 链接

　　首先声明，直接在页面里设置链接的时不会出现下划线对不齐的效果。只有当该元素或该元素的父元素带有vertical-middle属性时才会出现。

　　这两者的解决方法不同：

　　1.其本身具有vertical-middle属性时，直接在该元素上加zoom:1。这里值得说一句，w3c是不推崇使用zoom（触发块元素的layout），意思就是不能通过w3c的验证。

　　2.其父元素具有vertical-middle属性时，在该元素上加vertical-middle：baseline后就可以解决。

No Comments » | 2,523 Views |

Chrome对CSS各属性的支持

2008-09-16 下午 - Web Development - Chrome - CSS

　　Chrome，对于做前端开发的伙计们来说应该不陌生。前阵子谷歌推出的浏览器。本人在推出当天就下载试用了，但不到10分钟就又卸载了。没什原因，用惯遨游，够了！等全球很多用户都使用Chrome的时候，我再用它也不迟。到了那时不用都不行了，被“逼”的，就好像火狐“逼”着很多人一样。其实不能这样说，毕竟那么多的用户在使用它，说明它还是好的，就安全性而言，应该算高级别了！

　　回到正题，又扯远了！Chrome对于CSS，可以说跟SAFARI不相上下。对于CSS所有的高级属性它都能很好的支持！这点很让人惊喜哦~~！

　　更详细，请看： http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

No Comments » | 589 Views |

Posts Tagged ‘CSS’

不规则形状导航

利用css中transform属性实现3d

CSS3来啦！做点笔记

笔记：CSS Selector

推荐一款js css压缩工具TBCompressor

CSS或js实现行间交替背景色效果

css解决中英混合链接下划线不对齐问题

Chrome对CSS各属性的支持

关于Heluyao

分类

标签 »

存档

很多朋友关注

最新评论

评论最多