『Cocoon』CSSを使ってユーザービリティーをあげる方法

我こそは、影をすべるものChaos(ry
ごめんなさいめっちゃはずかしい(〃ω〃)

まいどおおきに!普通のおおもと(@so88qa)です!

今回の記事は、SANGOにも使われている『マテリアルデザイン』に必要な影を作るCSSを紹介します。

ママのアイコン画像ママ

押してほしいとこをが直感的にわかるデザインだよね

おおもとのアイコン画像おおもと

影を使って浮き出ているように見せてユーザーアビリティーをあげているんだよ

影をつけて「ボタンがまるで浮き出ている」ようなデザインを作りたい人は必見です!

もくじ

影を使ったデザインの例

当ブログで採用している影を使ったデザインを紹介します。

エントリーカード
ブログカード
SNSボタン
むすめのアイコン画像むすめ

3つとも、少し影の付け方が違うね

おおもとのアイコン画像おおもと

影の付け方で全く違ってみえるから面白いでしょ

どのデザインも、影を使って立体的に見せることでユーザーに「そこはクリックできるよ」と促しています。

影をつけるカスタマイズ

影をつけるためには、「box-shadow」というプロパティーを使います。

注意点としては、「rgba」をつかって透明度を出すことカラーコードを使わないことに注意してください。

おおもとのアイコン画像おおもと

rgbaは関連記事を読んでね

それでは、ぼくが実際に使っているカスタマイズを紹介します。

エントリーカードに影と動きをつける

/*エントリーカード変更*/
.a-wrap {
background-color:#fff;
border:solid 1px rgba(0,0,0,0.17);/*黒の薄い枠線を入れる*/
border-radius: 7px;
box-shadow:0px 0px 5px rgba(0,0,0,0.25);/*影をカードの周りにつける*/
}

.a-wrap:hover {
color:#56a7a7;
}

.a-wrap:hover .card-thumb img{
transform: scale(1.05);
transition: all 0.6s ease;
}

.card-thumb {
line-height: 0;
margin-right: 1rem;
overflow: hidden;
}

.cat-label {
line-height: 1.5em;
border-radius:2px;
background-color:#f8acac;
color:#555;
}

カード類全てに影をつけるCSSと、エントリーカードのアイキャッチに動きをつけるCSSです。

SNSボタンに影をつける

/*SNS*/
.twitter-button,.facebook-button,.hatebu-button,.google-plus-button, .pocket-button, .line-button,.feedly-button,.rss-button{
box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

SNS系のボタンに全て影をつけるCSSです。

ユーザービリティーをあげる方法のまとめ

今回の記事は、SANGOにも使われている『マテリアルデザイン』に必要な影を作るCSSを紹介しました!

ママのアイコン画像ママ

押してほしいところを教えてくれたほうが親切だよね

Googleも推奨しているマテリアルデザインを採用してユーザーアビリティーをあげましょう!

この記事をシェアする

クリックして応援♪

このブログはSWELLで出来ています!

SWELLレビュー
  • 簡単におしゃれな文章が作れる
  • マウスだけで簡単におしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載
当ブログもSWELLで出来ています!
気になる人は公式サイトを覗いて見てくださいね♪

コメントを書いて応援♪

コメントする

CAPTCHA

もくじ
閉じる