테두리, 둥근 모서리, 그림자 추가.

카드에 프레임을 두르거나 사진 모서리를 둥글게 하거나 그림자로 상자를 페이지에서 들어 올립니다. 이 모든 설정은 요소의 스타일 패널에서 하며 호버 스타일 패널에서 호버 시 변경할 수 있습니다. 카드 하나를 돋보이게 할 때 사용합니다. 일련의 카드 전체에 같은 프레임을 적용하려면 공유 클래스로 통일합니다.

동영상은 아래 레시피를 따릅니다. 텍스트 블록을 테두리, 둥근 모서리, 호버 시 깊어지는 그림자가 있는 카드로 바꿉니다.

시작하기 전에

• DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 더보기가 있는 컨트롤 바가 표시됩니다. 빌더가 처음이면 첫 페이지를 참조하세요.
• 저장을 대화상자에서 클릭하면 변경이 에디터에 유지됩니다. 콘텐츠 위 빌더 툴바에서 저장을 클릭하면 페이지가 저장되고 "Saved field"가 표시됩니다.
• 하나만 강조합니다. 테두리나 그림자는 주요 날짜, 제안, 인용문으로 시선을 끕니다. 모든 곳에 적용하면 효과가 사라집니다.
• 일련의 카드를 통일합니다. 여러 카드에 같은 프레임을 적용하려면 카드 하나를 템플릿으로 저장하거나 공유 클래스를 사용합니다. HTML ID와 클래스를 참조하세요.
• 그림자 조정은 테마에 맡깁니다. 다섯 가지 드롭 섀도우 레벨은 사이트 전체에 한 번만 정의됩니다. 테마에서 레벨의 스타일을 다시 지정하면 해당 레벨을 사용하는 모든 요소에 적용됩니다.

레시피: 강조 카드

브랜드 색상의 얇은 테두리가 있는 부드러운 상자가 완성됩니다. 둥근 모서리와 호버 시 커지는 그림자가 있습니다.

1. 다음 텍스트 요소를 가리키고 더보기를 클릭한 뒤 설정을 엽니다.
2. 다음 스타일 패널을 엽니다. 박스 모델은 위쪽에 있습니다. 잠금 장치는 열린 상태로 시작하므로 안쪽 여백 옆의 잠금 장치를 클릭하여 닫으면 네 쪽이 함께 움직입니다.
3. 다음 안쪽 여백의 위쪽을 클릭하고 32를 입력한 뒤 Enter를 누릅니다. 네 쪽 모두 32px로 표시됩니다.
4. 연한 배경 색상을 선택합니다. 예를 들어 옅은 회색입니다.
5. 다음 테두리 스타일을 실선으로 설정합니다.
6. 다음 테두리 옆의 잠금 장치를 닫은 뒤 한쪽을 클릭하고 1을 입력한 뒤 Enter를 누릅니다.
7. 다음 테두리 색상을 선택하고 테두리 반경을 16으로, 드롭 섀도우를 3으로 설정합니다.
8. 다음 호버 스타일 패널을 열고 드롭 섀도우를 5로 설정합니다.
9. 대화상자에서 저장을 클릭한 뒤 툴바에서 저장을 클릭합니다.
10. 보기 메뉴(눈 아이콘)에서 미리보기를 선택하고 카드를 가리킵니다. 그림자가 깊어집니다.

표시 내용

카드에는 사용자 색상의 얇은 테두리, 둥근 모서리, 아래쪽의 부드러운 그림자가 있습니다. 미리보기에서는 포인터가 카드 위에 있는 동안 그림자가 깊어졌다가 벗어나면 원래대로 돌아옵니다.

테두리의 구성

테두리에는 세 가지 설정이 필요하며 패널에 분산되어 있습니다. 세 가지를 모두 설정합니다.

1. 테두리 스타일은 선을 선택합니다. 실선, 점선, 파선입니다. 테마 기본값에서는 대부분 요소에 테두리가 전혀 없습니다. 없음은 테마가 그리는 테두리를 제거합니다.
2. 박스 모델의 테두리 링은 각 쪽의 너비를 0~50px로 설정합니다. 비워 두면 브라우저가 약 3px의 자체 너비를 사용합니다.
3. 테두리 색상은 색상을 설정합니다. 비워 두면 테두리가 텍스트 색상을 사용합니다.

