[CSS]一枚の画像だけでスタイリッシュなプログレスバーを実装するスタイルシート
Post on:2009年6月23日
一枚の画像だけでスタイリッシュなデザインのプログレスバーを実装するスタイルシートをBen Ogleから紹介します。
![デモのキャプチャ](/wp-content/uploads-2009/2009062302.png)
Simple CSS shiny progress bar technique
画像は、下記のようなグラデーションのある角丸の透過PNGを使用します。
![使用画像のキャプチャ](/wp-content/uploads-2009/2009062303.png)
プログレスバーの色は透過PNGを使用しているので、スタイルシートで簡単に変更できます。
HTML箇所は、divが3つ入れ子で実装されています。
また、JavaScript(jQuery)を使用して、バーが0%から100%になったり、カラーを少しずつ変更させるデモもあります。
![デモのキャプチャ](/wp-content/uploads-2009/2009062304.png)
sponsors