CSS로 잘라낸 테두리 디자인을 만드는 방법
와 컷 아웃 경계 디자인 우리는 사용자에게 발견 할 수있는 것을 보여줄 수있다. HTML 요소의 테두리 영역 아래. 이 작업은 일반적으로 두 개 이상의 블록 요소를 겹침 (대부분의 경우 div) 다양한 크기의 서로 위에. 우선 이것은 쉬운 솔루션 인 것처럼 보이지만, 레이아웃을 여러 번 재사용하거나, 요소를 이동하거나, 모바일 디자인을 최적화하거나, 코드를 유지하고자 할 때 더욱 좌절감을 느낍니다..
이 글에서는 CSS를 사용하는 우아한 솔루션을 소개합니다. 하나의 HTML 요소 동일한 효과를 얻을 수 있습니다. 이 기법은 접근성을 높이기에도 좋습니다. CSS에 배경 이미지를로드합니다., HTML과 분리 된.
이 게시물의 끝 부분에서 테두리 영역에 배경 이미지를 표시한다. 창조하기 위하여 컷 아웃 경계 디자인 당신은 아래에서 볼 수 있습니다. 또한 디자인을 반응 적으로 만들 수있는 방법을 보여줄 것입니다. 뷰포트 단위 사용.
초기 코드
HTML 앞에서 유일한 요구 사항은 블록 요소:
우리는 재사용 크기 (너비 및 높이)와 테두리 너비 값은 div, 그래서 나는 그들을 소개하고있다. CSS 변수로. 변수 --w 는 폭 ~의 .CB 블록 요소, --h 그것의 신장, --비 를 위해 간다. 테두리 너비, 과 --b2 테두리 너비에 2를 곱한 값입니다. 나중에 마지막 변수.
나는 크기를 정하고있다. 단위 배경을 추가하고 테두리, 높이 및 너비를 설정하여 위 코드를 개선해 보겠습니다. 미리 정의 된 CSS 변수를 사용하여. 데모가 지금과 같이 보이게되는 방법은 다음과 같습니다. 우리는 배경 이미지가 필요합니다. 전체 지역을 덮다 배경 이미지에 고정 된 크기를 지정하려면 크기를 지정하여 테두리 영역을 덮을 수 있도록하십시오. 그만큼 배경 이미지의 너비 [ 유사하게, 배경 이미지의 높이 [ 이렇게하면 배경 이미지의 크기와 크기가 같은 영역으로 크기가 조정됩니다. 그만큼 노트 : 패딩을 이것이 바로 우리가 지금 가지고있는 것입니다 : 테두리 이미지 포함 영역을 배경 이미지로 덮었으므로 남아있는 것은 국경의 중앙 지역을 덮다. (국경 - 배타적 지역) 단색으로, 우리가 도달에 대한 값의 수평 그림자 Codepen 데모에서는 이미지 주위에 흰색 테두리가 보입니다. 유명한 트릭이있다. 상자 그림자를 사용하여 여러 테두리 만들기-우리는 같은 기술을 사용하여 하나 이상의 단색 테두리 추가 우리의 디자인에. 업데이트 됨 그만큼 마지막 Codepen 데모에서는 배경 이미지와 상자 그림자 색상에 대한 코드를 배치했습니다. 별도의 수업으로. 이것은 선택 과목, 원하는 경우 매우 유용 할 수 있습니다. 잘라낸 테두리 디자인의 레이아웃 재사용 여러 요소로 구성하고 각 요소에 대한 미학 (배경 이미지 + 색상)을 독립적으로 추가 할 수 있습니다. 나는 클래스를 추가했다. 이후 값을 설정하려면 치수가 모두 단위이기 때문에 노트 : 잊지 마라. 뷰포트 메타 태그 추가 모바일 페이지 용으로 최적화하기로 결정한 경우 HTML 페이지로.폭스 바겐 유닛 (원하는 경우 고정 유닛을 사용할 수 있음). .cb - w : 35vw; - h : 40vw; - b : 4vw; --b2 : calc (var (- b) * 2);
간략한 설명 -
폭스 바겐 과 VH 단위폭스 바겐 는 1/100일 뷰포트 너비의. 예를 들어, 50vw 뷰포트 너비의 50 부분입니다. 수직으로 100 등분으로 자른다., 동안 50vh 뷰포트 높이의 50 부분입니다. 수평으로 100 등분으로 슬라이스. .cb - w : 35vw; - h : 40vw; - b : 4vw; --b2 : calc (var (- b) * 2); 배경 : url (bg.jpg); border : var (-b) 단색 투명; 높이 : var (- h); 너비 : var (- w);
배경 이미지의 크기를 지정하십시오.
배경 가치 나는 그것을주고있다 : .cb - w : 35vw; - h : 40vw; - b : 4vw; --b2 : calc (var (- b) * 2); 배경 : url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border : var (-b) 단색 투명; 높이 : var (- h); 너비 : var (- w);
calc (var (- w) + var (- b2))]는 div의 너비 [var (- w)] 그리고 왼쪽 및 오른쪽 테두리의 너비 [var (-b2)].calc (var (-h) + var (-b2))]는 div의 높이 [var (- h)] 그리고 위쪽 및 아래쪽 테두리의 너비 [var (-b2)].div (국경 지역 포함).센터 예어 배경 이미지 정렬 의 중심에 div.div, 기억해 패딩 영역 포함 배경 크기와 마찬가지로 테두리 영역과 동일.
국경 전용 구역을 덮는다.
상자 그림자 삽입하다. .cb - w : 35vw; - h : 40vw; - b : 4vw; --b2 : calc (var (- b) * 2); 배경 : url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border : var (-b) 단색 투명; box-shadow : inset var (- w) 0 0 rgba (0,120,237, .5); 높이 : var (- h); 너비 : var (- w);
var (- w) 의 전체 너비를 div. 사용 rgba 색상 기능으로 일부 투명성 믹스에 추가 할 수 있지만 가운데 영역을 완전히 덮으려면 불투명 한 색상을 사용할 수도 있습니다.
추가 테두리를 추가하십시오.
상자 그림자상자 그림자 값 : .cb - w : 35vw; - h : 40vw; - b : 4vw; --b2 : calc (var (- b) * 2); 배경 : url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border : var (-b) 단색 투명; 상자 그림자 : inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) 흰색; 높이 : var (- h); 너비 : var (- w);
calc (var (-b) / 2) 함수는 경계 너비의 절반.
옵션 : 별도의 레이아웃 및 미학
.포스터 1 ~로 .poster1 --tbgc : rgba (0,120,237, .5); background-image : url ( "http://bit.ly/2eQBij2");
배경 속기 속성이다., 그것의 수기 특성은 개별적으로 재정의 / 설정 될 수있다.. 따라서 우리는 배경 이미지 ...에서 .포스터 1, 에서 URL 값을 제거하십시오. 배경 에있는 재산 .CB.상자 그림자, 우리는 사용할 수있다. 다른 CSS 변수. 그만큼 --tbgc 변하기 쉬운 색상 값을 보유하고있다. 우리는 box-shadow (데모에서 lightblue)를주고 싶다. .CB 우리 색상 값을 바꿉니다. 상자 그림자 재산 var (- tbgc). .cb - w : 35vw; - h : 40vw; - b : 4vw; --b2 : calc (var (- b) * 2); 배경 : center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border : var (-b) 단색 투명; 상자 그림자 : inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) 흰색; 높이 : var (- h); 너비 : var (- w);
세로 모드 용 코드
폭스 바겐, 그것은 너무 작게 보임 세로 모드 (높이에 비해 상대적으로 작은 폭)로 디자인을 볼 때 - 모든 모바일 장치가 기본적으로 표시됩니다. 이 문제를 해결하려면, 스위치 폭스 바겐 와 VH, 과 디자인 크기 조정 당신이 인물 모드에 적합한 것을 알기 때문에. @media (오리엔테이션 : 세로) .cb --w : 35vh; --h : 40vh; - b : 4vh;
