HTML5&CSS3で書かれた高品質なテーマ １２選
HTML5とCSS3で書かれたテンプレートとテーマを紹介します。
Simple Style 7
とてもシンプルですね。Google Font APIでWEBフォントを利用しています。
:focusでsafariのハイライトが超ジャマじゃね？
知ってる人は知っている。知らない人はちょっと幸せになるCSS3のテクニックを紹介。
CSSで:focusを使用してフォームを作ったとき、safariではちょっとマズいことが起こります。
safariには自動的にハイライト機能が働いて、青いボーダーが表示されます。
こんな感じで…ちょっと残念な感じですね。
これを、ナントカします！(｀・ω・´)
画像を使わないでフォントをユニークに！
ユニークなフォントをWEBサイトに使いたい。WEBデザイナーさんならよくある事だと思います。
今までは、フォントサイトからダウンロードして、photoshopなどで画像化したものをWEBに上げていましたね。
これからはWEBフォントを利用するのが、一般的になるかもしれませんよ。
今回は、CSS初心者向けにWEBフォントを利用するためのデモ。
知ってる人は知っている、知らない人は知っててソンはないテクニックですw。
まるでPHOTOSHOPの様にグラデーションを作れるCSS ジェネレーター
これはマジで使える！Photoshopのようにグラデーションを作れるし、プリセットも秀逸。
タイムリーにプレビュー出来るので、視覚的にも分かりやすい。
できたグラデーションをCSS3のコードを取得して、自分のCSSファイルにコピーすればOK。
colorzilla Ultimate CSS Gradient Generator
対象ブラウザは、
- Firefox
- Safari
- Chrome (Webkit)
- Internet Explorer.
IEに対応しているのはうれしいですね。
CSS3が苦手な方は、マジ使っとけww。
CSS3をつかってアニメートするプログレスバーを作っちゃえば？
すっかり定着した感があるCSS3ですが、もうちょっとつっこんでjQueryのライブラリを利用して、アニメートするプログレスバーを作る方法をcatswhocode.comより紹介します。
まずはデモを。
HTML5のモバイルアプリフレームワーク”sencha”
senchaというHTML5とCSS3で書かれたモバイルアプリケーション用のフレームワークを見つけちゃったので紹介。
HTML5といっても、ターゲットはもちろんスマートフォン。AndoroidやiOS4(iphoneOSね)などのモバイルデバイスOSに合わせたフレームワークとなっているようで、モバイルアプリや、コンテンツ作りに重宝しそう。
当然、スマートフォン独自であるタップやスワイプのようなイベントも実装。まずはデモで確認してちょうだい。
ライセンスは、GPL 3.0 + FLOSS Licenseとなっていて、基本的にオープンソースライセンス。商用ではβ版なので商用ライセンスを持っていないと書いてあるけど、一応連絡した方がいいんじゃね？ベータ版だし。
名前がイイね！我々日本人には馴染みの言葉です。
CSS3のグラデーションをIE7.8でも使いたいからIEハックを書くんだ！
CSS3にはグラデーションというすばらしいプロパティがあるんですが、やっぱりIEはCSS3に対応していないのだな。
なので、CSS3のグラデーションをIE7や8にも適応させる為のIEハック。つぅか、IEってなに？頑なにCSS3を実装しない理由がわかんない。
Continue Reading »
IEでもCSS3を対応させたい時の対処法”ie-css3.htc”
以前にIEでも角丸と影をCSS3で表現したい！しかも簡単に！という記事を書きましたが、もうちょっとだけ簡単にするスクリプトがdesign-developさんにありましたので紹介。
たった１行追加するだけでOKの超簡単スクリプト。
角丸やシャドーなんかの、比較的良く使いそうな要素に対応しているんで、案件でIE6対応必須の時でも安心して使えそうですね。
