天涯论坛

 找回密码
 立即注册
搜索
查看: 6|回复: 4

css从入门到放弃(3)——css实战 google的logo css版制作

[复制链接]

3144

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968606
发表于 2024-7-30 23:24:05 | 显示全部楼层 |阅读模式

首要瞧瞧最后效果,这可可不是直接截取的谷歌的logo,这是以前说讲的css教程制作出来的。想晓得怎么做的吗?

首要咱们先分析一下这个logo,一共有6个字母,每一个字母的样式都不同样

首要第1步要先在网页中表示这几个字母,

这儿需要用到span标签

网页效果

解释一下span标签。这个标签任何效果,独一的效果便是后期经过css来给他设定样式,来达到区别的效果。

而后咱们来分析一下,此刻网页上的效果,距离近期效果还差有些什么。

第1个字母G为例,第1体积不对,第二颜色不对,便是咱们经过css来设置这两个属性就够了。

而后咱们来新建一个样式 g1

解释一下 .表率这是一个样式类

font-size:200px 设置字体体积为200px 这个体积能够经过qq自带的截图去计算体积

color 颜色 这儿面的数值我是经过软件对照片里的颜色取出来的

为了方便的大众,我把几个字母的颜色在这儿列举一下

G #0968F0

o #DD4F28

o #FFA500

g #1067E3

l #007C4F

e #E04E26

把g字母的样式写好以后,便是调用了。经过代码

<span class="g1">G</span>

网页效果

剩下的几个字母大众自己去试试





上一篇:品牌标志设计的艺术:怎么样让消费者一眼就认出你的品牌?
下一篇:让 Chrome 崩溃的一行 CSS 代码
回复

使用道具 举报

21

主题

666

回帖

-77

积分

限制会员

积分
-77
发表于 2024-8-29 22:47:15 | 显示全部楼层
回顾历史,我们不难发现:无数先辈用鲜血和生命铺就了中华民族复兴的康庄大道。
回复

使用道具 举报

5

主题

662

回帖

157

积分

注册会员

Rank: 2

积分
157
发表于 2024-8-31 05:49:35 | 显示全部楼层
你的话语如春风拂面,让我心生暖意。
回复

使用道具 举报

3073

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138940
发表于 2024-11-8 22:37:47 | 显示全部楼层
你的见解独到,让我受益匪浅,非常感谢。
回复

使用道具 举报

3096

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098748
发表于 2024-11-13 04:51:11 | 显示全部楼层
感谢你的精彩评论,为我的思绪打开了新的窗口。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-25 13:56 , Processed in 0.153355 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.