つみきロゴをCSS3で書いてみた

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

今回は CSS で弊社ロゴを再現してみます。

デモ

完成形は以下になります。

リポジトリ

公開しています。

https://github.com/tsumikiinc/css-tsumiki-logo

サポートブラウザ

  • モダンブラウザ
  • IE10 以上

マークアップ

HTML は div 要素 2 つと包含ブロック 1 つです。

<div class="tsumiki-logo">
  <div class="cube cube-first"></div>
  <div class="cube cube-second"></div>
</div>

CSS

.tsumiki-logo 包含ブロックは全体のラッピングと、 中心部左右の赤い箇所を擬似要素 2 つで成しています。

.tsumiki-logo {
  /* リセット */
  margin: 0;
  padding: 0;
  border: none;
  font-size: 10px;
  outline: none;

  margin-top: 64px;
  margin-left: 64px;
  width: 128px;
  height: 128px;
  position: relative;
  z-index: 1;
  -webkit-transform: scaleX(1) scaleY(0.5) rotate(45deg);
  -ms-transform: scaleX(1) scaleY(0.5) rotate(45deg);
  transform: scaleX(1) scaleY(0.5) rotate(45deg);
}

.tsumiki-logo:before,
.tsumiki-logo:after {
  content: "";
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  z-index: 1;
}

.tsumiki-logo:before {
  bottom: 0;
  left: 0;
  background: #dd6664;
}

.tsumiki-logo:after {
  top: 0;
  right: 0;
  background: #dc5d54;
}

.cube-first.cube-second で上下部分を成しています。

.cube {
  /* リセット */
  margin: 0;
  padding: 0;
  border: none;
  font-size: 10px;
  outline: none;

  width: 128px;
  height: 128px;
  position: relative;
}

.cube:before,
.cube:after {
  content: "";
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
}

.cube:before {
  top: 0;
  left: 0;
}

.cube:after {
  top: 64px;
  left: 64px;
}

.cube-first {
  background: linear-gradient(to right, #78beb2 0, #78beb2 64px, #5ab5b0 64px, #5ab5b0 64px);
  top: -64px;
  left: -64px;
  z-index: 1;
}

.cube-first:before {
  background: #23aaa4;
}

.cube-first:after {
  background: #686f89;
}

.cube-second {
  background: linear-gradient(to right, #e9a21f 0, #e9a21f 64px, #e78e21 64px, #e78e21 64px);
  top: -64px;
  left: 64px;
  z-index: 1;
}

.cube-second:before {
  background: #d94142;
}

.cube-second:after {
  background: #edb51c;
}

ポイントとしては、 1 つの .cube で 4 色を表す (左右で対を成す、グリーン、レッド、オレンジは微妙に違う色です)ため、 background: linear-gradient(); を使用します。

.cube-first {
  background: linear-gradient(to right, #78beb2 0, #78beb2 64px, #5ab5b0 64px, #5ab5b0 64px);
}

to right, でグラデーションの方向を指定し、

#78beb2 0, #78beb2 64px, #5ab5b0 64px, #5ab5b0 64px

のように、最初の色の終了点、次の色の開始点を同じにすることで、 指定点で分かれる色の指定ができます。


実際にはメタ言語の Stylus を使用し作成しました。

サイズや色を変数で持っておけるので便利です。

https://github.com/tsumikiinc/css-tsumiki-logo/blob/gh-pages/src/tsumiki-logo.styl

Sass 版もあります。

https://github.com/tsumikiinc/css-tsumiki-logo/blob/gh-pages/src/tsumiki-logo.scss

まとめ

div の数を気にしないのであれば、 linear-gradient を使用せず再現できるので、 IE9 の対応も可能かと思います。

リソース削減のため、CSS で再現できるものはなるべく画像を使用せずに再現したいですね。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