[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons
Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。 デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jQueryとVelocityを外部ファイルとして記述します。 <head> ... <link rel = "stylesheet" href = "Path/To/Quttons.css" /> </head> <body> ... コンテンツ ... <script src = "Path/To/jQuery" type = "text/javascript"></scr
![[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons](https://cdn-ak-scissors.b.st-hatena.com/image/square/732285fae252960d582f0d7d1f3f578a0f23f796/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015061608.gif)
2万以上もの各種ボタン・アイコン・バーなどのユーザーインターフェースパーツのデザインを検索してダウンロードできる「UICloud」
「Download button」「CSS button」「Music Player」など、テキストボックスに欲しいユーザーインターフェースパーツを記入するだけで、総合計2万個以上のパーツの中から欲しいものを検索してきてくれるのが「UICloud」です。 UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloads http://ui-cloud.com/ トップページのテキストボックスに探したいパーツの名称を記入して「Search」ボタンを押します。今回は「Download button」で探してみました。 すると検索結果一覧が表示されます。色んなダウンロードボタンがずらり。 気になったものをクリックします。 すると、大きめサイズのイメージが表示されます。 画面右端には詳細情報
無料で商用利用可能なコンクリートスラブっぽいボタン＋アイコン40種類
完成済みのボタンデザインがPSDファイルで配布されているほか、ASKファイル(スタイルファイル)や使用しているフォントも同梱されていて、自分で同じデザインのボタンを自由に作れるようになっています。再配布は不可ですが、個人利用、商用利用ともMightyDealsのメール購読者であれば自由とのこと。 Free download: Slab concrete buttons - MightyDeals 「ダウンロード」「アップロード」など文字の付いたボタンデザインはこんな感じ。 アイコンだけだとこんな感じです。 製作したのはWebdesigner Depot。無料で使用が可能となっていますが、ダウンロードは若干手間がかかります。まず、「Free download」をクリック。 ポップアップが表示されるので、メールアドレスを入力して「Download」をクリック。ここで入力したメールアドレス宛にダ
有料から無料になったCSS3による42種のウェブアプリボタンセット「Zocial」
もともとは24ドル(約1800円)の有料セットだったのですが、今は無料でダウンロード可能なのが「Zocial」です。42種類のCSS3によるフォントフェイス(font-face)と、ベクター形式によって自由なサイズでキレイに描画できるアイコンボタンの組み合わせとなっています。 Zocial ~ CSS3 Buttons, Sass Framework. http://zocialbuttons.com/ Zocial | CSS3 Button Set http://zocial.smcllns.com/ ダウンロードは下記サイトの「ZIP」ボタンをクリックすれば可能です。 samcollins/css-social-buttons - GitHub https://github.com/samcollins/css-social-buttons/ サンプルは以下から閲覧可能。 Zocia
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
【レビュー】iPadの画面に貼付けるコントローラー『Ten One Design: fling』 - Touch Lab - タッチ ラボ
米Ten One Designから発売されたiPadの画面に貼付けるコントローラー『Ten One Design Fling 』を購入してみました。 iPadでのゲームプレイの操作性を向上することを謳った製品で、とくにコンソールゲーム機から移植されたタイトルによくある「バーチャル十字パッド」での使用を想定しています。 プラスチック製の本体に2つの吸盤、親指を置くためのボタンで構成されています。 この2つの吸盤でiPadのガラス面に固定します。 ボタンの裏側(画面に触れる部分)にタッチパネルが反応する素材を使用。 指でボタンをスライドさせると、上下左右(360°)どの方向へでも、フリックしたのと同じ効果が得られます。 また、渦巻き状になったプラスチックがバネの役割をし、指を離すとボタン部分が中央に戻る仕組みになっています。 実際にiPadに貼付けたところ。 吸盤が小さく、またあまり質が高くな
UIBarButtonItem の見た目を画像にしたいときのテクニック
iPhoneアプリでよく使われる、ナビゲーションバーに配置するボタン UIBarButtonItem の見た目を完全に画像にする時のテクニックです。 参考にしたページはこちら。 http://discussions.apple.com/thread.jspa?threadID=1505647 http://www.iphonedevsdk.com/forum/iphone-sdk-development/13809-uibarbuttonitem-customview-action.html http://discussions.apple.com/thread.jspa?threadID=1546506&tstart=60 ■作戦１：initWithImage てか、 UIBarButtonItem には initWithImage あるからそれでいいんじゃないか、と思ってさっそく以下の
iPhone - Develop » Blog Archive » SMS風のUI画像
ふきだしのUIがちょっと欲しかったので、画像をつくった。 一応本家のSMSからキャプチャした訳じゃなくて、自分で書いたのでよしでしょうか？わかりません。 適当にあげときます。 balloon.zip UIImage *greenBalloon = [[UIImage imageNamed:imageName] stretchableImageWithLeftCapWidth:23 topCapHeight:16]; [greenBalloon drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; こんな感じに描画するといい感じに表示できると思います。 UITableViewで表示するのを作ろうかな ↑作りました。 BalloonTest 適当に使ってもらってよしです。おかしかったら教えてね
[iPhone] UIButton にひとつの画像で様々な大きさの背景画像を貼付ける | Sun Limited Mt.
アプリ内で自分で作成したボタンの背景を使うことができますが、ボタンの大きさごとに違う背景を作るのはかなり面倒です。プログラムでストレッチ画像を指定することによりひとつの背景画像を色々な大きさのボタンの背景として使うことができます。 背景画像を用意 今回は下記のような画像を用意しました。 ストレッチ画像を作り背景画像に指定する stretchableImageWithLeftCapWidth:topCapHeight: でそれぞれ画像の左上からピクセル数を指定します。下の例は左から 12px 、上から 12px を指定しています。その大きさで四隅を切り取り、その四隅の間を伸縮して画像を表示します。 UIImage *normalImage = [UIImage imageNamed:@"button.png"]; UIImage *stretchImage = [normalImagge s
はてなブログ | 無料ブログを作成しよう
顔に見える？最近「送水口」が気になるという話 「送水口」が気になる今日この頃 最近街中で気になる存在、それがこの「送水口」です。地上のフロアが7階以上あるビルなど、一定の条件を満たした建築物には設置が義務付けられているもので、火事が発生したフロアにただちに水を送るために使われるものです。ポンプ車…
[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス
CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。 実装：HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Alert Dialogの標準ボタン操作
Button Maker
BANDIT77 - Situs $L0T Online Hadiah Paling Besar
＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook「OGP」活用術。皆が知らない「いいね！」ボタンの設定方法、超解説 : (旧)ガイアックスソーシャルメディア ラボのブログ
Cocoaの日々: bezelの検索結果
IDEA * IDEA
CSS3で作ったラムネ菓子っぽい雰囲気のボタン「BonBon Buttons」
Objective-C toggle on/off images
IDEA * IDEA