CSS简笔画logo系列:纯CSS绘制“Adidas” Logo
本节你能get到什么前端知识
1、CSS Flex垂直居中对齐
2、CSS clip 剪裁
3、CSS box-shadow 多阴影
看图解构
看图很简单咯,Adidas Logo就是用3个“梭形”组成,然后添加3条和底色一样颜色的线覆盖在上面即可。
什么是“梭形”?
船大家都见过吧,它就是“梭形”形状的,类似于“菱形”,但是“梭形”两头都是圆圆的,不是尖尖的角。生活中,还有很多花瓣也都是“梭形”的。
logo底图
<div id="adidas">
<div class="logo">
</div>
</div>
body {
width: 100%;
height: 100vh;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
--bgColor: #017ac3;
}
#adidas {
position: relative;
height: 325px;
overflow: hidden;
width: 325px;
border-radius: 50%;
background: var(--bgColor);
}
flex布局如何水平垂直居中?
要用水平垂直居中元素的父元素添加下面样式,且它本身要有高度和宽度(被子元素撑大也可以),该父元素下面只能有它一个子元素。
display: flex;
justify-content: center;
align-items: center;
CSS “梭形”
<div id="adidas">
<div class="logo">
<div class="leaf1">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
</div>
</div>
#adidas * {
position: absolute;
}
#adidas .leaf1 {
top: 50px;
left: 111px;
}
#adidas .leaf-t1{
background: #fff;
border-radius: 204px/280px;
clip: rect(18px 43px 255px 0px);
height: 280px;
top: -68px;
width: 194px;
}
#adidas .leaf1 .leaf-t1{
height: 250px;
}
我们用CSS实现“梭形”就好复杂一点,用clip
裁剪两个扇形,拼接而成一个“梭形”。上图就是clip
裁剪后的图形,然后画出另外一个
css clip
属性:
clip
属性剪裁绝对定位元素,clip
属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。
#adidas .leaf-t2 {
background: #fff;
border-radius: 204px/280px;
clip: rect(18px 43px 255px 0px);
height: 280px;
top: -68px;
width: 194px;
}
#adidas .leaf1 .leaf-t2 {
height: 250px;
}
/**
上面两个没有区别,主要是下面这段样式
调整位置并旋转180°
*/
#adidas .leaf-t2 {
left: -109px;
transform: rotate(180deg);
}
依次,其他两个“梭形”也就出来了
<div id="adidas">
<div class="logo">
<div class="leaf1">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
<div class="leaf2">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
<div class="leaf3">
<div class="leaf-t1"></div>
<div class="leaf-t2"></div>
</div>
</div>
</div>
#adidas .leaf-t1,
#adidas .leaf-t2 {
...
/* 所有扇形除了裁剪,高度外其他样式都一样 */
}
#adidas .leaf-t2 {
left: -109px;
transform: rotate(180deg);
}
#adidas .leaf1 .leaf-t1,
#adidas .leaf1 .leaf-t2 {
height: 250px;
}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2,
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
clip: rect(20px 38px 220px 0px);
height: 240px;
}
#adidas .leaf2 {
left: 0px;
top: 123px;
transform: rotate(-40deg);
}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2 {
border-radius: 200px/287px;
width: 200px;
}
#adidas .leaf2 .leaf-t1 {
left: 5px;
}
#adidas .leaf2 .leaf-t2 {
left: -120px;
}
#adidas .leaf3 {
left: 241px;
top: 69px;
transform: rotate(40deg);
}
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2 {
border-radius: 200px/287px;
width: 200px;
}
#adidas .leaf3 .leaf-t1 {
left: 4px;
}
#adidas .leaf3 .leaf-t2 {
left: -121px;
}
CSS box-shadow
CSS box-shadow
多阴影,前面很多文章都有提到过,大家先看看用法:
box-shadow: h-shadow v-shadow blur spread color inset;
属性值描述 h-shadow 指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边
v-shadow 指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部
blur 阴影模糊半径,此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊
spread 阴影扩展半径,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小
color 阴影颜色,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
inset 阴影类型,默认的投影方式是外阴影;inset就是将外阴影变成内阴影
注意:多层阴影,最内层优先级最高,之后依次降低。使用逗号“,”隔开。
大家看图,应该就能明白box-shadow
多层阴影遵循的规律了。
回到我们正题上
<div id="adidas">
<div class="logo">
...
<div class="stripes"></div>
</div>
</div>
#adidas .stripes {
box-shadow:
0 24px 0 0 var(--bgColor),
0 48px 0 0 var(--bgColor);
height: 12px;
left: 0;
top: 128px;
width: 100%;
z-index: 10;
}
元素本身是一道横线,然后多阴影添加2个,这样就是3道横线了。
结语
本节内容就到此结束了,大家应该或多或少都有些收获吧,关注我,学习更多前端知识,但不止于前端哦!
小伙伴们,有问题可以评论区留言哦,欢迎大家点评。
谢谢大家一直以来的支持!
- 跟Google学写代码--Chromium/base--stl_util源码学习及应用
- libphonenumber--windows上编译libphonenumber.lib以及使用(C++、VS2015)
- querySelector与querySelectorAll
- 【技术博客】Spark性能优化指南——基础篇
- 移动端兼容系列 HTML与CSS兼容
- 保存到配置文件
- linux学习第六十篇:Linux监控平台介绍,zabbix监控介绍,安装zabbix,忘记Admin密码如何做
- 支持向量机及Python代码实现
- 【技术博客】Android自定义Lint实践
- UC浏览器皮肤的那个坑
- 文本溢出-超出文本显示为省略号
- 征信区块链解决方案探索(Hyperledger)
- 概率论12 矩与矩生成函数
- Python的hasattr() getattr() setattr() 函数使用方法详解
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- hadoop常用维护命令
- 自定义Chrome等浏览器搜索引擎
- hiveServer2服务端安装
- hive数据加载
- Python 技术篇-使用opencv读取图片实例演示,python安装opencv库
- 关于页更改并加入一些在线服务
- Hadoop-2.6.0为基础的Hive安装
- Python 技术篇-opencv读取中文路径图片报错及解决办法
- Javaweb鼠标事件案例分析—鼠标移入移出表格颜色变化
- docker registry V2私有仓库搭建
- Python 路径问题:cv2.error: OpenCV(4.1.0)...size.width>0 && size.height>0 in function 'cv::imshow'. 原因与解决
- 算法案例分析—字符串模式匹配算法
- Docker-软件工程集装箱技术
- PyQt5 技术篇-获取电脑屏幕桌面的宽、高和分辨率
- 使用Python快速抠图