気分が乗っていない時はめちゃくちゃ字が汚くなる、下駄です。
HTMLのtextareaタグって、とっても簡素な入力フォームですよね。
inputタグで改行ができるという事なんですが、サイズを同じにすると、まるでどっちがどっちなのか判別できなくなります。
そんなtextareaタグにちょこっとデザイン装飾をするだけで、まあまあイケてる要素になる（かもね）というテクニックをお伝えしたいと思います。
inputとtextarea
<input style="width:100px;height:20px;border:1px solid #ccc;margin:10px;padding:0;">
<textarea style="width:100px;height:40px;border:1px solid #ccc;margin:10px;padding:0;"></textarea>
ほら、サイズが違うという点は、全く区別がつかないですね。
textareaは、右下にリサイズできるマークが付いているのでそれでも判別できるかもしれませんが、通常はresize:none;として、表示しないようにしてしまいます。
textareaをノート風にしてみると・・・
textarea.note{
line-height: 20px;
background: linear-gradient(to bottom, #eee 1px, white 1px);
background-size: 100% 20px;
background-origin: content-box;
background-attachment: local;
}
上記スタイルをｐセットして、class名に「note」をつけると、
こんな感じになります。
これ、めちゃくちゃ良くないですか？
textareaのデフォルトか、cssプロパティに入れてほしいですよね。
ちょこっと解説
背景色のグラデーションで横１本線を表示するようにしてタイリング表示しているんですが、line-heightとそのグラデーションの幅を合わせることで、書き込む文字列と連動するようにしてます。
当たり前ですが、文字サイズは、その幅よりも小さくしてくださいね。文字を大きくしたい場合は、その幅も大きくする必要があります。
ノートの色は、グラデーションの箇所の色をちょいちょいといじれば変更できるし、textareaタグのpaddingに合わせてノート罫線も自動調整するようにしているので、かなりしっかりとノートになると思います。
ちなみに、firefoxでもoperaでも正常に表示ができましたが、Macでの確認だけなので、MS系のブラウザは見ていません。（あしからず）
使いたくなった人は、今すぐcss書き込みやがれ！！！！
0 件のコメント:
コメントを投稿