「プロ」がこういう記事を書くってことは、すでに最先端じゃないことの証明?
- MYCOM ジャーナル - プロに学ぶWeb 2.0な画像テク 第1回 Web2.0的サイトのグラフィック表現
- http://journal.mycom.co.jp/series/web20/001/
それはそれとして、この記事も他の記事も Photoshop 前提なのが個人的には困る。そこで、Inkscape 使って SVG にしてみた。Opera や Firefox で開いてみたら、あたりまえだけどちゃんと表示された。
何かに使えるかな?
まるごと貼り付けておく。SVG って短縮表記があったと思うけど、あれ使ったらもっと短くなるのかな。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="100"
height="30"
id="svg2">
<defs
id="defs4">
<linearGradient
id="linearGradient3048">
<stop
style="stop-color:#fdbb3d;stop-opacity:1"
offset="0"
id="stop3050" />
<stop
style="stop-color:#ff7e00;stop-opacity:1"
offset="0.56999999"
id="stop3056" />
<stop
style="stop-color:#ffb14d;stop-opacity:1"
offset="0.61000001"
id="stop3058" />
<stop
style="stop-color:#fcdc86;stop-opacity:1"
offset="0.92000002"
id="stop3060" />
<stop
style="stop-color:#eea93c;stop-opacity:1"
offset="1"
id="stop3052" />
</linearGradient>
<linearGradient
x1="91.428574"
y1="162.36218"
x2="252.34436"
y2="162.36218"
id="linearGradient3054"
xlink:href="#linearGradient3048"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.179998,0,0,0.164037,-1067.704,13.52439)" />
</defs>
<g
transform="translate(0,-1022.362)"
style="opacity:1"
id="layer1">
<rect
width="29.828169"
height="99.828171"
x="-1052.2762"
y="0.085916005"
transform="matrix(0,-1,1,0,0,0)"
style="opacity:1;fill:url(#linearGradient3054);fill-opacity:1;stroke:black;stroke-width:0.17183201;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2160" />
</g>
</svg>
