CSSでiMessageのUIを再現

iMessage の UI といえば、相手の発言の吹き出し部分の背景色にグラデーションがかけられているのが特徴です。

これを CSS で実装する方法を解説します。

その前にベースとして、ブラウザ間の差異をなくすために、modern-normalize というリセット CSS を使っています。

<link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.6.0/modern-normalize.min.css" rel="stylesheet">

CDN から簡単に読み込めます。