css 3 box-shadow発光効果

Twitterを使用したことがある場合は、入力ボックスがフォーカスを取得すると、枠が青色に発光する効果があることに気づいたかもしれません.ここではtransitionプロパティを使用して、発光効果がスムーズに移行します.このチュートリアルでは、box-shadowプロパティを使用してこのような効果を達成する方法について説明します.
CSSコードは以下の通り:input {
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
outline:none;
}ここではtransition属性を用いてinputボックスの変化を示す.また、safariとchromeのデフォルトのハイライトをoutlineプロパティで無効にする必要があります.ここでbox-shadowアトリビュートを使用する場合、シャドウ効果ではなく発光する効果を得るために明るい青を採用しています.同時にRGBAも使えますので、色の透明度をコントロールできます.コードは次のとおりです.input:focus {
border:#35a5e5 1px solid;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}はborder-radiusプロパティを使用してフィレット効果を同時に行うことができます.完全CSSコードは以下の通り:input {
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border: #35a5e5 1px solid;
border-radius: 4px;
outline: none;
}
input:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}