HTML
CSS

CSSでシンプルな南京錠のアイコンを作る

南京錠のアイコンを作る

HTMLで簡単なリモコンを作ろうと思いました
どんなリモコンかというとシンプルな鍵の開閉ができるもの

イメージとしてはこんな感じ

ZUGYUUUN!を使ったデモのご紹介【鍵開錠編】
https://archive.bunnyhop.jp/lab-20141202/

同じことをしたかったのですが、探してもいい感じに使いやすいのが見つからなかったので作ってみました。

使ったもの

  • CSS
  • HTML

実装イメージ

See the Pen RJXwdV by iwathi (@iwathi) on CodePen.

南京錠の形を表現する

CSS南京錠.png

ハンドル部分と南京錠の長方形部分を分割して作成していきます。

そのためHTMLのクラスも分けて作成しました。

<body>
  <div class="icon1">
    <div class="key_handle_open"></div>
    <div class="key key_open"></div>
  </div>
  <div class="icon2">
    <div class="key_handle_close"></div>
    <div class="key key_close"></div>
  </div>
</body>

南京錠のハンドル部分を作成する

  1. Uの逆のものを作る
  2. 左右で長さを変えるために先っぽだけ隠す

基本はwidthとheightとborder

.key_handle_close, .key_handle_open {
  width: 17px;
  height: 25px;
  border: 8px solid #333;
  border-bottom: none;
  -webkit-border-radius: 40px 40px 0 0;
  -moz-border-radius: 40px 40px 0 0;
  border-radius: 40px 40px 0 0;
  position: relative;
  left: 8px;
  top: 13px;
}

擬似要素の:beforeと:after

handle部分.png

beforeで先だけを白い正方形で隠して左と右で長さが違うようにしています。

.key_handle_close:before, .key_handle_open:before{
  content: '';
  background: #fff;
  width: 10px;
  height: 10px;
  position: absolute;
  top:15px;
  left: -10px;
}

南京錠のボディ部分(長方形部分)を作成

body部分.png

widthとheightで南京錠の長方形を作成します。

.key_body{
  display: block;
  position: relative;
  background: #2c2c2c;
  width: 50px;
  height: 42px;
  border-radius: 10px;
  transition: opacity 1s, border-radius 1s;
}
.key_body:after{
  content: '';
  position: absolute;
  background: #fff;
  width: 15px;
  height: 15px;
  border-radius: 10px;
  left: 18px;
  top: 8px;
}
.key_body:before{
  content: '';
  position: absolute;
  background: #fff;
  width: 5px;
  height: 20px;
  left: 23px;
  top: 14px;
}

南京錠の開閉

マウスがアイコンにのった際にボディ部分を上下に移動させることによって開閉を表現しています。

これはhoverで「マウスがアイコンの上にのったと検知」
transform: translate()で移動する
という風に行なっています。

.key_open:hover{
transform: translate(0px, -10px)
}
.key_close:hover{
transform: translate(0px, 10px)
}

まとめ

  • CSSを使ってシンプルなアイコンを作成
  • beforeとafterで細かい部分を作る
  • 部品を分けてtransformで開閉を表現