どうも!LSSです!!
今回は「BOX要素をborder(枠線)と影(box-shadow)で装飾するツール」を作ってみました!
使い方
↑この枠内の部分を色々いじると、その下にある「サンプル」に影響します。
色を選択する部分がちょっと分かりづらいかもですが、もし
「黒」にしたい場合は「明」を0%に、
「白」にしたい場合は「明」を100%に、
「灰色」にしたい場合は「彩」を0%にして「明」で濃さを調節できます。
あと「ここに内容を書きます」の部分も書き換えられますが、タグ無効化とかしていないので、中で別途タグが使用可能です。
※悪く言えば、その中でタグをミスると結果がおかしくなるのと、改行が改行として表示されない、というのがあります。(これは改行したいところで<br/>と入れるとOK!!)
気に入ったものができたら、さらにその下にある「コード」のところに書かれたタグを、はてなブログの「記事を書く」の「HTML編集」画面にコピペしてください^^
「サンプル」と同じものがブログで使えます!
ツール制作秘話(というほどのものじゃないですが)
実は元の着想は、あるブログで見かけた絵の表現が綺麗だなと思い、「これ、CSSでそれっぽく作れるかも」と思ったのがきっかけでした。
で、それもできたのですが、作る前後に
「これを公開して、更に他の人に使ってもらうにあたって、元のブロガーさんに断りを入れるべきかな」
と思ったのですが、どう切り出したものか…と迷ってるうちに結局、サンプルのデフォルトを「それとは全く違うもの」にして公開に踏み切りましたw
…このへんがコミュ障ですねぇwww(多分、快諾してくれそうな人なんですけど^^;)