2014年のWebデザインのトレンドがたくさん詰まったHTML5+CSS3の無料のテンプレート -Beetle
Post on:2014年12月15日
レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。
そのまま使うもよし、スキルアップ用に勉強してもよし、です!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121503.png)
Beetle - Responsive HTML5 Template
Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクトが用意されています。大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、今年のWebデザインのトレンドがたくさん詰まっています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121505.png)
テンプレートの一部
右端の縦長ページは、オンラインデモが公開されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121504.png)
例えば、ヘッダ部分のスライダーも一味違ったアニメーションが採用されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121506.gif)
デモページのスライダー
スライドやフェードなどはよく見かけますが、ここで使用されているのはズームインとクロスフェードを組み合わせたもの。上のアニメーションgifで見るだけでなく実際に体感して楽しんでみてください。
ダウンロードできるテンプレートでは、使いやすいよう画像などはダミーのものになっています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121508.png)
ダウンロードできるテンプレート
テンプレートには縦長ページ、ランディングページ、ポートフォリオ、ギャラリー、ブログ、コンタクト、検索、Not Foundページなど、さまざまなものが含まれています。
![テンプレートの一覧](http://coliss.com/wp-content/uploads-201404/2014121509.png)
テンプレートの一覧
「Documentation」には、実装方法についての詳しい解説があります。
右サイドは、コンポーネントの一覧。
![Documentationのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121510.png)
ヘッダのバリエーションと実装方法
デザイン用のPSD素材も用意されており、ダウンロードファイルにはモックアップ用の各デバイスのPSDが含まれています。またポートフォリオでよく使うレジュームのさまざまなコンポーネントのPSDも別途ダウンロードできます。
![PSD素材のキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121507.png)
PSD素材
スキル一覧、履歴一覧など、そのままでもカスタマイズしてもOK!
sponsors