READ MORE

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

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

READ MORE

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

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

READ MORE

Adobe Illustratorで大量のSVGサムネールを書き出す

画像化された文字の見出し、カード型のサムネールや、かるたなど 同フォーマットで文字違いのSVG画像をIllustratorで大量に書き出す場合のコツを紹介します。 基本的には、SVG保存で選べる「アートボードごとに作成」 …

READ MORE

画像ファイルなしCSSだけでSVGを表示

スタイルシートだけでSVG画像を表示する方法です。 画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。 古いブラウザでは表示できませんので、ご注意を。 × …