読者です 読者をやめる 読者になる 読者になる

納豆、Web、雑記など

CSSでツムツム風の縫い目付きボタンを作ってみた

Web HTML・CSS
f:id:tomotan_uki:20160714092005j:plain

今回はCSSの話です。

みなさんは「ツムツム」というゲームをご存知ですか?

ツムツムとはツムツムと呼ばれるぬいぐるみをつないで消していくパズルゲームなんですが

そのゲームはぬいぐるみを基調としているため、ボタンなどゲーム画面がフェルトを縫い付けたようなデザインなんです。

そのデザインをCSSで作ってみるというのが、今回の記事です。

というのも、私自身がborderのdashedが私はけっこう好きで、それを活かせないかなと思っていたのです。

そんなときに、たまたまこのゲームをしていて、その時に思いついた、という話なんです。

では、とりあえず出来上がったものをご紹介します。

シンプルなデザイン

まずは簡単にシンプルなデザインのものを作りました。

サンプル

今のサイトデザインはフラットデザインが多いので、こういった感じの方が合いそうです。

CSSはこちらです。

.stitch-button-o {
  background: #ffaa00;
  border: 1px #ffff00 dashed;
  border-radius: 2.5em;
  box-shadow: 0 0 0 4px #ffaa00;
  color: #aa4400;
  display: inline-block;
  height: 2.5em;
  line-height: 2.5;
  margin: 4px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 10em;
}

borderdashedが縫い目のようにも見えるので、それを使っい、その周りをbox-shadowで被い、外側を補っています。

色や形を変えたら、いろんなデザインのものが作れます。

いくつか作ったので、それらもご紹介します。

四角形

サンプル

四角形です。四隅は少しだけ丸くしています。

.stitch-button-r {
  background: #ff3333;
  border: 1px #ffaaaa dashed;
  border-radius: 0.5em;
  box-shadow: 0 0 0 4px #ff3333;
  color: #880000;
  display: inline-block;
  height: 2.5em;
  line-height: 2.5;
  margin: 4px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 10em;
}

楕円

サンプル

楕円です。縦横の長さを同じにすると円になります。

.stitch-button-g {
  background: #33ff33;
  border: 1px #009900 dashed;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #33ff33;
  color: #006600;
  display: inline-block;
  height: 3em;
  line-height: 3;
  margin: 4px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 10em;
}

半円

サンプル

半円です。こちらは下半円ですがborder-radiusの数値を変えると上半円などもできます。

.stitch-button-b {
  background: #00aaff;
  border: 1px #0000ff dashed;
  border-radius: 5% 5% 3.5em 3.5em;
  box-shadow: 0 0 0 4px #00aaff;
  color: #0000aa;
  display: inline-block;
  height: 3.5em;
  line-height: 3;
  margin: 4px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 7em;
}

オリジナル

サンプル

border-radiusをいろいろ変えて、こんな形を作ってみました。

.stitch-button-br {
  background: #993300;
  border: 1px #ffffff dashed;
  border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
  box-shadow: 0 0 0 4px #993300;
  color: #331100;
  display: inline-block;
  height: 3em;
  line-height: 3.1;
  margin: 4px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 8em;
}

全てのデザインにはmarginが4pxほど設定されています。これはbox-shadowが影故に高さや横幅には含まれないため、デザインがずれる可能性を避けるためです。

影付き

また、これらに影を付けたい場合は、こちらです。

サンプル
.stitch-button-osh {
  background: #ffaa00;
  border: 1px #ffff00 dashed;
  border-radius: 2.5em;
  box-shadow: 0 0 0 4px #ffaa00,
              0 1px 3px 4px rgba(0,0,0,0.8);
  color: #993300;
  display: inline-block;
  height: 2.5em;
  line-height: 2.5;
  margin: 4px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 10em;
}

box-shadowは複数指定できるので、それを利用して設定します。ただし、先に設定したbox-shadow外側の縁で使用していますので、影を付ける場合は、その外側の縁の分を余分に「広がり」を設定しておいてください。

