CSS3 × 西武鉄道スマイルトレイン

 Webページの見栄えを良くするCSS(Cascading Style Sheets) その最新版CSS3にはかなりすごい機能が含まれています。そこで今回はCSS3の中でも2つの機能について、サーベラスで話題の西武鉄道を題材にご紹介しましょう。

丸い図形もグラデーションも

 まずは、これを見てください。
20130426-232059.jpg
 ただの四角ではなく角が丸まっており、青と緑のグラデーションが美しい図形となっています。この図形は画像になっていますが実際はCSS3のみ=(テキストのみ)で作成されています。サンプルページではCSS3のみで作成された図形をみる事ができるのでモダンブラウザ・スマートフォンからご覧ください。角が丸くなっている部分は「border-radius」、青と緑のグラデーションは「linear-gradient()」を使用しています。これがどうして西武鉄道に関係しているのか?西武鉄道に乗ったことがある方なら分かるはずです。そう、西武鉄道の最新型車両30000系のデザインをCSS3だけで表現しているのです。
20130426-232557.jpg
車体側面のグラデーションもこの通り表現できます。
20130426-232146.jpg
(実物サンプルページへ))
 鉄道車両の塗装にグラデーションを使用するという事で開発部が車両部に反対されたという話もあります。しかし、新型車両30000系は西武鉄道の新しい顔となりました。現在のコーポレートカラーをまとっているのは30000系だけです。30000系はデザインも可愛らしく、車内環境も良いのですが、ただ一つドアの開閉音がうるさすぎるのが欠点です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>