cinema-days 映画な日々

小技紹介 [2]

2011/11/12
小技
送信ボタンの”見た目”立体化
[方法]
 Filter,waveを使って立体化(従ってIEのみ)

input.btn {
  color : #656565;
  font : bold 15px;
  padding : 2px;
  background: #EEE8AA;
  border : none;
  filter : wave(freq=1 lightstrength=25 phase=0);
  cursor : pointer;
}

これに、カーソル通過時の背景色に変化を付けて見ました。
input:hover { background-color:#cee; }
メタリックな色目が結構、気に入っています。 (^^♪

参考サイト:Domo-Domo IEのFilter、waveを使って立体的に
今回は使っていませんが、こんな事も出来ます。
□ 送信ボタンの角丸化
[方法]
(1)角丸ボックスをCSSだけで作る方法
  margin と padding の設定を利用
  参考サイト:1px欠けの角丸ボックスをCSSだけで作る方法
(2)jQuery を使った方法
  プラグイン「jQuery Corners 0.3」を使用
  参考サイト:jQuery Corners 0.3 | 設置サンプル
【スポンサーリンク】
【パソコン】[カスタマイズ]
関連記事
 
タグ : 小技 
cinema-daysを「人気ブログランキング」で応援cinema-daysを「にほんブログ村」で応援
     シェアする


同カテゴリ  【パソコン】[カスタマイズ]

コメント歓迎!! 0

まだ、コメントはございません。

comment form
コメントは承認制です。コメントツールバーは利用できません。
【お名前・URL・コメント本文】欄の入力は必須になっております。
更  新  順
Hiro
Author: Hiro
発信地:愛知県
TB・CM(承認制)・LINK歓迎
cinemadays on X(旧Twitter)
cinemadays on Facebook