怎么在html中使logo,如何用CSS3设计腾讯QQ LOGO？

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

目前只支持Chrome观看，效果如下图所示：

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

1、border-radius

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

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

width: 240px;

height: 240px;

-webkit-border-radius: 120px;

效果如下图所示：

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

width: 240px;

height: 240px;

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

效果如下图所示：

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

border-top: 240px solid #2ec8e9;

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

width: 240px;

2、-webkit-transform

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

3、-webkit-box-shadow

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

4、RGBA

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

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

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

怎么在html中使logo,如何用CSS3设计腾讯QQ LOGO？相关推荐

WordPress中使主题支持小工具以及添加插件启用函数
https://www.jb51.net/article/76810.htm 这篇文章主要介绍了WordPress中使主题支持widget以及添加插件启用函数的方法,使WP可以使用小工具widget与 ...
vb6中使text控件的光标随着增加的内容向下移动
vb6中使text控件的光标随着增加的内容向下移动 Dim i As Integer Private Sub Command1_Click() Text1.Text = Text1.Text + &q ...
[转]在资源管理器中使鼠标右键增加一个命令，运行cmd，同时使得当前路径为资源管理器当前的目录...
[转]在资源管理器中使鼠标右键增加一个命令,运行cmd,同时使得当前路径为资源管理器当前的目录 http://www.cnblogs.com/skywind/archive/2009/05/22/14 ...
ios 动态化视图_如何在iOS应用中使高度收集视图动态化
ios 动态化视图 by Payal Gupta 通过Payal Gupta 如何在iOS应用中使集合视图的高度动态化 (How to make height of collection views ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
“this”不能在常量表达式中使用报错的解决方法
"this"不能在常量表达式中使用报错的解决方法问题描述与思考在用C++书写下面一段代码时,编译器报错"'this'不能在常量表达式中使用".在这里,我最开 ...
sunplus8202v BIN文件中LOGO的替换工具设计思路
原创文章,如有转载,请注明出处:http://blog.csdn.net/desert2009sz/article/details/6871758 由于前段时间在做单游戏手柄的无线转换方案,所以收集了 ...
前端开发中如何将文件夹中的图片变为背景图_如何用Elementor设计banner
Banner也可以称之为海报,一般出现在网页的顶部.因为前端设计采用的是Html语言,而Html语言采用的是从上往下依次展示内容的方式,所以Banner的内容往往是一个网站首先呈现给网站访客的内容.如 ...
用1、2、3、4、5、6、7、8、9这9个数字，填入□ 中使等式□□×□□□ = □□□□ 成立，每个数字恰好只用一次。
用1.2.3.4.5.6.7.8.9这9个数字,填入□ 中使等式□□×□□□ = □□□□ 成立,每个数字恰好只用一次. 以下是所有的7 个答案供参考: 12*483=5796 18*297=5346 ...

怎么在html中使logo,如何用CSS3设计腾讯QQ LOGO？

怎么在html中使logo,如何用CSS3设计腾讯QQ LOGO？相关推荐

最新文章

热门文章