body:before { left: 68px; }\n.body:after{ right: 68px; }\n.head {\n width: 336px;\n height: 155px;\n background-color: #A5C63B;\n border-radius: 200px 200px 0px 0px;\n position: absolute;\n top: -170px;\n}\n.head:before,\n.head:after {\n background-color: #A5C63B;\n content: '';\n width: 10px; \n height: 53px;\n position: absolute;\n top: -30px;\n border-radius: 20px 20px 0px 0px;\n}\n.head:after { -webkit-transform: translate(63px, 0px) rotate(-30deg); -moz-transform:translate(63px, 0px) rotate(-30deg); -o-transform:translate(63px, 0px) rotate(-30deg); }\n.head:before{ -webkit-transform: translate(255px, 0px) rotate(30deg); -moz-transform:translate(255px, 0px) rotate(30deg); -o-transform:translate(255px, 0px) rotate(30deg); }\n.arms:before,\n.arms:after {\n background-color: #A5C63B;\n content: '';\n width: 75px; \n height: 233px;\n top: -8px;\n position: absolute;\n border-radius: 40px 40px 40px 40px; \n}\n.arms:before { left: -90px; }\n.arms:after{ right: -90px; }\n.eyes:before,\n.eyes:after {\n background-color: #FFFFFF;\n content: '';\n width: 27px; \n height: 27px;\n top: 68px;\n position: absolute;\n border-radius: 20px;\n}\n.eyes:before { left: 78px;}\n.eyes:after{ right: 78px;}\n<\/style>\n<\/head>\n<body>\n<div class=\"android\">\n <div class=\"head\">\n <div class=\"eyes\"><\/div>\n <\/div>\n <div class=\"body\">\n <div class=\"arms\"><\/div>\n <\/div>\n<\/div>\n<\/body>",
"pinned": false
},
{
"timestamp": 1475243727,
"position": 0,
"title": "<style type=\"text\/css\">\ndiv {\nbackground: url('http:\/\/www.codefans.net\/jscss\/demoimg\/201312\/blur.jpg') no-repeat top left;\nwidth:232px;height: 200px; }\nimg {display:block;background: url('http:\/\/www.codefans.net\/jscss\/demoimg\/201312\/parallax.gif') no-repeat bottom left;\npadding: 93px 100px 75px 100px;\n}\n<\/style>\n<\/head>\n<body>\n<div>\n<img src=\"http:\/\/www.codefans.net\/jscss\/demoimg\/201312\/Anime_runner.gif\" alt=\"runner\" \/>\n<\/div>\n<\/body>",
"contents": "<style type=\"text\/css\">\ndiv {\nbackground: url('http:\/\/www.codefans.net\/jscss\/demoimg\/201312\/blur.jpg') no-repeat top left;\nwidth:232px;height: 200px; }\nimg {display:block;background: url('http:\/\/www.codefans.net\/jscss\/demoimg\/201312\/parallax.gif') no-repeat bottom left;\npadding: 93px 100px 75px 100px;\n}\n<\/style>\n<\/head>\n<body>\n<div>\n<img src=\"http:\/\/www.codefans.net\/jscss\/demoimg\/201312\/Anime_runner.gif\" alt=\"runner\" \/>\n<\/div>\n<\/body>",
"pinned": false
},
{
"timestamp": 1475243817,
"position": 0,
"title": "<style type=\"text\/css\">\n.item{width:500px;font:17px '微软雅黑';height:300px;margin:0 auto;position:relative;}\n.hi,h3{position:absolute;left:0;bottom:0;width:100%;height:36px;}\nh3{line-height:30px;color:#fff;margin:0;z-index:1;}\/*加入z-index值，文字就不会透明了*\/\n.hi{background:blue;opacity:0.3;}\/*背景透明*\/\n<\/style>\n<\/head>\n<body>\n<h1>Div背景透明文字不透明<\/h1>\n<div class=\"item\"> \t\n<p><a href=\"http:\/\/www.codefans.net\/jscss\/\"><img src=\"http:\/\/www.codefans.net\/jscss\/demoimg\/wall5.jpg\" \/><\/a><\/p>\n<h3>你看！这行文字下面的背景透明了，而文字没有透明。<\/h3><div class=\"hi\"><\/div>\n<\/div>\n<\/body>",
"contents": "<style type=\"text\/css\">\n.item{width:500px;font:17px '微软雅黑';height:300px;margin:0 auto;position:relative;}\n.hi,h3{position:absolute;left:0;bottom:0;width:100%;height:36px;}\nh3{line-height:30px;color:#fff;margin:0;z-index:1;}\/*加入z-index值，文字就不会透明了*\/\n.hi{background:blue;opacity:0.3;}\/*背景透明*\/\n<\/style>\n<\/head>\n<body>\n<h1>Div背景透明文字不透明<\/h1>\n<div class=\"item\"> \t\n<p><a href=\"http:\/\/www.codefans.net\/jscss\/\"><img src=\"http:\/\/www.codefans.net\/jscss\/demoimg\/wall5.jpg\" \/><\/a><\/p>\n<h3>你看！这行文字下面的背景透明了，而文字没有透明。<\/h3><div class=\"hi\"><\/div>\n<\/div>\n<\/body>",
"pinned": false
},
{
"timestamp": 1475243832,
"position": 0,
"title": "CSS Div背景透明文字不透明的代码\n2014-04-07 20:58:14 +0800\n代码说明\nCSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容，DiV透明其实挺简单，主要是为background定义opacity属性，一般这个是最大值是1，数值越接近1，则越不透明，也就是越小越透明，颜色可以自定义。这样可以让图片上的文字更清淅，在一些图片特效中我们会见到这种效果。转自源码爱好者\nHTML代码",
"contents": "CSS Div背景透明文字不透明的代码\n2014-04-07 20:58:14 +0800\n代码说明\nCSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容，DiV透明其实挺简单，主要是为background定义opacity属性，一般这个是最大值是1，数值越接近1，则越不透明，也就是越小越透明，颜色可以自定义。这样可以让图片上的文字更清淅，在一些图片特效中我们会见到这种效果。转自源码爱好者\nHTML代码",
"pinned": false
},
{
"timestamp": 1475243857,
"position": 0,
"title": "CSS奇特用法：为IMG设置背景图片\n2014-04-07 20:53:13 +0800\n代码说明\nIMG标签本身是显示图片的，但通过CSS可以再为其设置背景图片，让其和自身的图片配合来显示，最终的效果会让你惊叹。当然，这个发现来自于老外，所以代码马上与大家分享。再此之前，我也从来没有想到过这个思路，我想这种思路可以应用的地方相当多了。转自源码爱好者。\nHTML代码",
"contents": "CSS奇特用法：为IMG设置背景图片\n2014-04-07 20:53:13 +0800\n代码说明\nIMG标签本身是显示图片的，但通过CSS可以再为其设置背景图片，让其和自身的图片配合来显示，最终的效果会让你惊叹。当然，这个发现来自于老外，所以代码马上与大家分享。再此之前，我也从来没有想到过这个思路，我想这种思路可以应用的地方相当多了。转自源码爱好者。\nHTML代码",
"pinned": false
},
{
"timestamp": 1475243872,
"position": 0,
"title": "CSS3实现shadow字体突起效果\n2014-04-07 20:25:36 +0800\n代码说明\ncss3使用shadow方法实现字体突起效果，让字体看上去有立体感，CSS3立体文字效果，请使用Opear、Chrome浏览器避免兼容问题。转自源码爱好者",
"contents": "CSS3实现shadow字体突起效果\n2014-04-07 20:25:36 +0800\n代码说明\ncss3使用shadow方法实现字体突起效果，让字体看上去有立体感，CSS3立体文字效果，请使用Opear、Chrome浏览器避免兼容问题。转自源码爱好者",
"pinned": false
},
{
"timestamp": 1475243882,
"position": 0,
"title": "“运行代码”的文本域代码\n2014-04-07 20:23:39 +0800\n代码说明\n网页特效网站所需要的“运行代码”功能的文本框，将代码复制到此文本框中即可实现代码的运行，查看代码效果非常方便，有一些文本编辑器，已将此功能内置到其中，希望大家喜欢。