Card Design Beautiful Sites
Card Design 参考サイト
Dribbble-Redesign
icon, title,
img
attach-icon, view-icon, reply-icon, like-icon,
を薄い灰色の上に僅かな丸みで並べている．
beaumont
馬鹿でかい画像(773px? 467px?) と左下の小さなタイトルのインパクト．
iPhone Xでは330pxになる．
dribbble-profile
白に近い背景，カードの下に立体的な影，僅かな余白に全画面の画像，
hoverしたとき？に薄黒の透過背景に左揃えのタイトル．
BBC NEWS
40%? 上半分の画像，
太字でのタイトル，
説明文，
時計アイコン， 場所のタグ
ApexLegends, スマフォゲー？
左上が欠けている
右側半分に人間の立ち姿
左一番上に名前
次にスコア5つ
左下にアイコン3つ
Hozumi System
シンプルなカードでの業務内容紹介
title, img, desc,
R1 - Day 2️⃣ #100DaysOfCode 👨💻👨💻
— Kushal Dave (@ikushaldave) June 26, 2020
- Started Working with Flexbox
- Created Some Layout using Flexbox
- Need Some Practice more going to do tomorrow too#HTML5 #CSS #developers #coding #AltCampus #DEVCommunity #webdevelopment #CodeNewbies #javascript pic.twitter.com/dnEHswoQV5
サイドカードが綺麗な1kdaysofcodeの作品
位置をstateにするならuseEffectしっかりかく必要がある
iPad Cards
It's been a while! Let's do a new UI design livestream on how to design for iOS 14, iPadOS and Big Sur https://t.co/zIaIT8xadD pic.twitter.com/dDQhN9eb3T
— Meng To (@MengTo) June 26, 2020
グラデ角丸 彩度が高い
背景と色が近いカード、影があって画質がよい画像
添付みたいなグラデ背景をつくるときによくやる方法は、風景写真を原形わからないぐらい思い切りぼかして、そのあと細かく色調整していく。写真なので機械的じゃなくて、色のムラもいい風合いになる🤞 pic.twitter.com/MSAtPo4K2s
— 神様 (@kamisama1220) July 9, 2020
