CSS3로 빠르고 쉽게 광선 효과를 추가하는 방법 배우기

강조를위한 웹 페이지 요소에 광선 추가

웹 페이지의 요소에 부드러운 외부 광선이 추가되어 요소가 뷰어에 눈에 띄게됩니다. CSS3 와 HTML을 사용하여 중요한 객체의 바깥 가장자리 주위에 광선을 적용합니다. 효과는 Photoshop의 객체에 추가 된 외부 광선과 비슷합니다.

먼저 빛을 낼 요소 만들기

광선 효과는 모든 색상 배경에서 수행 할 수 있지만 어두운 배경에서 가장 잘 보이는데, 그 이유는 광선이 더 밝게 보이기 때문입니다. 이 둥근 모서리의 사각형 상자 예제에서 DIV 요소는 검정색 배경이있는 다른 DIV 요소에 배치됩니다. 외부 DIV는 광선에는 필요하지 않지만 흰색 배경에는 광선이 보이지 않습니다.

DIV에게 빛의 종류 를주십시오 :


요소의 크기 및 색상 설정

글로우로 장식 할 요소를 선택한 후에는 배경색, 크기 및 글꼴과 같은 원하는 스타일추가하십시오 . 이 예제는 파란색 직사각형입니다. 크기는 147x90 픽셀로 설정됩니다. 배경색은 로얄 블루 # 1f5afe로 설정됩니다. 검은 색 컨테이너 요소의 중간에 요소를 배치하는 여백을 포함합니다.