デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2

デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー