ふみぃ~.何だか虚しい・・・
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Date:--/--/--(--) --:--:--
スポンサー広告 | Edit |
先日,Macin' Blogの模様替えをしたとき「リンゴが好きでぃす♪2.0」のくじゃくさんに,グラデーションのかけ方とかボックスの角の丸め方とか,いろいろ教えてもらいました.

まだ直さないといけないところは多々あるのでしょうか,ナニゲに少しはまともなレイアウトになって嬉しい今日この頃です(くじゃくさん,ご親切に教えていただきありがとうございました).

で,レイアウトが一段落したあとで,AppleのWebページはどうなってるんだろうと思い,CSSを確認してみたところ,結構ここのデザインと同じようなCSSが使用されていたので,その中から本家のサイト風のテキストとボックスの影の付け方をご紹介.
(ちなみに,下のサンプルはSafari以外のブラウザでは一部指定したとおりのスタイルで表示されなかったりします.ご了承下さい.)

ここにタイトル
ここにズラズラと記事を書く


まず,テキスト部分ですが,文字の色が#333333で,これに対して下に1pxずらした#CCCCCCの影をつけるとAppleっぽくなります(一番上のメニューのところなど).

これをCSSで記載すると...

color: #333333;
text-shadow: #CCCCCC 0 1px 0;


これで文字色が濃いときには下に薄い色の影をつけることができて,逆に文字色が薄いとき(メニュー部分にカーソルを合わせたとき)には薄い色に反対向きの濃い影をつけるように,上の1pxのところを-1pxに変えて下さい.

次にボックス部分の影はこうなります.

-webkit-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,.5) 0 1px 2px;


IEに対しては別途指定してあって,これで意図したとおりに表示されるのはSafariやChromeとFirefoxだけですが,特にボーダーラインを指定せずに下向きに1px,ぼかしを2pxの影をつけるとAppleっぽくなります.

Photoshopなどで画像を用意しなくても簡単にこれぐらいのことが出来ますし,サイズや色合いを変更したくなったときにもCSSのみで対応可能なので,サイトのデザインにちょっと一工夫したい方はお試しあれ!

上のサンプルでは他にもグラデーションをかけてあったり,角を丸めてあったりしますが,これらについてはまた気が向いたら...
Date:2010/01/12(Tue) 20:49:40
Net | Edit | Comment:7 | Trackback:0
Comment
Posted Comment
どもです!
僕もブログのタイトルと記事タイトルにシャドウを付けてますが、グラデーションにも出来るのですね。
試しに僕が使っているテンプレに以上の記述を埋め込んでみたのですが、反映されませんでした。

色々と試してみたのですがダメだったのでもう少し勉強してみます。
これが出来ると最高ですね!
2010/01/12(Tue) 21:23:20 | URL | retro #93Spc5Yw[ Edit ]
グラデーション
おっ!retroさん,どうもです.

コメントを頂いてから気付きました.
シャドウのかけ方よりもグラデーションのかけ方の方が需要があるかも?

Appleと同じではないですが,うちの場合は以下のようにかけてます.

background-color: #FFCC99;
background-image: linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr="#B2ffffff", EndColorStr="#00ffffff");

一番上のbackground-colorさえ変えればいろんな色合いのグラデーションに変更出来るのが便利.
サンプルがある方が分かりやすいかも知れないので,近いうちに記事になる気が少し増しました.
2010/01/12(Tue) 22:50:26 | URL | Double KO #ax4px7aw[ Edit ]
再度やってみましたが、やはりダメでした。
現在Macin' Blogさんではグラデーションを掛けている状態なんですよね?

僕はSafariから見ていますが、グラデーションになっている所が無いので「準備中」という事ですか?
2010/01/12(Tue) 23:47:14 | URL | retro #93Spc5Yw[ Edit ]
はい
準備中なわけではなく既にグラデーションがかかってます.
なぜでしょう?

Safari 4.xじゃないとダメだからとか?
あるいはボックスのグラデーションの話ではないとか?
2010/01/13(Wed) 06:07:08 | URL | Double KO #ax4px7aw[ Edit ]
シャドウ
Safari4だと「ここにタイトル」の所にグラデーション掛かってますね。
でも、retroさんのコメント見てたら、「シャドウにもグラデーション掛かるのですか?」と聞かれているようにも見て取れます。
でも、シャドウ自体グラデーション掛かっているようなものなので、それは気のせいか。
関係ないけど、私は、上下スクロールバーの横に「popin」と言う折れたベロが出てるのが気になって仕方がないです。
広告なのかな?

2010/01/15(Fri) 21:35:52 | URL | へじほぐ #XjCgDO1w[ Edit ]
ベロ
そうそう,文字のところの話かとも思いました.
ここのコメントでのやりとりは途中で終わって見えるのですが,実はTwitterで続いてたんですよ.
ごめんなさいね.

それとベロは広告です.
だけど,広告として機能してるのは見たことなくて(あります?),つけてる理由は画像の上にカーソルを置いてAを押すとポップアップしてプレビューできるから.
もっともベロはなしにする設定も可能なのですが,殺風景なBlogだし,アクセントになるかと思って残してます.
邪魔っすか?
2010/01/15(Fri) 23:10:26 | URL | Double KO #ax4px7aw[ Edit ]
いえ
基本Firefoxなんですが、必要なもの以外ブロックしてますから実は表示されてないんですよ。
Safariで開いた時だけ表示されます。
右端が隠れてしまう弊害はありますけど、まぁ特に問題ではないですね。
でも、そんな機能があったとは知りませんでした。
2010/01/16(Sat) 00:13:15 | URL | へじほぐ #XjCgDO1w[ Edit ]
Comment to This Entry
URL:
Comment:
Pass:
Secret: 管理者にだけ表示を許可する
 
Trackback
Trackback URL
http://doubleko.blog18.fc2.com/tb.php/4329-4c88d071
この記事にトラックバックする(FC2ブログユーザー)
Trackback

Powered by FC2. Designed by Double KO.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。