画像を使わないでフォントをユニークに！
ユニークなフォントをWEBサイトに使いたい。WEBデザイナーさんならよくある事だと思います。
今までは、フォントサイトからダウンロードして、photoshopなどで画像化したものをWEBに上げていましたね。
これからはWEBフォントを利用するのが、一般的になるかもしれませんよ。
今回は、CSS初心者向けにWEBフォントを利用するためのデモ。
知ってる人は知っている、知らない人は知っててソンはないテクニックですw。
"Web-Design"に関連する記事
Webデザインについてのアレコレ
まるで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対応必須の時でも安心して使えそうですね。
Flicker利用してギャラリーをページに埋め込むんだぁ
Flickerの画像をギャラリーとしてページに埋め込む方法を、CODROPSより紹介します。
デモでは、ページの下部にシンプルなフォトバーを表示させていて、スライドさせると次の画像が読み込まれるようになっています。
マークアップも細かく説明されていて、CSSの記述の勉強にもなりますね。
スライドするフォームでコンバージョン向上！なjQuery
よくコンバージョンなんて言葉を聞くと思いますが、コンバージョンとは簡単に言うと目標設定のこと。
ECサイトのような商用サイトでは、会員登録や商品購入完了とかの目標のことですが、このコンバージョン率を上げる施策がサイト運営の要といってもいいかもしんない。
そんなコンバージョン率を上げることが出来るかもしれないjQueryライブラリを紹介です。
Continue Reading »