mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」
MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず、使いやすいUIで選択肢をユーザーに提供します。以下動作サンプルです。 動作サンプル ※クリックで動作確認できます コードは以下のように普通のmailtoリンクとなっています。 <a class="mailtoui" href="mailto:hogehoge@example.com">動作サンプル ※クリックで動作確認できます</a>特にclassを与える必要もなく、スクリプトを読み込むだけでこのようなUIを提供できるようになります。 勿論、日本向けに諸々変更する必要がありますが、個人的にはいいアイデアだなぁと思いました。メールフォームよりも普段慣れたメーラーの方がいいかも、とは
フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。 クレジットカード番号のフォーマット 電話番号のフォーマット 日付・時間のフォーマット 数値のフォーマット 区切り文字、プレフィックス、ブロックパターン
スゴイのが登場！アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring | コリス
最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。しかし現状CSSだとそこが限界です。 アニメーションの原則に基づき、パフォーマンスにも優れたアニメーションをシンプルなコードで実装できるReactのアニメーション ライブラリを紹介します。 React Spring -GitHub React Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。 WebサイトやスマホアプリのUIにぴったりなReac
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
HTML、CSS、JS等のUIコンポーネントライブラリが検索できるUIBox！ | バンクーバーのうぇぶ屋
UI関連のアイデアや表現、もしくはコンポーネントライブラリをとにかく色々見てみたい時ってないですか？ ナビゲーションからフォーム、カラーピッカーやプルダウンメニュー等、UIの表現を考える時ちょっと探したいってシチュエーションは結構あると思います！僕であれば、レスポンシブ対応のナビゲーションなんかは結構どういう形が理想か、まだまだ暗中模索状態って感じですので、色んなサイトを参考にしたい所です！ そんなこと考えている時に直ぐ検索してみることが出来るサイトが今日ご紹介させて頂くUIBoxです！ UIの参考となるヒントがもしかしたら見つかるかもしれませんので、是非一度除いてみてください〜！ UIBox – Curated HTML, CSS, JS UI Component Library 検索フォームからのUI検索が可能ですねー。 例えばナビゲーションに関するUIのコンポーネントが見たかったら、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
