CSS3(126)

126follower
goto_jp さんのアバター 255views

CSS3:ロードアイコンパターン11

表示サンプルはこちら。http://jsdo.it/goto_jp/cklF HTMLはこちら。 <span class='icon11'></span> Sassの記述は下記になります。 ... 2014年3月10日
goto_jp さんのアバター 229views

CSS3:ロードアイコンパターン10

表示サンプルはこちら。http://jsdo.it/goto_jp/2zIq HTMLはこちら。 <span class='icon10'></span> Sassの記述は下記になります。 ... 2014年3月7日
goto_jp さんのアバター 298views

CSS3:ロードアイコンパターン9

表示サンプルはこちら。http://jsdo.it/goto_jp/m5MY HTMLはこちら。 <span class='icon9'></span> Sassの記述は下記になります。 ... 2014年3月6日
goto_jp さんのアバター 224views

CSS3:ロードアイコンパターン8

表示サンプルはこちら。http://jsdo.it/goto_jp/e0Co HTMLはこちら。 <span class='icon8'></span> Sassの記述は下記になります。 ... 2014年3月5日
goto_jp さんのアバター 425views

CSS3:ロードアイコンパターン7

表示サンプルはこちら。http://jsdo.it/goto_jp/xYoE HTMLはこちら。 <span class='icon7'></span> Sassの記述は下記になります。 ... 2014年3月3日
goto_jp さんのアバター 304views

CSS3:ロードアイコンパターン6

表示サンプルはこちら。http://jsdo.it/goto_jp/a49C HTMLはこちら。 <span class='icon6'></span> Sassの記述は下記になります。 ... 2014年2月28日
goto_jp さんのアバター 281views

CSS3:ロードアイコンパターン5

表示サンプルはこちら。http://jsdo.it/goto_jp/bZ9l HTMLはこちら。 <span class='icon5'></span> Sassの記述は下記になります。 ... 2014年2月27日
goto_jp さんのアバター 353views

CSS3:ロードアイコンパターン4

表示サンプルはこちら。http://jsdo.it/goto_jp/7wez HTMLはこちら。 <span class='icon4'></span> Sassの記述は下記になります。 ... 2014年2月26日
goto_jp さんのアバター 344views

CSS3:ロードアイコンパターン3

表示サンプルはこちら。http://jsdo.it/goto_jp/ifIQ HTMLは下記のみです。 <span class='icon3'></span> Sassの記述は下記になります... 2014年2月25日
goto_jp さんのアバター 260views

CSS3:ロードアイコンパターン2

表示サンプルはこちら。IEは10以上で正常表示可能。http://jsdo.it/goto_jp/drYc HTMLは下記のみです。 <span class='icon2'></span> ... 2014年2月21日
goto_jp さんのアバター 328views

CSS3:ロードアイコンパターン1

表示サンプルはこちら。IEは10以上で正常表示可能。http://jsdo.it/goto_jp/xVRa HTMLは下記のみです。 <span class='icon'></span> S... 2014年2月19日
Yukimi Sato さんのアバター 187views

各ブラウザ対応border-box

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: borde... 2014年2月17日
goto_jp さんのアバター 455views

CSS3:before、afterセレクタとcontent

beforeとafterセレクタは、その名の通り設定した要素の前後にスタイルを定義するセレクタです。 表示サンプルはこちら。http://jsdo.it/goto_jp/iHdW サンプルのHTML <p class="... 2014年2月12日
goto_jp さんのアバター 18,071views

CSS3:CSSだけでアコーディオンメニュー

表示サンプルはこちら。http://jsdo.it/goto_jp/pdzy リストリンクをメニューにしてますが、開閉させるだけなら実はCSS3は必要ありません。 ポイントとしては下記のようにサブメニューの<li>のサイズを... 2014年2月7日
goto_jp さんのアバター 395views

CSS3:フキダシを作る

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

CSS3:矢印をつくる

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

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

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

CSS3:CSSだけで作るタブUI

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

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

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

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

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