CSS3ですばやく簡単にグロー効果を追加する方法を学ぶ

重視のためにWebページ要素にグローを追加する

あなたのウェブページ上の要素に追加された柔らかい外側の光が、要素を見る者に目立つようにします。 CSS3とHTMLを使用して、重要なオブジェクトの外側の端にグローを適用します。 このエフェクトは、Photoshopのオブジェクトに追加された外側のグローと似ています。

最初に要素を作成してグローを作成する

グローの効果はどの色の背景でも行うことができますが、暗い背景で最もよく見えます。その理由は、グローがもっと光り輝くように見えるからです。 この丸い角の四角いボックスの例では、DIV要素は黒の背景を持つ別のDIV要素に配置されます。 外側のDIVはグローでは必要ありませんが、白い背景でグローを見るのは難しいです。

DIVに輝きのクラスを与える:


要素のサイズと色を設定する

グローを使用して装飾する要素を選択した後、背景色、サイズ、フォントなど、必要なスタイル追加してください。 この例は青い矩形です。 サイズは、147px x 90pxに設定されています。 背景色はロイヤルブルーの#1f5afeに設定されます。 これは、黒いコンテナ要素の中央に要素を配置するマージンを含みます。