shirasakaBLOG

CSS3のanimationプロパティ使うと、なんでも点滅させることができます！
（現在、Chrome3以降、Safari4以降でしかサポートされていません）

とりあえず、CSSファイルに、下記ソースをコピペしてみましょう。

@-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; /* 実行までの待ち時間 */
}

 
あとは、html内の点滅させたいタグに、class=”blinking”を追加するだけです！
上の例でいうと、透明度100％と80％間を0.3秒間隔で、いったりきたりします。

class=”blinking” を追加するだけなので、いろんなものを点滅させることができますよ！

<div class="blinking">ふつうの文字も</div>

<div class="blinking"><a href="#">リンクの文字も</a></div>

 
画像も！

<div class="blinking"><img src="/wp-content/uploads/2010/05/sho_icon_normal.png"  /></div>

 
animationプロパティ未対応ブラウザでは、
点滅されずに普通に表示されるだけになります。

時間や透明度など、数値を変えるだけで色々雰囲気の違う
アクションをさせることができますよ！　ぜひお試しください！

文字を選択したときの、背景色って、
普通はブルーですよね？

デフォルトだとこんなかんじです。

この背景色を、変更するCSSをご紹介します。

/*反転時の文字色・背景色 */
::selection {
background: #F8E6AF;　　/* 背景色*/
color:#666666;　　/* 文字色*/
}
/* Firefox対応*/
::-moz-selection {
background: #F8E6AF;　　/* 背景色*/
color:#666666; 　　/* 文字色*/
}

 
CSS3をサポートしたブラウザ以外は無視されます。
IEとかIEとか、あとIEとかでは見れないので、気をつけてください。（あと、IEもネ！）

早速、このブログにも導入してみました。

うん、イイかんじ！
上の赤字の部分をコピーして、CSSに追加すれだけで反映されるので、
ブログ等にも簡単に導入できます。ぜひ、試してみてください！