ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

このブログのボーダーに画像を使おうと思ってやめた

覚え書き HTML5 CSS3

このお話のまとめ


+


||

CSSでボーダーに画像をつける

CSS3で新しく追加されたプロパティにborder-imageというのがあります。ただ、あるにはあるしちゃんと動いてくれるものの、個別指定のプロパティが使えないらしく、完全な対応ではないようです。IEはそもそも10でも理解しないとのこと。ぐぬぬ…
上のサイトにはいろいろ書いてありますが、めんどくさい人のために便利なサイトがあります。
それがこちら。
border-image-generator
f:id:yuu_xxxx:20130108223324p:plain
使い方はいたってシンプルです。ボーダーに使いたい画像をアップロードしたら、その下のスライダーでオフセットを指定するだけです。スライダーをいじると、それに連動して画面の下のほうにあるCSSの設定とプレビューがリアルタイムで書き換わります。あとはコピペして使いたいところに貼り付けるだけでOKです。

目からうろこのレースの描き方

ツイートでも紹介されていますが、この通りやるとすごく簡単でした。

  1. まずはベクター系グラフィックツールを用意します。IllustratorでもInkscapeでもいいでしょう。私は先日紹介したExpression Designを使いました。
  2. 新しい画像を作る準備ができたら長方形を作ります。
  3. 次はテキストを入力します。さっきの長方形に半分くらい隠れる感じで「0」をいくつか書きます。同じように「@」や「S」など、いろいろ重ねてもいいでしょう。これがレース特有の装飾になります。
  4. それが終わったらさっきまでの文字をパスに変換します。
  5. さらにパスに変換した文字と最初に描いた長方形を合成します。Designでは合成するパスをすべて選択し、「オブジェクト」→「パス演算」→「合算」でできます。これが布地になります。
  6. 縫い目を再現するには「･」や「-」を使います。同じような感じでいくつか書いていき、終わったらパスに変換します。
  7. 布地になるパスのセットから縫い目になるパスのセットを切り抜きます。Designの場合は「オブジェクト」→「パス演算」→「背面マイナス前面」または「前面マイナス背面」でいけます。

ここまでの作業を適当にやると、ブラシにしたときに継ぎ目が目立ってもにょるので慎重にやりましょう。

  1. 余計なパスをカットします。継ぎ目が目立たないよういい感じに長方形を書いてレースに重ねた後、両方を選択し、「オブジェクト」→「パス演算」→「交差」で必要なところだけが選択されます*1。
  2. パスをブラシに登録します。パスを選択したら「オブジェクト」→「新規ストロークの定義」→新たにタブが開くので、枠いっぱいにパスを広げる→保存でできます。
  3. あとは直線だろうが円だろうが自由に描けるようになります。

そうして出来上がったのがこちら。

f:id:yuu_xxxx:20130108230257p:plain
手前味噌ですがなかなかの仕上がりです。
で、これをこのブログに貼り付けようとしたのですがどうもダサい。
いろいろ考えた結果、やめることにしたのでした…

なんでダサかったのか

  • 端の処理ができてない

上のツイートのとおりです。うまくいかないもんですね、ええ。技量不足です。やるならやるでプロに任せましょう。

  • ごちゃごちゃしてる


たまたまaxes femmeのサイトを見ていて気が付いた次第です。決してこのサイトがダサいというわけではありません。

*1:ひょっとしたらいらないパスをカットしたあとそれをコピーして鏡像反転させた後いい感じに合成したほうが効率的だったかも…