READ MORE

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

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

READ MORE

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

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

READ MORE

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

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

READ MORE

CSSでグラデーションのborder

角が完全な丸になった形状ならば、box-shadowで、 角ばった角ならば、border-imageとbox-shadowでグラデーションを作られます。

READ MORE

特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが 「&(&amp;)」「>(&gt;)」などの特殊文字はコードのまま出力されてしまいます。 contentで特殊文字を使うときは、16 …