カテゴリー: CSS

http://www.will-hp.com/wpblog/web/72/
つかったのはこっち

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

http://shirasaka.tv/434

@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.8;/*透明度80%*/
 }
}
.blinking{
-webkit-animation-name: pulse;/* 実行する名前 */
-webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */
-webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

.rainbow {
  background: -moz-linear-gradient(left,
    rgba(255,0,0,0.2),
    rgba(255,69,0,0.2),
    rgba(255,255,0,0.2),
    rgba(0,128,0,0.2),
    rgba(0,0,255,0.2),
    rgba(75,0,130,0.2),
    rgba(238,130,238,0.2)
  );
  background: -webkit-gradient(linear, left center, right center,
    from(rgba(255,0,0,0.2)),
    color-stop(14%, rgba(255,69,0,0.2)),
    color-stop(28%, rgba(255,255,0,0.2)),
    color-stop(42%, rgba(0,128,0,0.2)),
    color-stop(56%, rgba(0,0,255,0.2)),
    color-stop(70%, rgba(75,0,130,0.2)),
    to(rgba(238,130,238,0.2))
  );
}

ちょい薄い
はっきり　こいつに　テキストシャドー足す

.rainbow {
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet)); }

.text_shadow{	
	text-shadow: #000000 1px 1px 3px; /* FireFox, Webkit, Opera */
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)"; /* IE8 */
display:block; /* IE */
}

いま３

background: linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet);

http://weblightenment.com/%E7%96%91%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9first-child%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84%E6%99%82%E3%81%AE%E8%A7%A3%E6%B1%BA%E6%B3%95/

<div>
<h2>見出し</h2>
<section>
テキストテキストテキスト
</section>
<section>
テキストテキストテキスト
</section>
</div>
ここで私はdivに含まれている初めのsectionにだけmargin-rightを効かせたかった。
そこで私ははいつものように

div{overflow:hidden;}
div section{float:left;}
div section:first-child{margin-right;}
てな具合で記述した。
がしかし効かない。
ので調べてみると、first-childという疑似クラスは親要素（この場合div）の一番初めに記述されているのが、h2なのでsectionタグは一番初めのタグではないから効かないということらしい。

ではこの場合どうしたらよいか。。。

隣接セレクタを使う

つまり

div>h2+section{margin-right:10px;}
とする。これでdivの子要素でh2の次のsectionタグを指定したことになる。

ちなみにsectionタグの次のsectionを指定したい時は

div>section+section{margin-right:10px;}
と記述する。

ちなみにこれらを教えてくれたのは

http://web-dd.net/?p=278

です。有難う。

疑似クラスにはまだまだいろいろなぞがありそうなので、今後より詳しく調べておこうと思う。

ＣＳＳ3の出現によって疑似クラスも増えたし。ただブラウザによって機能しないものがまだまだあるようだ。。。

ちなみにfirst-childもＩＥ6には対応していない。

ちなみに下のサイトいろいろ見やすくていい

http://w3g.jp/css/guide/pseudo