box-shadowで「広がり」の値を揃える所

より凝ったデザイン

前述のもはシンプルなデザインですが、ツムツム風とは程遠いです。これらに更に陰影の濃淡を装飾していって、いい感じに仕上げていきたいと思います。

できたものが、こちらです。

サンプル

box-shadowで表していた外側をborderに直し、:before :afterの擬似要素を使ってborder:dashedや陰影を施しました。

.felt-button-o {
  background: #ffaa00;
  border: 3px #ffcc00 solid;
  border-radius: calc( 2.5em + 4px);
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
  color: #993300;
  height: calc( 2.5em + 4px);
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #ffdd00;
  vertical-align: middle;
  width: calc( 10em + 4px);
}

.felt-button-o:before {
  border-radius: calc( 2.5em + 10px);
  box-shadow: 0 0 2px #ff9900 inset;
  content: "";
  height: calc( 2.5em + 10px);
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc( 10em + 10px);
}

.felt-button-o:after {
  border: 1px #ffee00 dashed;
  border-radius: 2.5em;
  box-shadow: 0 0 2px 1px #ff9900,
              0 2px 1px #ff9900 inset,
              0 -4px 4px #ff9900 inset;
  content: "";
  height: 2.5em;
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10em;
}

より質感を出すためにtext-shadowも設定しています。文字がいらない場合は不要ですが。

このような感じで、前述のデザイン全部にも施してみました。

四角形

サンプル
.felt-button-r {
  background: #ff3333;
  border: 3px #ff5555 solid;
  border-radius: calc( 0.5em + 4px);
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
  color: #880000;
  display: table-cell;
  height: calc( 2.5em + 4px);
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #ff7777;
  vertical-align: middle;
  width: calc( 10em + 4px);
}

.felt-button-r:before {
  border-radius: calc( 0.5em + 10px);
  box-shadow: 0 0 2px #dd3333 inset;
  content: "";
  height: calc( 2.5em + 10px);
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc( 10em + 10px);
}

.felt-button-r:after {
  border: 1px #ffaaaa dashed;
  border-radius: 0.5em;
  box-shadow: 0 0 2px 1px #dd3333,
              0 2px 1px #dd3333 inset,
              0 -4px 4px #dd3333 inset;
  content: "";
  height: 2.5em;
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10em;
}

楕円

サンプル
.felt-button-g {
  background: #33ff33;
  border: 3px #55ff55 solid;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
  color: #006600;
  display: table-cell;
  height: calc( 3em + 4px);
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #77ff77;
  vertical-align: middle;
  width: calc( 10em + 4px);
}

.felt-button-g:before {
  border-radius: 50%;
  box-shadow: 0 0 2px #00cc00 inset;
  content: "";
  height: calc( 3em + 10px);
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc( 10em + 10px);
}

.felt-button-g:after {
  border: 1px #009900 dashed;
  border-radius: 50%;
  box-shadow: 0 0 2px 1px #00cc00,
              0 2px 1px #00cc00 inset,
              0 -4px 4px #00cc00 inset;
  content: "";
  height: 3em;
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10em;
}

半円

サンプル
.felt-button-b {
  background: #00aaff;
  border: 3px #00ccff solid;
  border-radius: 5% 5% calc( 3.5em + 4px) calc( 3.5em + 4px);
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
  color: #0000aa;
  display: table-cell;
  height: calc( 3.5em + 4px);
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #00ddff;
  vertical-align: middle;
  width: calc( 7em + 4px);
}

.felt-button-b:before {
  border-radius: 5% 5% calc( 3.5em + 10px) calc( 3.5em + 10px);
  box-shadow: 0 0 2px #0088ff inset;
  content: "";
  height: calc( 3.5em + 10px);
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc( 7em + 10px);
}

