SHEET K-49-U01
UIの
ガラスのボタン
背景が
01動く
見て、動かして 確かめる。
押してみてください。
-
元の
見た 灰色の目 地に 点の 格子 -
写真の
上 後ろの写真が、 板越しににじむ -
色の
上 自社の色に なじませる
Petr Knoll
許諾文(MIT)を見る
MIT License Copyright (c) Petr Knoll (https://codepen.io/Petr-Knoll/pen/QwWLZdx) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
02この
押した手応えが、 指 に返る。
押した
手応えが ある 押すと
ボタンが 奥へ 傾き、 影が 縮み、 縁の 光が 回る。 画面の 上でも 「押し込んだ」 感触が 返るので、 押せたかどうか 迷わない。 触れる
前から、 押せると 分かる マウスを
重ねると、 表面の 反射が すっと 流れて 少し 沈む。 飾りの 文字ではなく、 押せる 部品だと 自然に 伝わる。 背景を
選ばない 板が
透けて、 後ろの 色や 写真がに じんで 見える。 写真の 上にも、 色の 上にも、 なじんだまま 置ける。 画像を
使わず、 軽い CSS だけで
描くので、 文字を 差し替えても、 大きさを 変えても 崩れない。 画像を 作り直す 手間も、 読み込みの 重さも ない。
03向いている
こんな場面に 向いて います。
- 申し込み・
お問い合わせなど、 いちばん押してほしい ボタン - 写真や
映像の 上に 置く ボタン - 1画面に
1つだけの、 大事な 操作 - 落ち着いた
色の サイトに、 上質さを 足したい とき
