ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|
ihaのブログ

DTP・Webデザイン系企業に就職したスタッフIhaのブログテンプレート制作目録です。イラスト、フォト、プログラム、呟きなどいろいろ投稿していきます。基本的にはブログテンプレートデザインを制作した過程を書いています。

現在の位置:TOP >  追加HTML&CSS

cssのtext-shadowとbox-shadow

cssのtext-shadowとbox-shadowを加えてみました。

 

最近のページ作成(メインカラムのみ)をした案件で、こういうのがありました。テキストに変なぼかしが入ってんな・・・って思ってたけど、CSS3のtext-shadowが入ってたんですね。

 

よく見るとタウンネットブログの<h2>にも入ってました。勿論、テキストに。

 

・・ってことで、このブログタイトルのオンマウスロールオーバーと右カラムに加えてみました。

 

.blog_title a:hover{

    color:#fcfcfc;

    text-decoration:none;

    text-shadow:0px 0px 10px #f6f;

}

文字通りテキストの影。ドロップシャドウみたいな感じ。

値は、横方向[px]・下方向[px]・ぼかし具合[px]・色

下方向っていうより縦方向ですね。プラスの値を入力すると右方向や下方向に、マイナスの値は左方向や上方向に影が掛かるようです。

 

.side{

    -moz-box-shadow: 5px 5px 10px #999;/*Firefox*/

    -webkit-box-shadow: 5px 5px 10px #999;/*Safari, Google Chrome*/

}

文字通りボックスの影。値は上記同様。

 

ちなみにIEでは他のやり方があるようで、IE8では表示されていませんでした。だからIEで当ブログタイトルをポイントすると文字色がかなり薄いです( ̄▽ ̄;)

FirefoxとGoogle Chromeでは表示確認OK。

記事URL
現在の位置:TOP >  追加HTML&CSS

グローバルナビにイメージ背景はめ込み

昨日からグローバルナビにイメージをはめ込んだと思いますが、背景イメージを挿入しても何故か反映されなかったので、省略していた下記赤文字部分を挿入したところ反映されました。

 

/*-- リンクエリア --*/
#sub_header ul.gnavi li a {

   ・

   ・
   ・
    background: #21a0ff url(http://blog.town-nets.com/blog/iha/file/dadb323e64.JPG) center top repeat-x;
   ・
   ・
   ・
}


修正したCSSソースは下記の「続きを読む」からどうぞ。今回はCSS3で出来る角丸メニューを追加しました。

gnavi01|グローバルナビにイメージ背景はめ込み|スタッフIHAのブログテンプレート制作目録

まあヘッダー部分を見ればわかると思いますが。

ちなみに今回使用した画像ですが、アメブロでやってる私のブログからパクってきました(笑)

訓練校に通ってるときに制作したものなので大丈夫です。


menu1_off|グローバルナビにイメージ背景はめ込み|スタッフIHAのブログテンプレート制作目録
こちらが通常リンク時(ON)で、
menu1_on|グローバルナビにイメージ背景はめ込み|スタッフIHAのブログテンプレート制作目録
こちらがポイント時(OFF)・アクティブ時です。

 

追記:角丸が反映されるブラウザは、Firefox、Google Chrome、IE9です。

続きを読む...

記事URL
現在の位置:TOP >  追加HTML&CSS

即席グローバルナビ作成

headerに簡易的な即席グローバルナビを作ってみました。


全部CSSで出来るから簡単です(^^)


別に意味は無いけど、ずーーーーっとIllustrator触ってたから気晴らしに、という事で作成。


やっぱDTPメインが長いとソースの書き方忘れてヤバいやっさ。TAG indexを参考に、あとに残ったmarginとpaddingの計算は自力でやって完成。


でも配色だけだと詰まらんなぁ・・・( ̄. ̄;) ま、即席の簡易版なので仕方ないけど。







こちらはおまけ


リンクボタン(全アピアランス)|即席グローバルナビ作成|スタッフIHAのブログテンプレート制作目録リンクボタン(パス)|即席グローバルナビ作成|スタッフIHAのブログテンプレート制作目録


青が、文字に全部アピアランスで作成したもの(文字の塗りを量産)。
赤が、パスと文字で作成したもの(オブジェクト一つひとつに効果入り)。

 

 

追記――――――

枠が角丸になるようCSS3のソースを追加しました。

Firefox4と5、Google Chromeで確認できます。ていうかIE以外。

続きを読む...

記事URL
1 |2 |次へ>> 

Calendar

<< 2018年07月 >>
1234567
891011121314
15161718192021
22232425262728
293031    

Me

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0