专栏首页web秀CSS简笔画logo系列:纯CSS绘制“Adidas” Logo

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道横线了。

结语

本节内容就到此结束了,大家应该或多或少都有些收获吧,关注我,学习更多前端知识,但不止于前端哦!

小伙伴们,有问题可以评论区留言哦,欢迎大家点评。

谢谢大家一直以来的支持!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css3实现ae动画冰激淋流动的遮罩效果

    See the Pen DcHup by Elton Mesquita (@eltonmesquita) on CodePen.1

    Javanx
  • CSS3 box-shadow实现背景动画

    box-shadow,向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略...

    Javanx
  • CSS简笔画:纯CSS绘制一艘邮轮

    这里用到了元素水平垂直居中的另外一种方式,让元素绝对定位,然后left/top=50%,然后margin-left/top=负元素宽度的一半,就可以居中了。

    Javanx
  • css画div对角线

    https://codepen.io/klren0312/full/zYqPVXZ

    治电小白菜
  • CSS常用单位

    CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单...

    WindrunnerMax
  • 2篇搞定CSS基础知识----第二篇

    padding-top(上内边距),padding-right(右内边距),padding-bottom(下内边距),padding-left(左内边距)

    Lemon黄
  • Vue 2.x折腾记 - (20) JSX在业务中的具体实践以及跟React书写的差异化

    Vue的jsx,能够支持部分vue独有的特性,比如拿到computed, 指令及自定义事件;

    CRPER
  • 弹幕和回到顶部前端web

    Dream城堡
  • 前端基础-CSS基础(七)

    efonfighting
  • 【开源游戏/跑酷】我就是我

    我就是我是一款非常有趣另类的敏捷类跑酷HTML5游戏,在游戏中吃到桃心可以加快奔跑的速度,另外掉坑里,你要快速的点击屏幕,可以飞起来,只要你够牛X,你可以永远不...

    用户5997198

扫码关注云+社区

领取腾讯云代金券