欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

如何用CSS3设计腾讯QQ LOGO?

 

最近用CSS设计LOGO上瘾了,前两天分享了《教你使用纯CSS设计HTML5新LOGO》和《教你使用CSS3设计Opera浏览器LOGO》,今天在微博上看到有新浪的朋友用CSS3实现的新浪微博LOGO(如下图所示),一时手痒,就顺手也用CSS3实现了一个QQ的LOGO

如何用CSS3设计腾讯QQ LOGO?

 

 

目前只支持Chrome观看,效果如下图所示:

 

如何用CSS3设计腾讯QQ LOGO?

 

 

主要用到的CSS3属性如下所示:

1、border-radius

CSS3中应用最普遍的属性,用于设置边框圆角,可以采用border-top-left-radius的方式单独设置每个圆角,并可以设置。

1)例如要实现1个圆,可以使用如下代码:

width: 240px;

height: 240px;

-webkit-border-radius: 120px;

效果如下图所示:

 

如何用CSS3设计腾讯QQ LOGO?

 

 

2)要实现1/4个圆,可以用如下代码:

width: 240px;

height: 240px;

-webkit-border-bottom-left-radius: 240px 240px;

效果如下图所示:

 

如何用CSS3设计腾讯QQ LOGO?

 

 

3)要实现1/8个圆,可以用如下代码:

border-top: 240px solid #2ec8e9;

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

width: 240px;

 

如何用CSS3设计腾讯QQ LOGO?

 

 

2、-webkit-transform

主要使用了rotate旋转属性,可以控制元素向左向右旋转。下图里的箭头就是用-webkit-transform:rotate属性实现的。顺便提一句scale缩放属性里如果值为-1,也是有旋转效果的。

 

如何用CSS3设计腾讯QQ LOGO?

 

 

3、-webkit-box-shadow

盒阴影,可以设置元素的阴影。如上图所示。

4、RGBA

RGBA也是CSS3中非常实用和强大的一个功能,以前所有使用RGB HTML的地方都可以使用RGBA的格式来设置透明度。例如QQ浏览器的九宫格可以做成如下显示方式:

 

如何用CSS3设计腾讯QQ LOGO?

 

 

这就是采用RGBA的透明效果实现的,具体实现方式可以参考《浏览器九宫格的简单实现》一文。

用CSS打造QQ标志设计教程分享完成,那么,你会了吗?不会也没关系,用logofree商标在线制作器也可以直接生成类似LOGO,如果生成的标志还不满意,那LOGO高端定制是您的最佳选择。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c50909.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-10-02 22:23 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。