READ MORE

linear-gradientで六角形の背景

backgoundで複数のlinear-gradientを指定すると、CSSだけで六角形の背景をつくられます。 4分割して線形グラデーションを指定 左上、右上、右下、左下に4分割して、それぞれに線形グラデーションのlin …

READ MORE

IE11とiPhon対応 フッタを画面下に表示

コンテンツの量が少ない場合や、解像度の高いディスプレイでみた場合、いわゆるスクロールバーが出ない状態では、フッタが上にせり上がった状態になり、下へ隙間ができます。 この解決方法でよく見かけるCSS対策がこの2つ。 bod …

READ MORE

@supportsでクリーンなIEハック

特定の機能が有効な環境にだけ適用させる@supportsでobject-fitなどInternetExplorerだけ非対応の機能を指定すると、クリーンなCSSハックができます。 サンプルソース 参考:@supports …

READ MORE

CSSのbackgtound-sizeを含めたショートハンド

背景画像のサイズを指定するスタイルプロパティbackground-sizeは、ショートハンドで1行にまとめられないものなんだと思い込んでいてながい間、このように分割して指定していました。 が、/をはさめばショートハンドで …

READ MORE

CSSのclip-pathでコンテンツを丸く切り抜く

マテリアルデザインの、ボタンが円形に広がりコンテンツ表示領域となるエフェクトを作りたくて 画像ではなくテキストやその他のタグも含んだ要素をマスキングするclip-pathの使い方を研究してみました。 サンプルは、マウスや …