CSS3アニメーション:伸びる棒グラフ サンプルはこちら。 See the Pen fxCya by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. イケてる風なインフォグラフィックでよく見る、伸びるアクションをする棒グ… ゴトーハック2014.05.01 7,277
背景は透過したいがその上にのっている要素は透過させたくない CSS3から追加されたRGBaという色指定を使うことで可能です。表示サンプルはこちら CSS background-color:rgba(255,255,255,0.5); RGBa形式への変換はこちらのフォームが便利そ… haradaハック2014.04.28 320
CSS3:新プロパティ「resize」 「resize」を使うことで、ユーザ任意のリサイズの可否を設定できます。 このボックスの右下にサイズ変更のツマミが出ています。 モダンブラウザではブラウザが標準でtextareaの変形を許可しているため、それを拒否するた… ゴトーハック2014.04.21 496
CSS3:新プロパティ「selection」 「selection」を使うことで、テキスト選択時のスタイルを設定することができます。 ここのテキストを選択してみてください。他と異なり赤くなります。 CSS 上記サンプルのソースは下記。 .selection::sel… ゴトーハック2014.04.21 226
CSS3:transformで変形させる。 CSS3からの transform プロパティを使うことで様々な変形加工をすることができます。IEの対応状況はお察し。 CSS .box { margin:20px; background:#ccc; width:100… ゴトーハック2014.04.18 410
Selectivizrを利用してIE8以下でもCSS3を有効にする Selectivizrを読み込むことでIE8以下でもCSS3のセレクタが有効になります。利用方法は簡単で、ダウンロードしたselectivizr.jsファイルを以下のようにヘッダーで読み込むだけです。 <!–[i… haradaハック2014.04.04 227
CSS3の新プロパティ「columns」 名前の通りカラム分けを行ってくれるCSSプロパティです。ベンダープレフィックス付きで下記のように記述します。 .columnBox { -webkit-columns: 100px 3; -moz-columns: 10… ゴトーハック2014.03.31 361
CSS3:ロードアイコンパターン20 表示サンプルはこちら。 http://jsdo.it/goto_jp/rg4l HTMLはこちら。 <span class='icon20'></span> Sassの記述は下… ゴトーハック2014.03.26 308
CSS3:ロードアイコンパターン19 表示サンプルはこちら。 http://jsdo.it/goto_jp/qZRK HTMLはこちら。 <span class='icon19'></span> Sassの記述は下… ゴトーハック2014.03.25 190