CSS
【ボタンデザイン03】目に刺さらないカラーバランスのオレンジボタン
Aipo.comなどで主に使われているオレンジボタンです。 見本はこちら http://jsdo.it/Yukimi.Sato/rBvF HTML <a class="btn gradation-oran…
CSSだけで吹き出しツールチップを表示する
CSS .tooltip{ display:inline-block; position:relative; text-decoration:none; color:#fff; text-align:center; wi…CSSとFontAwesomeだけでチェックボックス・ラジオボタンをデザインする
表示サンプルはこちらhttp://jsdo.it/goto_jp/o1XT OSやブラウザ、PC/スマホで何かと表示に差異があり扱いの面倒なチェックボックス・ラジオボタンをWebFontのメジャーどころ「FontAwes…Compass(sass)でリセットCSSを楽に書く
ブラウザ標準のスタイルをリセットするためのCSSをCompassで一発で出力することができます。 Sass記述 1行書くだけです。 @include global-reset; 出力CSS 下記CSSがドバッと出力され一…【ボタンデザイン02】スマートフォンでも綺麗に発色される鮮やかな青ボタン
Aipo.comなどで主に使われている青ボタンです。 見本はこちら http://jsdo.it/Yukimi.Sato/rBvF HTML <a class="btn gradation-blue&qu…Compass(sass)でCSSグラデーションを楽に書く
CSS3のグラデーションはブラウザごとの表示仕様が異なり、ベンダープレフィックスの付与が結構面倒です。Compassで用意されている標準mixinを使うことで一括で出力できます。 Sassの記述は下記になります。 $re…【ボタンデザイン01】白ベースでも綺麗に見える白ボタン
Aipo.comなどで主に使われている白ベースのボタンになります。 白ボタンはグレーの濃さの調整が難しいですが、綺麗にできると素敵なボタンになります。 見本はこちら http://jsdo.it/Yukimi.Sato/…