コンテンツや文字に影をつける/立体的に見せる方法

コンテンツや文字に影をつける/立体的に見せる方法です。当サイトもこの方法をふんだんに活用させて頂いてます♫

コンテンツや文字に影をつけて立体的に見せる方法

見出し(記事タイトル)やウェジェットタイトル、それから記事コンテンツ部分ですね。こちらに影をつけて目立つように工夫しています。

これは、’CSS3’を使っています。初心者さんにとっては…???って感じでしょう。でもね、時期に慣れますので、そんなに心配しないで下さい。

ちなみに私は、’CSS3’とかって言葉さえ知らない時から使っていました…(汗

つまりはですね、こういった影も含め様々な便利な表示方法を表現出来るモノだと思って下さい。だから、詳しく知らなくても使えます(笑　えぇ、私の様にww

影をつける’CSS3’’rgba’

ちなみにですねぇ、ワードプレステーマTwentyElevenをご使用中のあなた!!実は、デフォルトですでに使われているのをご存知でしたか?

検索BOXやテキスト入力、コメント欄、グローバルナビゲーションなど、様々な場所ですでに使われているんですねぇ。

だから私は、実は最初はそこから~~パクって~~拝借して使っていたんです。’CSS3’を知らないくせにです(笑　言葉は、後から知りましたww

とにかく分からないモノは使ってみるべし!!ってことで、とにかく’スタイルシート’にコピペして実際に表示させてみるのがよろし。

text-shadow: 2px 2px 1px rgba(0,0,0,0.6);

-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);

問題は、これをどこに貼り付けるの?ってとこでしょう(笑

分かりやすいところが、記事タイトルと記事コンテンツだと思います。まずは、ソコに貼り付けてみましょう♫

【記事タイトル】

【記事コンテンツ】

~~あれっ!?また、たくさん記事を書かないといけないww　ってことで、記事が追いつくまで少しお待ち下さい(爆~~

その間は、参考にさせて頂いたサイト様/記事を紹介させて頂きます。

参考記事：CSS3 要素を透明に出来る Opacity と RGBa の使い方

ちなみに、記事タイトルを見やすく美しく/記事コンテンツの背景に色をつける、の項目で紹介していますが、そこに上記の要素を貼り付けると出来ますよ。

~~個別記事は、少しお待ち下さいませ。。~~