READ MORE

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

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

READ MORE

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

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

READ MORE

サイズが可変のtableのセルに斜線を引くCSS

SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。 リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。 パソコンのブラウザの場合は、 …

READ MORE

SVGをグラデーションで塗りつぶす

Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、 わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。 せっかくビットマップ画像と …