JJ Abrams 영화의 충성스러운 팬들은 영화의 절묘한 음모, 눈에 띄는 대화 및 상징적 인 모핑 렌즈 플레어 에 깊은 인상을 받아야합니다. Abrams와 같은 영화 제작자들은 렌즈 플레어를 영리하게 사용하여 영화에 "수제"사실감을 더합니다. 이 트릭은 Photoshop과 같은 도구에서 쉽게 복사 한 다음 웹 사이트에 래스터 이미지로 추가됩니다.
그러나 이미지 편집 도구를 사용 하지 않고 동일한 렌즈 플레어 효과를 얻으려면 어떻게해야합니까? 우리는 갤러리 이미지, 배경 사진 또는 사용자 아바타에 영화 텍스처를 추가하는 CSS 렌즈 플레어를 만들 수 있습니다.
사진에는 다양한 유형의 렌즈 플레어가 있습니다. 우리가 다루는 것은 카메라의 조리개 모양처럼 빛이 들어가서 반사되는 작은 지점을 남기는 아티팩트라는 현상입니다.
다음은 우리가 만들려는 렌즈 플레어의 훌륭한 예입니다. 자연스럽게 JJ Abrams 영화에서 스틸에서 직접 가져옵니다.
위의 렌즈 플레어에는 여러 부분이 포함되어 있습니다. 우리가 무엇을 목표로하고 있는지 알 수 있도록 그들을 나열합시다.
Halo 구성 요소에 해당하는 아래의 HTML 요소부터 시작하겠습니다. 대각선에서 벗어나는 중앙 광원과 2 개의 원형 후광, 3 개의 수평 렌즈 플레어 및 3 개의 원뿔형 광선과 같은 후광이 있습니다.
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
마지막으로, 렌즈 플레어가 이미지에 진정으로 겹쳐 지려면 중앙 광원을 조정할 수 있어야합니다. 이런 식으로 우리는 얼굴과 겹치지 않고 그림의 신뢰할 수있는 기존 광원에 배치 할 수 있습니다.
CSS 렌즈 플레어의 검은 색 배경과 중앙 광원부터 시작하겠습니다. 네트워크의 대부분의 그라디언트는 단색 전환이있는 선형 그라디언트이지만 알파 채널을 적용 할 수있어 실제로 빛나는 효과를 얻는 좋은 방법입니다. 여러 층의 반투명 색상의 원형 방사형 구배는 우리에게 좋은 카메라 센터 효과를 제공합니다.
배경 : 방사형 그레이드 ( 중앙에서 가장 가까운 원, HSL (4 5% 100% / 100%) 0%, HSL (4 5% 100% / 100%) 15%, HSL (4 10% 70% / 70%) 30%, HSL (4 0% 50% / 30%) 55%, HSL (4 0% 10% / 5%) 75%, 투명한 99% ); 필터 : 블러 (4px);
HSL 구문에 대해 궁금하십니까? 그것은 새롭고 모든 CSS 색상 기능에서 알파 투명성을 정의하는 미래 방향 인 것 같습니다.
우리는 여기서 CSS 블러 필터를 사용하여 그라디언트를 산란 된 라이트 레이어처럼 보이게합니다.
원형 후광을 추가하는 방법을 알았으므로 중앙에 45도 각도로 3 개의 추가 후광과 함께 광원 뒤에 더 큰 확산 후광을 추가하여 효과를보다 현실적으로 보이게합니다.
수평 후광부터 시작하겠습니다. 우리는 몇 가지 옵션을 취할 수 있으며 매우 날씬한 타원형 구배가 가장 쉬운 방법이 될 것입니다. 그러나 수평 렌즈 플레어는 일반적으로 참조 사진에서만큼 대칭이 아니라는 것을 알았으므로 렌즈 플레어도 약간 비대칭이 되었기를 바랍니다.
다행스럽게도, 방사형 구배는 CSS에서 선택적 위치 파라미터를 갖는다. 우리는 동일한 수평 후광의 약간 다른 크기로 두 개의 왼쪽과 오른쪽 절반을 만들고 약간 다른 색상을 사용할 수 있습니다. 또한 수평 후광이 중앙에 연결되는 영역을 덜 갑작스럽게 보이게하기 위해 불투명 필터를 추가 할 수 있습니다.
배경 : 방사형 그레이드 ( 중앙에서 가장 가까운 원, 투명한 50%, HSL (4 10% 70% / 40%) 90%, 투명 100% ); 필터 : 블러 (5px);
그건 그렇고, 다른 "현실"을 추가하기 위해 뷰포트 아래의 3/4을 추가하고 가느 다란 타원형베이스 후광 3/4을 추가해 봅시다.
방사형 후광과 수평 후광을 사용하면 광원에서 방출되는 경사 빛입니다. 추가 타원 방사형 구배를 추가 한 다음 컨테이너를 기울이고 번역하여 근사치를 얻을 수 있습니다. 그러나 우리는 또한이 작업을 위해 이미 준비된 CSS 그라디언트, 즉 테이퍼 그라디언트 도 있습니다. 다음은 컨테이너의 오른쪽 하단 모서리에서 5 도씩 오프셋되는 7도 테이퍼 그라디언트를 제공하는 예입니다.
배경 : conic-gradient ( 0% 100%에서 5deg에서 투명한 0DEG, HSL (4 10% 70% / 30%) 7deg, 투명한 15deg ); 변형-오리핀 : 왼쪽 하단; 변환 : 회전 (-45deg);
우리는 다양한 반투명 색상의 그라디언트 각도로 후광 중심을 중심으로 테이퍼 그라디언트를 추가합니다. 테이퍼 그라디언트는 컨테이너 DIV의 각도를 보여줄 수 있으므로 광원을 원점으로 사용하여 회전시켜 오프셋 확산 광 필터 효과를 초래합니다.
지금까지, 우리는 고정 된 위치에있는 반응 형이지만 정적으로 배치 된 렌즈 플레어 효과를 만들었습니다. 주변 수평 및 원추형 후광을 파괴하지 않고 렌즈 플레어의 중심을 조정하기가 어렵습니다.
CSS 렌즈를 조절 가능하고 덜 깨지기 쉬게하려면 커스텀 속성 세트를 통해 광원 플레어의 위치, 크기 및 색조를 노출시킵니다.
: 루트 {
-HUE : 4;
-렌즈 중심 크기 : 40%;
-렌즈 스프레드 크기 : 80%;
-왼쪽 : 55%;
-렌즈 탑 : 15%;
}그건 그렇고, 우리는 또한 후광 톤과 수평 후광 높이를 조정합니다. 수평 후광 너비의 경우 CSS 변수 Reload를 사용하여 개별적으로 조정할 수 있습니다.
.left-flare {
너비 : var (-Left-Flare-width, var (-렌즈 왼쪽, 50%));
}이것은 사진 배경을 사용하여 수행 된 CSS 렌즈 플레어 효과와 상향 이동 렌즈 플레어를 사용하여 광원 위치를 신뢰할 수있게합니다. 계속해서 자신의 사진을 추가하여 다른 환경에서 어떻게 작동하는지 확인하십시오!
물론 이것은 CSS 렌즈 플레어를 만드는 한 가지 방법 일뿐입니다. 나는이 접근법이 후광과 그 부분의 색상, 크기 및 위치가 유연하기 때문에 좋아합니다. 이것은 많은 환경에서 사용할 수있는 재사용 가능한 구성 요소와 비슷합니다.
Keith Grant에는 선형 그라디언트와 CSS 용 사용자 정의 속성을 사용하는 예가 있습니다. 그런 다음 HSLA 값을 무작위로 만들기 위해 JavaScript를 추가합니다.
Nicholas Guest에는 CSS 렌즈 플레어가 있습니다.이 플레어는 다음과 같은 렌즈 플레어가 있습니다.
이것은 캔버스로 만들어지며, 이는 호버링 할 때 광원이 마우스를 따르는 방법을 영리하게 보여 주며, 렌즈 플레어 아티팩트가 광원 위치가 바뀌는 위치를 어떻게 변화시키는지를 보여줍니다.
여기에 같은 아이디어 :
GSAP, 캔버스 및 js.lensflare라는 라이브러리를 사용하는 흥미로운 예가 있습니다.
CSS 렌즈 플레어 효과를 어떻게 처리 하시겠습니까? 의견에 당신의 생각을 공유하십시오!
위 내용은 밝은 터치를 위해 사진에 CSS 렌즈 플레어 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
