zaKEY.net - WordPress・iPhoneなどのブログ -

コポキャラの岡崎邦彦(ザッキー)の情報サイト。WordPressやらEC CUBEやらiPhoneについての情報を書いていきます。

HTML・CSS

【css3】文字やボックスに影を付ける方法

投稿日:2014年3月10日 更新日:

CSS3
css3を使えば文字やボックスに影を簡単に付けることができます。
通常はPhotoShopで影の加工をしてそれを使用しますが、cssでできるのであればサイトが自由に作れますし、更新の手間が省けます。

まず文字の影の付け方です。

text-shadow: 1px 1px 3px #000000;

プロパティの順に「横方向のズレ」「下方向のズレ」「ぼかしの幅」です。

例:
例の文章です。

次にボックスの影の付け方です。

box-shadow: 1px 1px 10px #555555;
-moz-box-shadow: 1px 1px 10px #555555; /* Firefox用 */  
-webkit-box-shadow: 1px 1px 10px #555555; /* Safari,Google Chrome用 */ 

プロパティの順に「横方向のズレ」「下方向のズレ」「ぼかしの幅」です。

例:
例のボックスです。

簡単に導入できました!!

zakey336x280

zakey336x280

-HTML・CSS
-,

関連記事

HTML5rawkes

【html5】<video>タグによる動画の再生サンプル

html5から<video>タグを使用して動画を簡単に再生させることができます。 IE8以下には対応していないので、Javascriptを読み込まして対応させる必要があります。 基本の書き …

51o9Pgs4laL._SL160_

iPhone6・iPhone6 PlusのCSSハック

iPhone5までは幅320pxで調整出来ましたが、iPhone6・iPhone6 Plusになって幅が大きくなったためそのためのCSSを入れないといけません。 参考より、こちらで対応できます。 /* …

HTML5rawkes

【html5】スマホでPC用サイトを見せる時に幅が足りない時の対処法

PC用サイトをスマホで表示させる際にうまく表示させることが出来ず幅が足りない場合があります。 この場合下記のコードがheadに入っていないか確認してみてください。 <meta name=&quo …

【html】ガラケー用のHTMLテンプレート

【html】ガラケー用のHTMLテンプレート

ガラケーのHTMLを作ることがあるので、テンプレートをおいておきます。 これでHTMLを作って文字コードをShift_JISで作ればとりあえずの形はできます。 <?xml version=&qu …

スクリーンショット 2014-03-06 10.40.10

【css3】inputタグに事前に薄く文字を表示させる方法

お問い合わせフォーム等で入力欄に事前に文字が入っているのを見たことありますか? あれが入っていると相手としては何を入力すればよいのかわかりやすいので、是非導入したい! HTML5だと実は簡単に導入でき …