CSS « ウェブデザイナー的ホームページ制作最適化

‘CSS’ カテゴリーのアーカイブ

マウスカーソルオンで画像を白黒からカラーにする

2008 年 9 月 5 日 by admin

画像にマウスを持っていくと、白黒からカラーに変わるjavascript。画像がライトアップされてような感じで表現できます。

JavaScript のソース（headタグ内）

function GrayOn(img){
    img.filters["Gray"].enabled = true;
}
function GrayOff(img){
    img.filters["Gray"].enabled = false;
}

HTML のソース

<img src=”sample.jpg” style=”filter:Gray();” onMouseover=”GrayOff(this)” onMouseout=”GrayOn(this)”>

CSS, javascript

コメントは受け付けていません。

CSSでリストのマークを画像にする

2008 年 9 月 4 日 by admin

CSSでリストのマークを画像にするには、CSSのlist-style-imageプロパティを使う。画像が何も無い場合は、何も指定していないものと同様に、黒丸マークが表示されます。

<ul style="list-style-image:url('star.gif');">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

,

CSS, 初心者向け

コメントは受け付けていません。

CSSで画像を一部だけしか表示させない！！

2008 年 9 月 1 日 by admin

CSSで画像の一部だけを表示させるには、CSSのclipプロパティを使います。何も指定が無ければ画像全体が表示されますが、CSSのclipプロパティを使うと、指定した部分を切り抜いて表示させることができます。
「rect(auto 50px 50px auto)」は、「rect(画像上端からの距離 画像右端からの距離 画像下端からの距離 画像左端からの距離)」って感じ。

<img style=”position:absolute;clip:rect(auto 50px 50px auto);” src=”http://design.web-nouhau.com/image/site/urawa-reds.jpg”>

▼切り抜き表示

▼指定なし表示

,

CSS

コメントは受け付けていません。
次ページへ »