on:2011年8月25日sponsorsHTMLはclassを一つ追加するだけで、リボンを折り返したスタイルを適用するチュートリアルを紹介します。Minutesデモページ[ad#ad-2]リボンの実装HTMLHTMLは非常にシンプルです。h1要素にclassを付与するだけです。effect.</h1>Webフォントの設定フォントも美しく表示されるように、Webフォントを利用します。Fontの「Montez」を使用します。CSSまずは、背景などのスタイルシートです。0;}次にリボンのベースを作成します。}下記のように表示されます。リボンに折り目を加えます。折り返す箇所を「:after」で作成します。}作成した台形は下記のように回転して使用します。右下のポイントを中心に90度回転させます。}回転すると、下記のようになります。このままでは平面的なので、次元を与えるために:beforeを使ってシャドウをいれます。}シャドウがこのままだと濃いため、不透明度を調整します。transparent;同様に、.ribbonにもシャドウを加えます。}シャドウをソフトにしました。ディテールをよりアップするためにハイライトを加えます。}:afterにも加えます。}ハイライトを加えると、下記のようになります。最後の仕上げに、折り返した箇所が鋭角なので滑らかにします。5px;[ad#ad-2]最終的なスタイルシートは下記のようになります。:afterを使用しているので対応ブラウザは下記の通りです。Posts関連記事が見つかりませんでした。