用css3写个logo

标签: 前端开发 css3 | 发表时间:2011-02-17 09:22 | 作者:崔凯 丸子
出处:http://uicss.cn

演示地址:http://uicss.cn/css3/maxthon-logo.html

实现方法:

  1. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;
    填充背景色background:#b1e4ff;
    描边border:2px solid #789cb6;
    加阴影box-shadow: 5px 5px 7px #999;
    给该死的firefox3私有属性-moz-border-radius: 120px;
  2. 再画一个小圈,width: 230px; height: 230px;border-radius: 115px;
    定位,position: relative;top:5px;left:5px;
    填充背景色background:#3b99e3;
    给该死的firefox3私有属性-moz-border-radius: 115px;
  3. 扔一个大白方块进去width: 150px; height: 100px;background:#ffffff;
    定位position: relative;top:70px;left:42px;
    右上大圆角20像素,其他小圆角border-radius: 3px 20px 3px 3px;
    给该死的firefox3私有属性-moz-border-radius: 3px 20px 3px 3px;
  4. 再扔一个白方块进去width: 35px; height: 45px;background:#ffffff;
    定位position: relative;top:30px;left:33px;
    粗一点的蓝色描边border:25px solid #3b99e3;

相关 [css3 logo] 推荐:

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

拾人牙慧 – CSS3实现Opera浏览器的logo

- Wolf - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1012. 原作者:David DeSandro. 原文地址:http://desandro.com/articles/opera-logo-css/. 以下效果截图截自Firefox3.6浏览器:. 上图为CSS3实现的效果图,如果您有兴趣可以与正宗的Opera浏览器的logo图做比对,查看logo原图请狠狠地点击这里:Opera浏览器logo原图.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

Logo里有乾坤

- xh - 左岸读书_blog
对,当然这里专指我们经常见的公司或组织Logo(标志)图案的留白部分. 作为入门门槛低而 又很难出精品的Logo设计(甚至可扩展到任何机构的VI或CI系统设计),怎样在非常有限的视觉幅度中准确、鲜明的表达Logo本身所要传承的形象或精 神语言,并给人以及其深刻的印象,成为众多Logo设计师悉心追求的目标.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

混搭Logo也疯狂[22p]

- mingelz - FeedzShare
来自: 煎蛋 - FeedzShare  . 发布时间:2011年08月03日,  已有 2 人推荐. Logo设计师Graham Smith显然是个酷爱恶搞的家伙——不然他也不会弄出这么多让人啼笑皆非的“混搭”Logo了. 想必如果这些Logo原型的主人们看到自己心爱的Logo跟宿敌品牌搞在一起,那不得是一口老血吐出来…….

品牌logo 设计效应

- mophist - Poboo
每个品牌通过品牌效应,让群众深深被他们的logo 颜色字体形成一种潜意识,让人简单看一眼就可以很清楚品牌的价值,这就是logo 的作用,设计师 Viktor Hertz,通过更改logo 颜色字体,给我们带来一些有趣的logo设计. Frank Melech 创意设计.