强大css3制作新浪LOGO 胜过PS

请使用支持CSS3的浏览器查看效果：
http://keleyi.com/a/bjad/6lu3dgj8.htm

效果图：

完整代码如下：

 <html>

 <head>

 <title>CSS3新浪LOGO-柯乐义</title>

 <style>

 .sina{ margin:60px 0 0 22px;}

 .head{ position:relative; width:195px; height:220px;}

 .head_bg{ position:absolute; width:200px; height:175px; background:#ab2b41; left:6px; z-index:6;

 -moz-border-radius-topleft:200px 180px;

 -moz-border-radius-topright: 200px 180px;

 -moz-border-radius-bottomleft: 200px 180px;

 -moz-border-radius-bottomright: 200px 180px;

 -webkit-border-radius:200px 180px;

 -moz-transform: rotate(-6deg);

 -webkit-transform:rotate(-6deg);

 -moz-box-shadow:1px 4px 3px #333;

 -webkit-box-shadow:1px 4px 3px #333;

 border:1px solid #c03461;

 }

 .head_top{  position:absolute; top:-3px; left:5px; width:197px; height:167px;z-index:7;

 -moz-border-radius-topleft:200px 180px;

 -moz-border-radius-topright:200px 180px;

 -moz-border-radius-bottomleft:200px 180px;

 -moz-border-radius-bottomright:200px 180px;

 -webkit-border-radius:200px 180px;

 -moz-transform:rotate(-6deg);

 -webkit-transform:rotate(-6deg);

 background: -moz-linear-gradient(left top, #e16591, #ce3551 50%);

 background: -webkit-gradient(linear, 0 0, 0 50%, from(#e16591), to(#ce3551));

 }

 .head_shadow{ position:absolute; width:190px; height:162px;  top:2px; left:10px; z-index:8;

 -moz-border-radius-topleft:200px 180px;

 -moz-border-radius-topright:200px 180px;

 -moz-border-radius-bottomleft:200px 180px;

 -moz-border-radius-bottomright:200px 180px;

 -webkit-border-radius:200px 180px;

 background: -moz-linear-gradient(left top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 10% 50%, from(#fff), to(#ce3552));

 }

 .head_a1{ width:54px; height:45px; position:absolute; top:-24px; right:32px;background:#d53960; z-index:5;

 border:1px solid #c03461;

 -moz-border-radius:180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(-6deg);

 -webkit-transform:rotate(-6deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a1 .top{width:100px; height:100px; position:absolute; top:-80px; right:-11px; background:#fff; z-index:1;

 -moz-border-radius:135px;

 -webkit-border-radius:135px;

 }

 .head_a1 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-top-left-radius:135px;

 -webkit-border-top-right-radius:135px;

 -webkit-border-bottom-right-radius:135px;

 -webkit-border-bottom-left-radius:0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a1 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-2px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a2{ width:60px; height:45px; position:absolute; top:-22px; right:-13px;background:#d53960; z-index:4;

 border:1px solid #c03461;

 -moz-border-radius:180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(-10deg);

 -webkit-transform: rotate(-10deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a2 .top{width:40px; height:38px; position:absolute; top:-12px; right:7px; background:#fff; z-index:1;

 -moz-border-radius:180px 0 180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(20deg);

 -webkit-transform: rotate(20deg);

 }

 .head_a2 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a2 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-1px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a3{ width:80px; height:47px; position:absolute; top:6px; right:-46px;background:#d53960; z-index:3;

 border:1px solid #c03461;

 -moz-border-radius:100px 0 110px 0;

 -webkit-border-radius:100px 0 110px 0;

 -moz-transform: rotate(-10deg);

 -webkit-transform: rotate(-10deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a3 .top{width:67px; height:38px; position:absolute; top:-18px; right:15px; background:#fff; z-index:1;

 -moz-border-radius:180px 0 180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(40deg);

 -webkit-transform: rotate(40deg);

 }

 .head_a3 .body{width:23px; height:23px; position:absolute; top:-8px; right:-1px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-72deg);

 -webkit-transform: rotate(-72deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a3 .shadow{width:19px; height:19px; position:absolute; top:-6px; right:0px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a4{ width:80px; height:47px; position:absolute; top:44px; right:-55px; background:#d53960; z-index:2;

 border:1px solid #c03461;

 -moz-border-radius:80px 0 110px 0;

 -webkit-border-radius:80px 0 110px 0;

 -moz-transform: rotate(8deg);

 -webkit-transform: rotate(8deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a4 .top{width:67px; height:38px;position:absolute; top:-18px; right:13px; background:#fff; z-index:1;

 -moz-border-radius:180px 0 180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(40deg);

 -webkit-transform: rotate(40deg);

 }

 .head_a4 .body{width:23px; height:23px; position:absolute; top:-9px; right:-2px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a4 .shadow{width:19px; height:19px; position:absolute; top:-7px; right:-1px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a5{ width:54px; height:45px; position:absolute; top:87px; right:-45px; background:#d53960; z-index:1;

 border:1px solid #c03461;

 -moz-border-radius:135px 0 180px 0;

 -webkit-border-radius:135px 0 180px 0;

 -moz-transform: rotate(35deg);

 -webkit-transform: rotate(35deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a5 .top{width:100px; height:100px; position:absolute; top:-78px; right:-7px; background:#fff; z-index:1;

 -moz-border-radius:135px;

 -webkit-border-radius:135px;

 }

 .head_a5 .body{width:23px; height:23px; position:absolute; top:-6px; right:0px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a5 .shadow{width:19px; height:19px; position:absolute; top:-4px; right:2px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .eye{ position:absolute; top:47px; left:27px; width:161px; height:88px; z-index:10;

 -moz-transform: rotate(-2deg);

 -webkit-transform: rotate(-2deg);

 }

 .eye1{ position:absolute; top:57px; left:59px; width:8px; height:8px; background:#fff; z-index:5;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 }

 .eye2{ position:absolute; top:29px; left:81px; width:22px; height:22px; background:#fff; z-index:4;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 }

 .eye3{ position:absolute; top:25px; left:56px; width:47px; height:47px; background:#000; z-index:3;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 }

 .eye4{ position:absolute; top:14px; left:46px; width:67px; height:67px; border:1px solid #312613; background:#66383d; z-index:2;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 -moz-box-shadow:0px 0px 5px #000;

 -webkit-box-shadow:0px 0px 5px #000;

 }

 .eye5{ position:absolute; top:1px; left:8px; width:137px; height:86px; background:#fff; z-index:1;

 border-top:5px solid #999;border-left:5px solid #999;

 -moz-border-radius:300px 30px 300px 30px;

 -webkit-border-radius:300px 30px 300px 30px;

 -moz-transform: rotate(20deg);

 -webkit-transform: rotate(20deg);

 -moz-box-shadow:0px -7px 0 #ec9dc2;

 -webkit-box-shadow:0px -7px 0 #ec9dc2;}

 </style>

 </head>

 <body>

 <a href="http://keleyi.com/a/bjad/6lu3dgj8.htm">查看效果</a>

 <div class="sina">

   <div class="head">

     <div class="head_bg"></div>

     <div class="head_top"></div>

     <div class="head_shadow"></div>

     <div class="head_a1">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a2">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a3">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a4">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a5">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

    </div>

     <div class="eye">

       <div class="eye1"></div>

       <div class="eye2"></div>

       <div class="eye3"></div>

       <div class="eye4"></div>

       <div class="eye5"></div>

     </div>

   </div>

 </div>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

强大css3制作新浪LOGO 胜过PS的更多相关文章

新浪微博logo已经去掉了“新浪”二字
如果有一天我能做出一个产品,它的命名就以我所在的行业命名该多好啊,可惜那只是一个梦.但这样的梦新浪微博却实现了,今天我登陆新浪微博的时候发现logo已经去掉了“新浪”二字,我开始还以为我自己的电脑网 ...
[threeJs][新浪股票api][css3]3D新浪财经数据-最近A股涨的也太疯了......
使用threeJS搭配新浪股票财经API 在线: http://wangxinsheng.herokuapp.com/stock 截图: A股涨幅榜[一片红10%] 检索[单击添加到自选内,自选使用l ...
豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点二. 内容细节的特点三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
css3制作动画性能问题
这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 1.用canvas.css3.jquery制作动画 Ca ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
ip地址库新浪，淘宝
原文连接地址:http://www.9958.pw/post/city_ip function getAddressFromIp($ip){ $urlTaobao = 'http://ip.taoba ...
新浪计数业务之Redis
今天听一个同事说新浪使用的是Redis,于是自己将研究的过程整理出来以备后用. 我们都知道微博这玩意儿现在很火,新浪作为国内最早使用redis,并且是国内最大的redis使用者,当然备受人们关注.新浪 ...
MWeb 1.3.7 发布！增加发布到 Wordpress 等支持 MetaWeblog API 的服务，如：Wordpress 博客、新浪博客、cnblogs、oschina。
MWeb 1.3.7 版的新功能增加发布到 Wordpress 等支持 Metaweblog API 的服务,目前经测试过的有: Wordpress 博客.新浪博客.cnblogs.oschina. ...
使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

随机推荐

C#设计模式-享元模式
在软件开发过程,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次地去申请内存空间了,这样可能会出现内存使用越来越多的情况,这样的问题是非常严重,然 ...
Entity Framework Code First实体对象变动跟踪
Entity Framework Code First通过DbContext.ChangeTracker对实体对象的变动进行跟踪,实现跟踪的方式有两种:变动跟踪快照和变动跟踪代理. 变动跟踪快照:前面 ...
Bower : ENOGIT git is not installed or not in the PATH
解决方法一: 添加git到window的环境变量中.设置path路径为C:\Program Files\Git\bin 解决方法二: $ set PATH=%PATH%;C:\Program File ...
Android 开源框架Universal-Image-Loader完全解析（一）--- 基本介绍及使用
转载博客:http://blog.csdn.net/xiaanming/article/details/26810303 大家好!差不多两个来月没有写文章了,前段时间也是在忙换工作的事,准备笔试面试什 ...
java中两种添加监听器的策略
/*第一种:将事件的处理委托给其他对象,下面的例子是委托给了MyListener(implements ActionListener)*/ 1 import java.applet.Applet; i ...
jQuery.unique引发一个血案
项目开发过程中,PM说系统只要在一个特定的浏览器中运行就好,但是在其他的浏览器中不能出现逻辑的错误,所以在开发过程中,前端和后台选择是Chrome浏览器,没有仔细测试Firefox和IE.但是昨天PM ...
HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
使用Spire.Barcode程序库生成二维码
使用Spire.Barcode程序库生成二维码某天浏览网页发现了一个二维码的程序库.它的描述说他可以扫描二维码图像.我很感兴趣,想试试他是不是会有用.所以我就用了些方法扫描二维码图像来测试一下.结果 ...
把《c++ primer》读薄（4-1 c和c++数组）
督促读书,总结精华,提炼笔记,抛砖引玉,有不合适的地方,欢迎留言指正. c和c++的数组和指针都属于低级的复合数据类型,比如c++的数组,类似vector容器,指针类似迭代器.低级的数据类型优势是速度 ...
1Z0-053 争议题目解析709
1Z0-053 争议题目解析709 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 709.A database has three online redo log groups w ...

强大css3制作新浪LOGO 胜过PS

强大css3制作新浪LOGO 胜过PS的更多相关文章

随机推荐

热门专题