他にテキスト部分と表面が浮いてるようにshadowで影をつけてみました。
before,afterの疑似要素を使い影の部分のボックスを作って立体的にしています。
IEにはまだ反映されないみたいですが、他のブラウザにはグラディーションで表示されています。
ブラウザの表示の差はこんな感じです。
Google cromeやFirefoxなど(リボン部分中央がほんのり明るくなってます)
IE(リボン部分のグラディーションとテキストの影が反映されてません)
IEでご覧の方は1度違うブラウザでご覧になると、結構、雰囲気が変わるので試してみてください。
只今、マッタリですが、このリボン風見出しなどを使ったテンプレートを作成しています。φ(・_・= ・_・)ノ ⌒(ミス)ポイッ
作成できましたら、アメブロテンプレート無料で配布したいと思いますので、期待してる人は期待して待ってて下さい( ´艸`)イルノカナw