【Stylebot】Amazonのいたるところを角丸フローティングデザインにするCSS
Amazon のいたるところのデザインを角丸のフローティングデザインにするCSS です。コンテンツの四隅をカクカクデザインから角丸にして、右下に影を表示させています。
マウスを乗せた時に沈むようにして、あたかも浮いているものを押し込んだように見せています。
Windows11 では角丸＋影付きのまるで浮いているかのようなデザイン「フローティング」デザインが多く見られます。最近のモダンなデザインといえば、ほとんどフローティングですよね。
そこで、Amazon も同じようにフローティングにしてみようと思いたったわけです。
といっても僕はCSS 初心者＋デザイン力皆無の人間なので、不細工かもしれない点ご了承ください。
前提
この記事は、既にStylebot をインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSS を適用できるChrome拡張機能です。
まだインストールしていない方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/CSS
書き込むコードは以下になっています。
/*Amazonをフローティング化*/
.gw-card-layout .a-cardui {
box-shadow: 10px 10px 3px #c8c8c8;
transition: 0.3s;
border-radius: 15px;
}
/*Amazonをフローティング化：ホバー時*/
.gw-card-layout .a-cardui:hover {
box-shadow: 2px 7px 3px #c8c8c8;
transform: translateY(10px);
border: 1px solid #dc143c;
}| CSS | 意味 |
|---|---|
| transition: 0.3s; | アニメーションの設定 |
| box-shadow: 2px 7px 3px #c8c8c8; | 影の設定 |
| transform: translateY(10px); | 動きの設定 |
| border: 1px solid #dc143c; | 枠線の設定 |
黄色ハイライトの部分を自分好みに調整できます。
例えば、枠線を太くしたい場合は、「border: 1px solid #dc143c;」の「1px」の数字を大きくします。5pxにしたらマウスを乗せた時により太い枠線が表示されます。
「#dc143c」は赤っぽい色を指しています。「#1e73be」にすると青っぽい色にできます。色はHTMLカラーコードで指定しましょう。
画像のようになればOKです。
CSS を貼り付けたら、瞬時にAmazon のコンテンツがそれぞれ角丸になって影が付きます。
マウスを乗せるとデザインがへこんで影も移動します。分かりやすいように赤い枠線も付け足しました。
【余談】検索ボックス周り全て角丸化
検索ボックスを含むAmazon の至るところ全てを角丸化するCSS です。
/*プライムビデオのサムネイル角丸*/
div {
border-radius: 15px;
}下記画像のように、検索ボックス周辺の枠が全て角丸になります。
「15px」の部分を変更することで角丸具合を調整できます。好みに応じて、10pxとか20pxとかにしてみましょう。
「div」が付与されているコンテンツ全てを角丸にするようにしているので、僕自身どこのデザインが角丸になっているか分かりません。思わぬところに影響がでているかもしれません。
Stylebot はいつでもオンオフ切り替えれるので、思わぬところが角丸になっていた場合はオフにしましょう。
現時点で確認できたのは、検索ボックス周りとランキングの順位、サイドバー等です。角丸にするだけなので、そこまでのデザイン崩れは起こってない…と信じたいです。
ちなみに上記CSS を使う場合は、最初に紹介した「Amazonをフローティング化」にある「border-radius: 15px;」は不要です。
まとめ
以上、Amazon の色々な部分を角丸＋影付きにするCSS についてでした。
フローティングめちゃくちゃ好きです。
ちなみに同じ要領でプライムビデオのコンテンツもフローティング化できます。アニメーションや余白にこだわるとすげースタイリッシュなデザインが完成するかもです。
