Posted at

Twitterのユーザーカードのアバター表示を再現したい

More than 1 year has passed since last update.


Twitterの丸い縁取りアバターかっこいい

Twitterではフォロワーの一覧なんかを見ると、以下のデザインでカードが作られています。

このカードのヘッダー画像とボディの部分にまたがる形でアバターが表示されてるのがクールなので自分でも試してみました。


position: absoluteを使う

position: absoluteで自分のアバター画像を親の要素であるカードの位置から指定することができます。

アバター画像をposition: absoluteでまず指定して、そこに一回り大きい白円を裏に作ってやることでアバター画像の縁取りを再現しました。

See the Pen Twitter Like Profile Card by Takahiro Ito (@takahiroyte) on CodePen.

思っていたよりすんなりできました。positionをうまく使うことで、画一的なデザインから少し発展させたデザインへ近づけそうです。