カテゴリー: CSS3

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

-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius:5px;

 -webkit-box-shadow: inset 0 0 5px 0 #ddd; /* Safari, Chrome用 */
  -moz-box-shadow: inset 0 0 5px 0 #ddd; /* Firefox用 */
  box-shadow: inset 0 0 5px 0 #ddd; /* CSS3 */

/*角とり　上だけ*/

.kado_ue_img{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

border-top-left-radius: 10px;
border-top-right-radius: 10px;}

http://micomura.hatenablog.jp/entry/2012/02/08/225523
http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html

http://shouken56.net/blog/practice/web/2301/

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script src="js/respond.src.js"></script>
<!--[if lt IE 9]> 
<script src="js/html5shiv-printshiv.js"></script>//これはhtml5に対応させる
<![endif]-->

http://shirasaka.tv/434

@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.1;/*透明度80%*/
 }
}


.d_navi_main_in ul li a:hover {
	-webkit-animation-name: pulse;/* 実行する名前 */
	-webkit-animation-duration: 0.1s;/* 0.3秒かけて実行 */
	-webkit-animation-iteration-count: 3;/* 何回実行するか。infiniteで無限 */
	-webkit-animation-timing-function: ease-in-out;/* イーズインアウト */
	-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
	-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
	color: #FFF;
	background-color: #666;
	background-image: url(../img/body_backgr/body_background_dark30.png);
	background-repeat: repeat;
}