.felt-button-b:after {
  border: 1px #0000ff dashed;
  border-radius: 5% 5% 3.5em 3.5em;
  box-shadow: 0 0 2px 1px #0088ff,
              0 2px 1px #0088ff inset,
              0 -4px 4px #0088ff inset;
  content: "";
  height: 3.5em;
  position: absolute;
  left: 1px;
  top: 1px;
  width: 7em;
}

オリジナル

サンプル
.felt-button-br {
  background: #993300;
  border: 3px #bb5522 solid;
  border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
  color: #331100;
  display: table-cell;
  height: calc( 3em + 4px);
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #cc9933;
  vertical-align: middle;
  width: calc( 8em + 4px);
}

.felt-button-br:before {
  border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
  box-shadow: 0 0 2px #772200 inset;
  content: "";
  height: calc( 3em + 10px);
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc( 8em + 10px);
}

.felt-button-br:after {
  border: 1px #ffffff dashed;
  border-radius: 20% 80% 80% 20%/ 30% 60% 40% 70%;
  box-shadow: 0 0 2px 1px #772200,
              0 2px 1px #772200 inset,
              0 -4px 4px #772200 inset;
  content: "";
  height: 3em;
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8em;
}

どのように使うか

これらをどのように使うかといえば、はてなブログで言えば「プロフィール」といったサイドバーの見出しとかです。

プロフィール

シンプルなデザインで作ってみました。

.hatena-module-title {
background: #ffaa00;
border: 1px #ffff00 dashed;
border-radius: 2.5em;
box-shadow: 0 0 0 4px #ffaa00;
color: #993300;
height: 2.5em;
line-height: 2.5;
margin: 4px;
padding: 0;
text-align: center;
text-decoration: none;
width: 10em;
}

もちろん記事本文の見出しにも使えます。

このプロフィールの見出しはdiv要素なので、display: inline-block;などは記述していません。これらはケースバイケースで変えたり消したりしていただけたら、よいかと思います。

また使えるところとしては、「続きを読む」やナビゲーションのボタンなど、実際にボタンとしても使えます。

下のサンプルは凝ったデザインで作られており、しかも、よりツムツム風に近づけるために、マウスを乗っけたり押したりすると拡大縮小するように設定しています。

どこかにリンクで飛ぶような設定はしていませんので、ぷにぷに押して遊んでみて下さい。

続きを読む
.entry-see-more {
  background: #ffaa00;
  border: 3px #ffcc00 solid;
  border-radius: calc( 2.5em + 4px);
  box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5);
  color: #993300;
  display: table-cell;
  height: calc( 2.5em + 4px);
  line-height: calc( 2.5em + 4px);
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #ffdd00;
  transition: all 0.1s ease;
  vertical-align: middle;
  width: calc( 10em + 4px);
}

.entry-see-more:before {
  border-radius: calc( 2.5em + 10px);
  box-shadow: 0 0 2px #ff9900 inset;
  content: "";
  height: calc( 2.5em + 10px);
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc( 10em + 10px);
}

.entry-see-more:after {
  border: 1px #ffee00 dashed;
  border-radius: 2.5em;
  box-shadow: 0 0 2px 1px #ff9900,
              0 2px 1px #ff9900 inset,
              0 -4px 4px #ff9900 inset;
  content: "";
  height: 2.5em;
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10em;
}

.entry-see-more:hover {
  text-decoration: none;
  transform: scale( 1.1, 1.1)
}

.entry-see-more:active {
  text-decoration: none;
  transform: scale( 0.9, 0.9)
}

こんな感じですが、ブログのカスタマイズでどこかに使えたらいいかもと思い作ってみました。

ご参考になれば幸いです。

【追記:1】positiondisplayあたりを最適化したため、CSSが以前のものから若干変更しています。デザイン的なCSSは変わりはないですが、コードが若干変更していることを、こちらにてお詫び申し上げます。

【追記:2】Firefoxでline-heightの値でcalc()を更新時点では認識しないのを確認しました。ですので、これらを使わなくてもテキストが中央表示できるように、凝ったデザインのほうのCSSをdisplay:table-cell;vertical-align:middle;でテキストを中央表示するように変更しました。

TOP