테두리 반경은 네 모서리를 0~100px로 둥글게 합니다. 배경과 그림자도 함께 둥글어집니다. 이미지에서는 사진 자체가 둥글어집니다.

원을 만들려면 요소를 정사각형으로 만듭니다. 그런 다음 테두리 반경을 너비의 절반 픽셀 값으로 설정합니다. 너비 200px 요소에는 100입니다. 더 넓은 요소에는 HTML 클래스에서 원형(50% 반경) 클래스를 추가합니다. 이미지에서는 이 클래스가 사진이 아니라 사진 주변 프레임을 둥글게 하므로 해당 위치에서는 테두리 반경을 사용합니다.

드롭 섀도우 레벨

이것이 기본 레벨입니다. 각 레벨은 페이지에 저장되는 값이 아니라 공유 스타일이므로 테마에서 사이트 전체의 레벨을 재조정할 수 있습니다. 테마 개발자 참고: 레벨은 CSS 변수 --dxb-box-shadow-1부터 --dxb-box-shadow-5입니다.

다음 호버 스타일 패널에서 드롭 섀도우는 포인터가 요소 위에 있는 동안의 레벨을 설정합니다. 새 그림자는 0.15초에 걸쳐 서서히 나타납니다. 호버 시 더 높은 레벨은 카드가 들려 보이는 효과를 줍니다.

HTML 클래스에서 더 많은 모양을 제공합니다. 들어 올린 드롭 섀도우, 올린 드롭 섀도우, 3D 그림자, 곡선 수평 드롭 섀도우입니다. Bootstrap의 작은 그림자, 기본 그림자, 큰 그림자도 있습니다. 요소마다 그림자 하나를 사용합니다. Bootstrap 그림자 클래스는 드롭 섀도우 슬라이더보다 우선합니다.

설정한 테두리, 모서리, 그림자가 표시되지 않는 경우

• 테두리가 표시되지 않습니다. 테두리 스타일이 테마 기본값 또는 없음에 있습니다. 실선, 점선, 파선 중 하나를 선택합니다.
• 테두리가 원하는 것보다 두껍습니다. 너비가 설정되지 않아 브라우저가 약 3px를 사용합니다. 박스 모델에서 테두리 쪽을 설정합니다.
• 테두리 색상이 잘못되었습니다. 비어 있는 테두리 색상은 텍스트 색상을 사용합니다. 테두리 색상을 선택합니다.
• 모서리가 각진 채로 있습니다. HTML 클래스의 둥근 모서리 없음(rounded-0) 같은 클래스나 !important가 있는 테마 규칙이 우선합니다. 해당 칩을 제거하거나 테마 규칙을 웹마스터에게 문의합니다.
• 모서리는 둥글어지지만 원이 되지 않습니다. 슬라이더는 100px에서 멈춥니다. 원형(50% 반경) 클래스를 사용합니다.
• 드롭 섀도우를 변경해도 바뀌지 않습니다. HTML 클래스의 큰 그림자 같은 Bootstrap 그림자 클래스가 우선합니다. 해당 칩을 제거합니다. 레벨 1은 희미하므로 테스트용으로 레벨 3을 사용해 봅니다.
• 호버 시 그림자가 커지지 않습니다. 스타일이 아니라 호버 스타일 패널에서 드롭 섀도우를 설정하고 기본 상태보다 높은 레벨을 선택합니다.
• 한쪽만 바뀌었습니다. 안쪽 여백 또는 테두리 옆의 잠금 장치가 열려 있었습니다. 닫고 값을 다시 입력합니다.
• 휴대폰에서는 호버 그림자가 표시되지 않습니다. 터치 화면에는 포인터가 없으므로 탭한 뒤에만 호버 모양이 표시됩니다.

다음 단계

• 간격. 테두리 안에서 콘텐츠에 여유를 줍니다.