タグ : CSS

HTML5 全国統一実力テスト

「HTML5 全国統一実力テスト」
というものがありました。

HTML5 全国統一実力テスト

HTML5、JavaScriptの実力を試すのにどうでしょう?

HTML/CSSコースとJavaScriptコースが用意されている。
HTML/CSSコースは全16問、JavaScriptコースは全21問。
試験問題はカヤック、監修はピクセルグリッド。

ブラウザ上でコーディング共有ができるサービスを行っているjs do.it
Google chromeとWindowsIE9がスペシャルサポートとして参加している。

HTML5 全国統一実力テスト
http://jsdo.it/event/html5cat/2011/summer/

CSS3で作成するボタンテクニック

最近CSS3のボタンばかり紹介していますが、いろいろいじってて楽しくなってきてまして・・・
またまたCSS3のメニューボタンの作り方をご紹介させていただきます。

CSS3で作成するボタンテクニック

jQuery style menu with CSS3
css3 botton jQuery style

How To Create Depth And Nice 3D Ribbons Only Using CSS3
3D CSS Ribbon

CSS3アニメーションボタン「Radioactive Buttons」

Radioactive Buttons
css3-animation

CSS3でアニメーションを使ったボタン。
Webkitブラウザ(Safari、Google chromeなど)でみると、ぼわ~っと光ってきます。
FireFox3.6やIE8では、このボタンの効果は表現されません。

作り方は以下ZURBのPlaygroudの通り。

@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}
  a.green.button {
   -webkit-animation-name: greenPulse;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
  }

CSS3メニューボタン「CSS Menu Maker」

css3 ボタン

CSS3のメニューボタンを簡単に作成してくれるソフトウェア「CSS Menu Maker」
これがあれば、簡単にボタンを出力してくれます。
フリーウェアです。
CSS3のみでボタンが作られるので、SEO的にも良い。
サポートブラウザは、FireFox、Chrome、Safari、Opera、IE(IE6は除く)に対応。
対応OSは、WindowsとMac。

CSS3 Menu. Free CSS Menu Maker

便利です。

カワイイCSS3のボタン

CSS3 BonBon Sweet
BonBon Sweet CSS3 Buttons

カワイイCSS3のボタン。
CSS3のみを駆使してこのようなボタンを作っています。
ダウンロードして、いろいろ数値などを変更してみると立体感や形、光沢の具合が変わります。
CSS3のみでボタンが作られているのでSEOにも優しいです。
ブラウザごとに少し見た目が変わります。
ちょっと勉強で試してみるのもいいかもしてません。

私もHTML5やCSS3に全然ついていけていないので、勉強中です。
もっと早く勉強しておけばよかったぁ

WordPressとCSSデザインショーケース(リンク集)

参考になるサイトが数多く掲載されています。

CSSのデザインショーケース

CSS Mania
css mania

CSS REMIX
css remix


WordPressデザインショーケース

WPGlobe
WPGlobe