使いやすくなった！UI素材とテクニック集／CSS jQuery版
作成：2013/12/9 更新：2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．円形 ２．タブ ３．ナビゲーション ４．アコーディオン ウィンドウ ５．モーダルウィンドウ ６．フローティングウィンドウ ７．Dialog(ダイアログ) ８．フォーム＋バリデーション ボタン ９．Toggle (トグルボタン) １０．Switch (スイッチボタン) １１．Scrubbe
オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
CSS見出し-ジェネレーター | WEB道
あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ 見出しサンプル あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ CSSコード .sample2 { position: relative; color: #ffffff ; background: #000000; font-size: 16pt ; line-height: 1; margin: 20px -10px 20px -10px; padding: 10px 5px 10px 20px; box-shadow:1px 3px
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
