搜索

Multiple Borders with Simple CSS

07月07日
分类:前端 标签: 评论:[3]

不用多层div嵌套，不用图片，我们只要用简单的CSS就能实现多层边框的效果，其方法是通过:after 和 :before 伪类。效果如下图。

multi-border-with-simple-css

继续阅读»

CSS3 Raindrop

06月08日
分类:IT Skill Share 标签: 评论:[1]

This pure CSS3 raindrop is simply gorgeous. It uses a number of gradients as well as other tricks for a stunning image-less result.

raindrop

继续阅读»

HTML5 and CSS3: Is your browser ready?

05月15日
分类:前端 标签: 评论:[0]

html5 readiness

虽然，HTML5和CSS3还没最终确定一张交互图来清晰地展示未来浏览器支持哪些特性，但从上图，我们能明显的看到一点：IE离其有多远！

继续阅读»

CSS3 Solutions for IE

05月01日
分类:前端 标签: 评论:[2]

个人一直提倡尽量少用hack，多研究自己的结构，多研究自己的写法，除非一些经典的IE hack。总之是在万不得已的情况下，我个人才会去使用hack这东西！

下午一点半的车，还是抽空去看看一些关注网站的动态,发现一篇关于CSS3 Solutions for Internet Explorer。其实相当一部分是使用IE的filter属性。

ie

Opacity / Transparency

  1. #myElement {
  2. opacity: .4; /* other browsers */
  3. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
  4. -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=40)”; /* this works in IE8 only */
  5. }

继续阅读»

用CSS3实现选中文字的背景颜色

04月25日
分类:前端 标签: 评论:[3]

text selection color

前天晚上，元云跟我说：“奇怪，这个网站的选中的文字背景是这种颜色（浅黄色）”。见识短浅的我，第一反应就是用脚本实现的吧。

其实在CSS3中，UI元元素状态伪类E::selection就可以实现用户选中的文字处于自定义的高亮色…

继续阅读»

用CSS3制作Windows7开始菜单

04月13日
分类:前端 标签: 评论:[0]

CSS3让我们花更少的时间做更多的事，其强大让人叹止。windows7系统界面很华丽，现在看看我们用CSS3和一些ICON实现windows7的开始菜单。

windows7 start menu Sketch

Container

staremenu包含两个无序的菜单链接，其中用到CSS3中的圆角，阴影，渐变！样式代码如下：

  1. #startmenu {
  2. border:solid 1px #838A44;
  3. overflow:visible;
  4. display:inline-block;
  5. margin:60px 0 0 20px;
  6. -moz-border-radius:5px;
  7. -webkit-border-radius:5px;
  8. position:relative;
  9. -moz-box-shadow: inset 0 0 1px #fff;
  10. -webkit-box-shadow: inset 0 0 1px #fff;
  11. background-color:#619bb9;
  12. background: -moz-linear-gradient(top, #E8EC4D, #869F03 50%, #697806);
  13. background: -webkit-gradient(linear, center top, center bottom, from(#E8EC4D),color-stop(45%, #869F03), to(#697806));
  14. }

继续阅读»