MS Access Tips/Sample and VBA and Blog customize etc...

入力エリアをちょっとだけ立体的にみせるCSS小技

このブログのコメントの投稿フォームの入力エリア、あるいは右上の検索ボックスがちょっとだけ窪んでいるようにみえますね。ナビゲーションの「CONTACT ME」をクリックして表示されるメールフォームの入力エリアもそのようになってます。

Css3DBox.png

これはCSSで簡単に設定できます。

境界線なしや単純な境界線よりはちょっとクオリティがアップしたように見えると思いませんか。

難易度:

当ブログのスタイルシートでは下記のように設定しています。

要は、border-top, border-left には暗めの色を、border-bottom, border-right には明るめの色を設定するだけのことです。境界線幅は、1pxで十分です。このぐらいのさりげなさがいいんです。色は、黒と白というように極端にせずに、背景色やボックスの色より少し暗めと明るめになるようにするのが上品です。実際に表示させてみて修正して、トライ&エラーで調節します。

検索ボックスのHTMLとスタイルシートは下記のようになっています。

入力ボックスの背景色とボタンの画像の背景色を同じにして、両者が接する境界線をなしにして、ボックスの中に虫眼鏡が入っているように見せています。

拍手する

1 Comments

なんとなく says...""

はじめまして パソコンを始めたばかりで 

こうして説明を見ても パソコン用語が解らなくて

今 勉強中です。もしかして 光るマウスの方なので

しょうか?・・・84歳になる おばあちゃまが 

字が小さいと 見えないと ・・・・・つぶやいて

いましたので 昨日でしょうか LMS を見て ポチリ・・・と

ちょつと  これは  パソコンの先生に  聞いてから

と  思っていました。

色々と  教えて下さって 有難うごさいます。<(_ _)>

しかし パソコンって  生き物みたいだし

解らないことに 答えも 与えてくださるので

目に見えない領域とは  本当に 奥が深いです。

これからも また お邪魔させて下さい。

2009.11.05 13:25 | URL | #- [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/206-9ebb8d6b
該当の記事は見つかりませんでした。