3Dデジタルコンテンツ制作 slow-alpha.com

Category - CSS

ラコ

CSS　検索フォームをデザイン

ラコ　2009-03-05　coment(0)　trackback(0)　2009:03:05:14:56:48

search
CSSで検索フォームを自由にデザインする方法。

 

■CSS

#searchform {
	background:url(images/search.gif) left top no-repeat;
	display: block;width: 335px; height: 32px;
}
#searchform input {
	display: block;
	float: left;
}
#searchform .isearch {
	border:none;
	background: none;
	width: 285px;
	color:#333333;
	padding: 12px 8px;
	font-size: 10px;
}
#searchform .ibutton {
	background:none;
	border:none;
	margin-top:9px;
	width:28px;
	cursor: pointer;
}

 

■XHTML
ラコ

CSS　IE7ハック「*:first-child+html」

ラコ　2009-03-03　coment(0)　trackback(0)　2009:03:03:21:36:00

IE7だけにCSSを適用するハック「*:first-child+html」

 

■ソース

*:first-child+html #header { padding: 0 auto 0 ; }

ラコ

CSS　最優先させる !important

ラコ　2009-02-27　coment(0)　trackback(0)　2009:02:27:16:01:27

優先度の低いプロパティの後ろに『!important』を記述すると。
その値が最優先されます。

 

■ソース

body { margin: 50px !important ; }

ラコ

CSS　inputボタンを画像にする

ラコ　2009-02-24　coment(0)　trackback(0)　2009:02:24:09:58:22


inputボタンにtype="image"を使って送信ボタンを作成する方法がありますが、
これだとそのボタンのx,y座標がGET値で送信されてしまいます。
それを回避したい場合はCSSを使いinputボタンの背景に画像を指定します。
valueの値は背景画像の上に表示されるので空にします。
→サンプル

 

■type="image"

<form>
      <input type="image" alt="送信" width="100" height="35" value="" src="img/img_btn.gif" />
</form>

 

■CSS

#image-button {
      border: 0px;
      width: 100px;
      height: 35px;
      background: url(img/img_btn.gif) left top no-repeat;
}

<form>
      <input type="submit" value="" id="image-button" />
</form>

ラコ

CSS　ロールオーバー

ラコ　2009-02-18　coment(0)　trackback(0)　2009:02:18:21:45:31

CSSで簡単にロールオーバーを実現。

オンマウス時に画像を半透明にする方法。

→サンプル

 

■ソース

a:hover img {
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
}

1  2
  • STG PROJECT 本格始動
  • RPG PROJECT

RSS