상자 그림자로 CSS 전용 오버레이 효과를하는 방법
콘텐츠 오버레이 현대 웹 디자인의 중요한 부분입니다. 그들은 당신을 돕는다. 요소 숨기기 웹 페이지 및 나중에 - 사용자의 승인을 받아 - 그것을 드러내다, 뒤에있는 버튼과 같은 추가 정보 또는 컨트롤을 표시합니다..
일반적인 오버레이는 반투명의, ~와 단색 배경색 (보통 검은 색), 사용자가 보거나 상호 작용할 수있는 텍스트 또는 버튼이 있습니다. 상호 작용 (클릭 또는 호버링)이 발생하면 오버레이 삭제되고 내용이 공개됩니다. 그것 밑에.
이 기사에서 우리는 이미지에 컬러 오버레이 추가 순수한 CSS를 사용하여. 아래의 데모에서 최종 결과를 볼 수 있습니다. 오버레이가 포켓몬을 드러내도록 이미지를 가져옵니다. 이 게시물은 이미지에 대해 설명하지만 이미지가 제공하는 기술은 텍스트 블록과 같은 다른 내용 유형에도 안전하게 적용될 수 있습니다..
추가 HTML 요소 추가 방지
오버레이는 추가 HTML 요소 배치 ~와 불투명 1보다 작은 값 덮을 요소 바로 위. 문제는이 기술이 특별한 오버레이의 요소 (또는 의사 요소).
당신이 HTML 크기의 페달 틱이 아니라면, 오버레이에 대한 추가 요소를 갖는 것이 아마도 큰 문제가되지 않을 것입니다. 대부분의 네트워크의 대역폭에 그다지 세금을 부과하지 않기 때문입니다. 그러나 갈라진 요소 및 해당 오버레이에 대한 스타일 규칙은 여전히 CSS 가독성 및 유지 보수성에 해를 미친다..
코드를 순서대로 유지하고 HTML 개요를 엉망으로 만들지 않으려면 CSS 전용 솔루션을 사용하는 것이 더 좋습니다.
다음과 함께 오버레이 만들기 상자 그림자
그렇다면 어떻게 실제로 CSS 전용 오버레이를 만들 수 있습니까? 의 도움으로 상자 그림자 CSS 속성. 상자 그림자는이 작업에 이상적입니다. 오버레이 란 무엇인가요? 요소 위에 던져진 어두운 그림자?
박스 섀도우에는 속성 값이 있습니다. 삽입하다, 그림자가 나타납니다. 상자 틀의 안쪽으로.
그림자 크기가 요소의 너비와 높이의 절반 이상 또는 절반 이상인 삽입 된 상자 그림자는 는 완전한 요소.
.상자 너비 : 200px; 높이 : 200px; 상자 그림자 : 녹색 0 0 0 100px 삽입;
일반적으로 오버레이 이후 투명성이있다., 상자 그림자에 추가해야합니다. 이것은 다음을 사용하여 수행 할 수 있습니다. rgba () 그림자 색상 함수.
그만큼 rgb rgba의 부분은 빨강, 녹색 및 파랑 색 채널 값을 나타내며, 에이 는 알파 채널, 그것은 투명성을 책임지고있는.
알파 채널의 경우 값 1은 불투명 한 색, 0은 완전히 투명한 색.
상자 그림자의 rgba 색상 값의 알파 채널에 0과 1 사이의 값을 할당하면 다음을 수행 할 수 있습니다. 반투명 오버레이 만들기.
데모 코드 만들기
우리 데모는 다른 포케몬의 이미지와 이름을 보여줄 것입니다. 여기에서는 데모에서 첫 번째 포켓몬 인 Bulbasaur에 대한 코드를 만들 것입니다. 다른 것들은 같은 방법으로 만들어집니다 (코데 픈에서는 코드도 확인할 수 있습니다).
HTML
HTML의 경우, 상자 만들기 CSS로 다른 모든 것을 추가 할 것입니다..
CSS
아래 CSS에서 .포켓몬 요소는 포켓몬 이미지를 표시하고 .포켓몬 :: 이후 의사 요소는 포켓몬의 이름을 가지고있다..
이후 상자 그림자 재산 여러 값을 가질 수있다. ~하기 위해서 그림자를 여러 개 렌더링한다., 오버레이 그림자 외에도 다른 회색 그림자를 .포켓몬 과 .포켓몬 : 공중 선회 미학을위한 요소.
/ * 포켓몬 사진 * / .pokemon 너비 : 200px; 높이 : 200px; / * 플렉스 박스를 사용하는 중앙 콘텐트 * / display : flex; justify-content : 센터; align-items : 센터; / * overlay * / box-shadow : 0 0 0 100px 삽입, 0 0 5px 회색; / * 호버 아웃 전환 * / 전환 : 상자 그림자 1s; / * 포켓몬 이름 * / .pokemon :: after width : 80 %; 높이 : 80 %; 디스플레이 : 블록; 글꼴 : 16pt 'bookman old syle'; 색깔 : 백색; 테두리 : 2 픽셀 단색; 텍스트 정렬 : 가운데; / * 플렉스 박스를 사용하는 중앙 콘텐트 * / display : flex; justify-content : 센터; align-items : 센터; / * hover out transition * / transition : 불투명도 1s .5s; / * 호버 위에 포켓몬 그림을 드러낸다. * / .pokemon : hover transition : box-shadow 1s; 상자 그림자 : 0 0 0 5px 삽입, 0 0 5px 회색, 0 0 10px 회색 삽입; / * 호버에 포켓몬 이름 숨기기 * / .pokemon : hover :: after transition : opacity .5s; 불투명도 : 0;
때 .포켓몬 요소들이 맴돌고, 상자 그림자가 뒤에있는 이미지를 드러내 기 위해 바뀔 필요가있다..
당신은 .포켓몬 : 공중 선회 selector가 오버레이를 제거하는 새 상자 그림자를 얻습니다. .포켓몬 : 호버 :: 후 선택기는 다음을 사용하여 포켓몬의 이름을 숨 깁니다. 불투명 재산.
당신은 또한 색상 값 부재 오버레이 상자 - .포켓몬 과 .포켓몬 : 공중 선회 스타일 규칙. 각 포켓몬의 오버레이 상자 그림자 색상을 지정해야합니다. 자신 만의 스타일 규칙으로, 서로 다르기 때문에.
같이 상자 그림자 수기가없는 속성, 그림자 색상을 설정할 수 없습니다. 개별적으로 ~ 같이, 상자 그림자 색상; 대신 - 우리는 색깔 재산.
기본적으로 사용자가 색깔 속성, 그 값은 테두리, 외곽선 및 상자 그림자 색상에 적용 게다가. 그래서, 당신은 단순히 색깔 상자 그림자에 색상을 추가하는 속성.
#bulbasaur background-image : url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * 상자 그림자 색상에 사용되는 색상 값 * / color : rgba (71, 121, 94, 0.9); #bulbasaur :: after / * 포켓몬 이름 * / 내용 : 'Bulbasaur';
오버레이 섀도우의 색상은 앞서 언급 한 rgba () 오버레이를 투명하게 만들기 위해 알파 값이 0.9 인 함수.
오버레이 상자 - 섀도우의 색상 외에도 위의 CSS는 각 포켓몬에 개별적인 규칙을 추가합니다. 배경 이미지 이름.
그게 전부입니다. 우리는 CSS 전용 컬러 이미지 오버레이를 사용할 준비가되었습니다. 아래의 펜에서 모든 포켓몬의 코드를 살펴보십시오..
