HOME

ABOUT

ARCHIVES

CONTACT

dribbble

Dribbble likeな表現

KEY SENTENCE

[1] 制作イメージ

[2] 実装結果

[3] コーディングサンプル

[1] 制作イメージ

今回はこのようなものを作りたいと思います。

dribbble

引用元:dribbble

恐れ多くも、かの有名なデザインコミュニティdribbbleのポラロイド風のグリッドレイアウトと見せ方ですね。マウスオーバーでタイトルやキャプションなどを表示させるというシンプルで使い勝手の良い、こちらを参考に自由に作っていきたいと思います。

[2] 実装結果

実際に実装してみました。イメージとは異なり、色々いじらせてもらいましたが、widthいっぱいに写真をあしらったグリッドレイアウトです。今回はアスペクト比を1:1にして、:hoverで背景画像の拡大、表面にカラーを入れて、title/linkにゅるっと出してみました。

商品一覧や制作事例などに使えそうな感じです。

[3] コーディングサンプル

実際にコーディングにしようした内容

中身が汚いので後日UPします。(笑)

取り急ぎ、こんなところでしょうか。