stCssUniform001

ＦＣバ○セロナ 2019/20シーズンのユニフォームをモチーフにCSSとアイコンフォントで表現

by STSHISHO

HTML

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<div class="preview">
  <span class="stack">
    <i class="fas fa-tshirt dropshadow"></i>
    <i class="fas fa-tshirt clip-others-barca-01 stack-chld text-clip"></i>
  </span>
  <span class="stack">
    <i class="fas fa-tshirt dropshadow"></i>
    <i class="fas fa-tshirt clip-others-barca-02 stack-chld text-clip"></i>
  </span>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #444;
  height: 100%;
  background-color: #fafafa;
}

.preview {
  padding: 10px 0;
  font-size: 25em;
  display: flex;
  justify-content: center;
}

.text-clip {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.stack {
  margin: 0 0.5rem;
  height: 1em;
  line-height: 1em;
  position: relative;
}

.stack-chld {
  position: absolute;
  top: 0;
  left: 0;
}

.dropshadow {
  text-shadow:
    rgba(6, 24, 44, 0.4) 0px 0px 0px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px;
}

.clip-others-barca-01 {
  background-color: #154284;
  background-image:
    linear-gradient(#154284 10%, transparent 10%),
    radial-gradient(ellipse at 50% 100%, transparent 50%, #154284 50%),
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d),
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d);
  background-position: 0, 50% 67%, 0.25em 0.1em, 0.1em 0.25em;
  background-size: 100%, 100% 175%, 0.3em 0.3em, 0.3em 0.3em;
}

.clip-others-barca-02 {
  background-color: #fdc52c;
  background-image:
    linear-gradient(63deg, #154284 25%, transparent 25%),
    linear-gradient(297deg, #cd122d 25%, transparent 25%),
    radial-gradient(ellipse at 50% 100%, transparent 50%, #fdc52c 50%),
    linear-gradient(52deg, transparent 44%, #cd122d 44%, #cd122d 50%, #154284 50%, #154284 56%, transparent 56%);
  background-position: left top, right top, 50% 67%, 0;
  background-size: 37% 50%, 37% 50%, 100% 175%, 100%;
  background-repeat: no-repeat;
}