웹 페이지의 요소에 부드러운 외부 광선이 추가되어 요소가 뷰어에 눈에 띄게됩니다. CSS3와 HTML을 사용하여 중요한 객체의 바깥 가장자리 주위에 광선을 적용합니다. 효과는 Photoshop의 객체에 추가 된 외부 광선과 비슷합니다.
먼저 빛을 낼 요소 만들기
광선 효과는 모든 색상 배경에서 수행 할 수 있지만 어두운 배경에서 가장 잘 보이는데, 그 이유는 광선이 더 밝게 보이기 때문입니다. 이 둥근 모서리의 사각형 상자 예제에서 DIV 요소는 검정색 배경이있는 다른 DIV 요소에 배치됩니다. 외부 DIV는 광선에는 필요하지 않지만 흰색 배경에는 광선이 보이지 않습니다.
DIV에게 빛의 종류를주십시오 :
요소의 크기 및 색상 설정
글로우로 장식 할 요소를 선택한 후에는 배경색, 크기 및 글꼴과 같은 원하는 스타일을 추가하십시오. 이 예제는 파란색 직사각형입니다. 크기는 147x90 픽셀로 설정됩니다. 배경색은 로얄 블루 # 1f5afe로 설정됩니다. 검은 색 컨테이너 요소의 중간에 요소를 배치하는 여백을 포함합니다.
코너 라운드
CSS3에서는 둥근 모서리가있는 직사각형을 쉽게 만들 수 있습니다. 글로우 클래스에 border-radius 스타일 속성을 추가하십시오. 최고의 호환성을 위해 -webkit- 및 -moz- 접두어를 사용하십시오.
-webkit-border-radius : 15px;-moz-border-radius : 15px;border-radius : 15px; 상자 그림자로 광선 추가
글로우 자체는 상자 그림자로 생성됩니다. 전체 요소를 후광 처리하고 그림자처럼 한쪽면에서 광선을 투사하지 않으려면 가로 및 세로 길이를 0px로 설정합니다. 이 예제에서 흐림 반경은 15px로 설정되고 흐림 효과의 분산은 5px이지만 이러한 설정을 사용하여 빛이 얼마나 넓고 확산되는지 결정할 수 있습니다. 색상 rgb (255,255,190)는 RGBa 알파 투명도가 75 % -rgba (255,255,190, .75)로 설정된 노란색입니다. 프로젝트에 가장 적합한 광선 색상을 선택하십시오. 모서리를 반올림하는 것과 마찬가지로 최상의 호환성을 위해 브라우저 접두사 (-webkit- 및 -moz-)를 사용하는 것을 잊지 마십시오.
-webkit-box-shadow : 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-shadow : 0px 0px 15px 5px rgba (255, 255, 190, .75);상자 그림자 : 0px 0px 15px 5px rgba (255, 255, 190, .75); 빛나는 상자 테스트
하나 이상의 브라우저에서 빛나는 상자를 테스트하고 웹 페이지에 가장 적합한 광선 효과를주는 데 필요한 조정을하십시오.
