CSS3(132)

132follower
goto_jp さんのアバター 403views

CSS3:フキダシを作る

まず表示サンプルはこちら。http://jsdo.it/goto_jp/awLv HTMLは下記のようにごくシンプルに。 <div class="fukidashi">ふきだしです。</div>... 2014年2月6日
goto_jp さんのアバター 3,697views

CSS3:矢印をつくる

まず表示サンプルはこちら。http://jsdo.it/goto_jp/d6t7 下記のただのdivがあるとします。 <div class="arrow"></div> 下記CSSでクラス「... 2014年2月5日
goto_jp さんのアバター 7,773views

CSS3:アニメーション(animation)で回転させる

以前「transition」を紹介しましたが、それと近いようで違う「animation」があります。transition は開始と終了を定義するだけの簡易的なものですが、 animation はより細かく動きを設定することができます。 ま... 2014年2月4日
goto_jp さんのアバター 1,956views

CSS3:CSSだけで作るタブUI

本題に入る前に簡単な基礎から。下記のHTMLを前提とします。 <ul class="list"> <li><input name="r" id="r1&q... 2014年2月3日
goto_jp さんのアバター 6,030views

CSS3:CSSだけで作るドロワーメニュー

CSS3の checked セレクタと隣接セレクタ(+)を活用することで、CSSだけで下記サンプルのようなメニューが作れます。 http://jsdo.it/goto_jp/2NnW 大雑把には下記のHTML構成を前提とします。 &l... 2014年1月28日
goto_jp さんのアバター 1,257views

CSS3:アニメーション透過処理の注意点

CSS3アニメーションで透過処理をする場合、「opacity」を使います。 .box { background:#09c; opacity: 1; transition: 0.5s ease-in-out; -webkit... 2014年1月27日
goto_jp さんのアバター 689views

CSS3:transitionでアニメーション効果を出す

CSS3で「transition」が加わったおかげで、簡易的なアニメーションがCSSのみで出来るようになりました。 a .box { background: #ff6666; transition: 0.3s ease-in-ou... 2014年1月23日
goto_jp さんのアバター 1,030views

CSS3:奇数・偶数番目の要素を指定する。

CSS3の「nth-child」セレクタを使います。 .dataTable tr:nth-child(even) {~} //偶数番目のtrを指定 .dataTable tr:nth-child(odd) {~} //奇数番目のtr... 2014年1月22日
goto_jp さんのアバター 231views

CSS3:属性セレクタを使う

属性セレクタはHTML全ての要素を対象に、条件に一致する要素へスタイルを適用できます。 input[type="radio"] {~} 上記のようにフォームパーツのタイプごとにスタイル設定するのはCSS2時代から使え... 2014年1月21日
goto_jp さんのアバター 366views

CSS3:checkedセレクタを使う

「checked」はチェックボックスとラジオボタンで使えるCSS3のセレクタです。 input[type=radio]:checked { ~ } ラジオボタン単体だけへのスタイル指定ではあまり使い道がありませんが、下記のように隣接... 2014年1月20日
Yukimi Sato さんのアバター 339views

IEでCSS3のグラデーションを無効にする

filter:progid:DXImageTransform.Microsoft.gradient(enabled = false); 打ち消しなどで後からグラデーションがいらなくなった時に。 ... 2013年12月20日
Yukimi Sato さんのアバター 261views

IEでCSS3のグラデーションを実装する

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff4D4D4D'... 2013年12月19日