スキップしてメイン コンテンツに移動

投稿

10月, 2014の投稿を表示しています

押した感・押しごたえがあるボタンをつくろう(画像編)

クリックしてもらえるようなボタン、思わずクリックしたくなるようなボタンをつくろう!




まずはPhotoshopなどのグラフィックツールで、ボタンを作ります↓↓↓
▶押した感・押しごたえがあるボタン デモはこちら




「通常時のボタン」と「マウスを乗せたときのボタン」の2種類をつくります。

今回はボタンサイズ 200px×50px(+影の高さ10px)で、カラーは#30b2e2、影のカラーが#1a95c3でつくりました。

必要に応じて好きな形にしてください。



これらをそれぞれ、背景透過のpng形式で保存しました。

そうすると、1つは200×60pxの画像、もう1つは200×50pxの2サイズができます。



次にHTML↓↓↓ <a href="#" class="btn"></a> 1行です。ここでは好きなクラス名(もしくはID名)をつけてください。


そしてCSS↓↓↓ .btn { background: url(通常時ボタンのパス名) 0 bottom no-repeat; display: block; width: 200px; height: 60px; } .btn:hover { background: url(マウスを乗せたときボタンのパス名) 0 bottom no-repeat; }
"background"の位置を下揃えにすることで、ボタンが押された感が出ます。

":hover"という擬似要素を使用しています。
これは、マウスを乗せたときの動作を指定できます。
つまり、マウスを乗せたら背景画像を変えるという意味です。



▶押した感・押しごたえがあるボタン デモはこちら



Written by Creative Flake

雨雲レーダーアプリ 再DL開始しました!

こんにちは、開発アプリ更新のお知らせです!







一時ダウンロードを停止していた雨雲・雷レーダーアプリをリニューアルし、DL再開しました!



データ元計測機器のメンテナンス等で正しい情報が配信されなかったため、みなさまには大変長らくお待たせしました。



レビューやメールにていただいた、ユーザーの方々からのご意見やご感想、変更のご要望をもとに、より便利で使いやすいアプリになりました。



すでにGoogle Playでも紹介させていただいているのですが、機能と特徴はこんな感じです↓↓↓

















▼これまでの過去の履歴(雲の動きと雷の動き)は30分だったのですが、1時間に拡大しました!

▼デザインをリニューアルし、HD対応しました!

▼地図をタップ(長押し)でフルスクリーンと画面等倍に変更できるようになりました!

▶Google Playでダウンロードできます

11万人ダウンロードありがとうございます(ノД`)!!!!



Written by Creative Flake