CSSで流用出来るパーツを集めています（css tips）

2016/6/17 2017/2/24 css

随時更新記事です。

見出し

1 スタイルTips
- 1.1 セリフ吹き出しの下の▼の部分のスタイル
- 1.2 リストなどを奇数偶数で分けたい場合のスタイル
2 jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法
3 CSSで透過を子要素に継承させないようにする方法
4 jQueryでウインドウのスクロールやリサイズが終わった時だけ処理する方法
5 その他
- 5.1 ブラウザ対応状況確認

スタイルTips

セリフ吹き出しの下の▼の部分のスタイル

吹き出しで会話形式にしたい時、h1やh2を吹き出しにしたい時。

borderの三角になる箇所と透明色と重ねて表示でなんとか再現可能。

http://coding-factory.com/cm/cm72.html

リストなどを奇数偶数で分けたい場合のスタイル

リスト番号の偶数奇数で色を分けたり、clear:bothしたりする際に使い分ける。

 /* 奇数 */
 .test_class:nth-child(odd) {
 background-color:#FFCCCC;
 clear:both;
 }
 /* 偶数 */
 .test_class:nth-child(even) {
 background-color:#CCFFCC;
 clear:both;
 }

/* 奇数 */

.test_class:nth-child(odd) {

background-color:#FFCCCC;

clear:both;

}

/* 偶数 */

.test_class:nth-child(even) {

background-color:#CCFFCC;

clear:both;

}

http://weboook.blog22.fc2.com/blog-entry-285.html

http://www.htmq.com/selector/nth-child.shtml

jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法

http://mae.chab.in/archives/2699

CSSで透過を子要素に継承させないようにする方法

http://www.hp-stylelink.com/news/2014/02/20140206.php

jQueryでウインドウのスクロールやリサイズが終わった時だけ処理する方法

http://www.web-labo.jp/archives/963

その他

ブラウザ対応状況確認

こちらのサイトで確認可能。

http://caniuse.com/