cakephp/wordpress/flash/flex/iPhone/mixiアプリの開発しています。
CSSで手軽にボタンを作る方法を探している。
そんな方におすすめなのが、「CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)」。
ボタンを作るCSSフレームワークが10点紹介されています。
エントリーの中から気になったのを、いくつかご紹介。
非常にシンプルなボタン。18種類あり。
以前に紹介しましたが、Github風のボタンを作れるCSSフレームワーク。
四角、角丸、アイコン付きでボタンが作れるようになります。
Zardiを使うと、角が少しだけ丸い物と、もっと丸いボタンから形を選ぶ事ができます。
わずか4kbで作られているようですね。
ちょっと変わった形のボタンを作りたい際に。
サイトには他にも様々なボタンがありました。
興味のある方は下のリンクからどうぞ。
ドロップダウンメニューの中にフォームを表示したい。
そんな方におすすめなのが「FormBox」。
Twitterのログインパネルのように、場所を取らずにフォームを作成する事が出来るようになります。
↑フォームにフォーカスを当てると吹き出しでメッセージを表示する事も。
気の利いたフォームを作る際に良さそうですね。
ダウンロードは下のリンクからどうぞ。
CSS3を使ってフォームを作成したい。
そんな時におすすめなのが「Top 10 CSS 3 forms tutorials」。
スライダや日付処理などのHTML5のフォーム要素を取り入れつつ
デザインされたフォームを作る方法が紹介されています。
サイト内でカウントダウンする際に使えそうなjQueryプラグインをみつけたのでご紹介。
「Pietimer」を使うと残り時間を視覚的に表示する事ができるようになります。
使い方は簡単で以下のように時間、色、高さ、横幅を指定するだけです。
$('#element').pietimer({
seconds: 10,
colour: 'rgba(0, 0, 0, 0.8)',
height: 100,
width: 100
},
function(){
alert('10秒経過しました。');
});
第2引数でcallback関数を指定する事もできます。
アイデア次第で色々使えそうですね。
使ってみたい方は下のリンクからどうぞ。
jQueryでアニメーションをする際にイージングを指定したい。
そんな時に便利なのが「jQuery.Easie.js」。
オブジェクトの動きを加速、減速させたい時になめらかに動くように調整してくれるプラグインです。
使用方法は以下のように移動先と、イージング方法を指定するだけになっています。
$("#box").animate({top:100}, "easieEaseInOut");
興味のある方は下のリンクからダウンロードしてみてください。
ウインドウサイズによって横幅やカラム数を変更したい。
そんな時につかえるのが「Adapt.js」。
ブラウザの横幅をチェックして、読み込むCSSを切り替えてくれるJavaScriptライブラリだ。
ウインドウサイズと、読み込むCSSを指定するだけでOKです。
例えば、760px以下と、980px以下、1280以下でCSSを切り替える場合には、
以下のように指定します。
・・・
range: [
'760px = mobile.css',
'760px to 980px = 720.css',
'980px to 1280px = 960.css',
'1280px = fluid.css'
]
・・・
最近はウインドウサイズに合わせて幅や高さをフレキシブルに広げる手法がたくさん使われているので、こういったライブラリを覚えておくと良さそうだ。
ハイセンスなHTML/CSSテンプレートを探している。
そんな方におすすめなのが「20 Fresh Free CSS Templates」。
以下のような素敵なテンプレートをまとめてくれています。
個人利用、商用利用がOKなものがほとんどになっています。
使ってみたい方は下のリンクからどうぞ。
アクセントの効いたボタン素材を探している。
そんな方におすすめなのが「Chunky 3D Web Buttons」。
フォームやリンクに使えそうなボタン素材のpsdデータが無料でダウンロードできるようになっています。
ダウンロードすると、たくさんのカラーバリエーションが揃っており、
各カラー毎に通常、ホバー時、アクティブ化した状態が含まれています。
こういった素材はいざ使おうと思った時に探すのが大変ですので、
覚えておくと良いかもしれません。
興味のある方は下のリンクからどうぞ。
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。
出力したいメッセージを指定するだけできれいに整形して表示してくれます。
例えば、以下のようなJavaScriptを実行してみます。
log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' );
↑すると、こんな感じで素敵に表示してくれちゃいます。
アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。
使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。
<html> <head> <script type="text/javascript" src="blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird.css" /> </head>
ほとんどのメジャーなブラウザで動作するようになっています。
IE6にも対応していますので、あのブラウザだけ動かないんだけど、、、
と言った時にも使えそうです。
ライブラリにはショートカットも含まれており、F2で表示非表示の切り替え、
Shift + F2でボックスの位置を変更、 Alt + Shift + F2でログメッセージをクリアしてくれます。
サイトには各ショートカットを実行するブックマークレットも有りますので、いちいち覚える必要もありません。
とは言っても既存のサイトでlogという名前をすでに使っているよ！という場合もあるかと思いますが、心配いりません。
簡単に名前空間を変更できるようになっています。
blackbird.jsを開いて11行目を変更すればOKです。
var NAMESPACE = 'log';
↑変更前
var NAMESPACE = 'myCustomLog';
↑これでmyCustomLog.debug(’hoge’);が実行できるようになります。
ダウンロードは下のリンクからどうぞ。
0