CSS가 3 단계로 기울어 진 용기를 만드는 방법

최근에 개인 포트폴리오를 업데이트했을 때 웹 사이트의 주요 레이아웃에서 슬래시 (/)를 시각적 요소로 사용하고 싶었습니다. CSS에서 기울어 진 컨테이너를 만드는 시도는 절대 시도하지 않았지만 언뜻보기에는 쉬운 것 같습니다. 그러나 더 깊이 파고 들으면 실제로 텍스트와 미디어를 지원하는 효과적인 CSS Bevel 컨테이너를 만들기 위해 매우 흥미로운 도전이있었습니다.

내 시험과 최종 결과는 다음과 같습니다.

먼저 텍스트가 자연스럽게 흐를 수있는 비류 용기의 예를 찾습니다. Adobe Illustrator 및 Microsoft Word와 같은 프로그램이 몇 년 동안이 작업을 수행하고 있기 때문에 이것이 CSS에서 구현 될 수 있다고 가정합니다.

1 단계 : 변환을 사용하여 CSS 베벨 컨테이너를 만듭니다

CSS 모양 모듈을 발견했는데, 이는 Shape Outside 속성을 사용하는 경우 간단한 텍스트 콘텐츠에 적합합니다. 텍스트를 완전히 정렬합니다. 그러나 콘텐츠가 컨테이너 내부에 스크롤 할 수는 없습니다. 따라서 사용자가 아래로 스크롤하면 전체 틸트 컨테이너가 왼쪽으로 이동하는 것처럼 보이며 이것이 내가 원하는 효과가 아닙니다. 대신, 나는 더 간단한 접근 방식을 취했는데, 이것은 컨테이너에 transform: skew() 추가하는 것입니다.

 .slant-container {
  변환 : Skew (14deg);
}

이것은 좋은 시작입니다! 컨테이너는 기울어지고 스크롤은 예상대로 작동하지만 순수한 CSS는 이미지의 크기 조정을 처리합니다. 그러나 명백한 문제는 텍스트와 이미지가 기울어 져서 내용을 읽기가 더 어려워지고 이미지가 왜곡된다는 것입니다.

2 단계 : 리버스 틸트 글꼴

CSS에서 텍스트와 이미지를 왜곡하는 문제를 해결하는 몇 가지 방법을 시도했지만 더 쉬운 솔루션이 나타났습니다. Fontforge를 사용하여 새 글꼴을 작성하여 텍스트의 왜곡을 뒤집습니다.

Fontforge는 오픈 소스 글꼴 편집기입니다. 웹 사이트의 주요 콘텐츠에 대한 Roboto Condensed Light를 선택 했으므로 .ttf 파일을 다운로드하여 Fontforge에서 열었습니다. 그곳에서 나는 모든 글리프를 선택하고 컨테이너의 CSS 변환으로 인한 틸트를 보상하기 위해 14deg 틸트를 적용했습니다. 새 글꼴 파일을 Roboto-Rev-italic.ttf로 저장하고 스타일 시트에서 호출합니다.

그게 다야. 글꼴은 이제 컨테이너 틸트와 같은 양으로 반대 방향으로 기울어 져서 이러한 효과를 상쇄하여 컨텐츠가 원래 사용한 일반 로봇 공간처럼 보이게합니다.

3 단계 : 이미지 및 비디오 최적화

이것은 텍스트에 매우 잘 작동합니다! 텍스트를 선택하는 기능도 정상입니다. 거기에서 컨테이너에 적용되는 값을 상쇄하기 위해 skew() 반전해야합니다.

 IMG,
동영상 {
  변환 : Skew (-14deg);
}

그래도 나는 이미지와 비디오를 여분의 div로 포장하게 만들었습니다. 이런 식으로 나는 그들에게 컨테이너와 완벽하게 일치하는 것처럼 보이는 멋진 배경을 줄 수 있습니다. 내가 한 일은 pseudo element ::after 틸트 컨테이너의 왼쪽과 오른쪽 가장자리를 넘어 배경을 사용하여 다음과 같이 연결하는 것입니다.

 IMG :: 이후,
비디오 :: 후 {
  콘텐츠: '';
  디스플레이 : 블록;
  배경 : RGBA (0, 0, 0, 0.5);
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
  너비 : 200%;
  높이 : 100%;
}

최종 데모

최종 데모는 다음과 같습니다.

나는 지금이 효과를 내 개인 웹 사이트에서 사용하고 있으며 지금까지 그것을 좋아했습니다. 그러나 비슷한 효과를 달성하기 위해 다른 방법을 시도해 보셨습니까? 비교할 수 있도록 의견에 알려주십시오!

위 내용은 CSS가 3 단계로 기울어 진 용기를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!