CSS의 슬라이딩 도어 기술

CSS에서 자주 논의되는 발전 사항은 배경 이미지를 쌓아서 서로 슬라이드하여 특수 효과를 만들 수 있는 기능입니다. CSS 2.0의 현재 규칙에 따르면 각 배경 이미지에는 자체 HTML 요소가 필요합니다. 대부분의 경우 일반적인 마크업은 이미 일반 인터페이스 구성 요소로 사용할 수 있는 다양한 요소를 제공합니다.

심플한 디자인으로 우리는 그것을 할 수 있습니다.

혁신은 어디에서 오는가?

내가 본 많은 CSS 기반 탐색 태그는 대부분 동일한 특성을 가지고 있습니다. 직사각형 색상 블록, 윤곽선일 수도 있고 현재 선택한 태그에 테두리가 없으며 마우스 포인터가 태그 위로 이동하면 태그 색상이 변경됩니다. 이것이 CSS가 우리에게 줄 수 있는 전부인가요? 일련의 작은 상자와 칙칙한 색상?

CSS가 널리 채택되기 전에는 탭 탐색 디자인에서 많은 혁신이 이루어졌습니다. 독창적인 형태, 전문적인 색상 혼합, 현실 세계의 다양한 물리적 인터페이스 모방. 그러나 이러한 디자인은 텍스트가 포함된 복잡하게 제작된 이미지에 너무 많이 의존하거나 중첩된 테이블에 패키지되어 있는 경우가 많습니다. 텍스트를 수정하거나 라벨 순서를 변경하려면 복잡한 프로세스가 필요합니다. 텍스트를 늘리는 것도 불가능하며, 그렇지 않으면 페이지 레이아웃에 큰 영향을 미칩니다.

텍스트 전용 탐색 모음은 텍스트를 이미지로 나타낸 탐색 모음보다 내구성이 뛰어나고 로드 속도가 더 빠릅니다. 마찬가지로, 시력이 약한 사람들을 위해 각 이미지에 Alt 속성을 추가할 수도 있습니다. 일반 텍스트의 크기를 자유롭게 조정할 수 있습니다. 당연히 CSS로 스타일이 지정된 일반 텍스트 기반 탐색 모음이 웹 디자인으로 돌아왔습니다. 그러나 대부분의 CSS 기반 탐색 모음 디자인은 아직까지 의미가 없습니다. 최근 채택된 기술(예: CSS)을 사용하면 앞서 언급한 테이블 및 이미지 태그의 효과를 잃지 않으면서 더 나은 작업을 수행할 수 있습니다.

슬라이딩 도어 기술

아름다운 장인정신, 정말 유연한 인터페이스 구성요소, 텍스트에 따른 적응형 크기 조정 기능을 통해 두 개의 독립적인 배경 이미지를 사용하여 만들 수 있습니다. 왼쪽에 하나, 오른쪽에 하나. 이 두 이미지를 다음 이미지와 같이 함께 미끄러지고 겹쳐서 더 좁은 공간을 차지하거나 서로 떨어져서 더 넓은 공간을 차지하는 두 개의 미닫이 문으로 생각해보세요.

이 모델에서는 하나의 이미지가 다른 이미지의 일부를 가립니다. 각 이미지 주위에 라벨의 둥근 모서리와 같은 고유한 콘텐츠를 배치한다고 가정해 보겠습니다. 위쪽 이미지가 아래쪽 이미지를 완전히 가리는 것을 원하지 않습니다. 이런 일이 발생하지 않도록 위의 이미지(이 예에서는 왼쪽 이미지)를 최대한 좁게 만들 수 있습니다. 하지만 라벨 한쪽 면의 고유성을 표시하려면 일정한 너비를 확보해야 합니다. 외부 모서리가 둥근 경우 위 이미지의 호 부분과 동일한 너비를 갖도록 제어해야 합니다.

대상의 크기가 커지고 위에 표시된 너비를 초과하는 경우 텍스트 크기 및 글꼴 변경으로 인해 이미지가 늘어나 보기 흉한 간격이 생성됩니다. 우리가 판단해야 할 것은 이 확장성이 어느 정도일지 예측하는 것이다. 브라우저에서 글꼴 크기를 변경하면 대상이 커지나요? 실질적으로 말하면 최소한 글꼴 크기를 300%로 늘리려면 추정해야 합니다. 배경 이미지도 이러한 성장을 수용해야 합니다. 위의 예에서는 아래쪽(오른쪽) 이미지를 400*150픽셀로 설정하고 위쪽 이미지를 9*150픽셀로 설정했습니다.

라벨이 늘어나면 이미지가 미끄러져 나가고 출입구가 더 넓어지며 이미지의 더 많은 부분이 드러납니다.

이 예에서는 기사 시작 부분에 표시된 대로 Photoshop에서 두 개의 부드럽고 얇은 3D 라벨 이미지를 만들었습니다. 우선, 현재 선택된 라벨을 표현하기 위해 내부는 밝고 테두리는 더 어둡습니다. 이 트릭 모델을 왼쪽과 오른쪽 이미지에 적용하려면 라벨 이미지가 덮는 영역을 확장하고 두 부분으로 잘라야 합니다.

"current"라는 레이블에도 동일한 접근 방식이 적용됩니다. 이 네 개의 이미지(1, 2, 3, 4)가 있으면 마크업과 CSS를 사용하여 라벨 만들기를 시작할 수 있습니다.

라벨의 생성

CSS를 사용하여 가로 목록을 만드는 방법을 살펴보면 동일한 행에 목록 항목을 정렬하는 데 최소한 두 가지 방법이 있다는 것을 알게 될 것입니다. 두 방법 모두 장점이 있지만 레이아웃으로 인한 혼란을 해결하려면 CSS가 필요합니다. 한 가지 방법은 인라인 상자를 사용하고 다른 방법은 부동 소수점을 사용합니다.

보다 일반적인 방법 중 하나는 모든 목록 항목을 인라인으로 표시하는 것입니다. 인라인 접근 방식의 장점은 단순성에 있습니다. 그러나 우리가 이야기하려는 슬라이딩 도어 기술의 경우 인라인 방식은 특정 브라우저에서 일부 해석 문제가 있습니다. 우리가 중점적으로 다룰 두 번째 방법은 부동 소수점을 사용하여 목록 항목을 같은 행에 정렬하는 것입니다. 실망스럽게도 겉보기에 모순되는 것처럼 보이는 float의 동작은 자연스러운 논리를 회피하는 일이 발생합니다. 그럼에도 불구하고 여러 부동 요소를 처리하는 방법과 안정적인 부동이 무엇을 의미하는지에 대한 기본적인 이해는 논의할 가치가 있습니다.

부동 요소 배열 문제를 해결하기 위해 다른 유형의 부동 요소를 사용할 것입니다. 이러한 방식으로 상위 요소는 하위 요소를 완전히 포함합니다. 따라서 라벨에 배경색과 배경 이미지를 추가할 수 있습니다. 라벨 바로 뒤에 오는 텍스트 요소는 CSS의 지우기 기능을 사용하여 부동 개체를 지운다는 점을 기억하는 것이 매우 중요합니다. 이렇게 하면 부동 레이블이 페이지의 다른 요소 위치에 영향을 미치는 것을 방지할 수 있습니다.

다음 마크업으로 시작합니다.

<div id="헤더">
<ul>
<li><a href="#">홈</a></li>
<li id="current"><a href="#">뉴스</a></li>
<li><a href="#">제품</a></li>
<li><a href="#">정보</a></li>
<li><a href="#">연락처</a></li>
</ul>
</div>

실제로 #header div에는 로고와 검색창이 포함될 수도 있습니다. 이 예에서는 앵커 체인의 각 하이퍼링크 값을 줄이고 싶습니다. 당연히 이 값에는 파일이나 디렉터리의 위치가 정확하게 포함되어야 합니다.

#header 컨테이너의 위치를 ​​지정하여 목록 디자인을 시작합니다. 이렇게 하면 컨테이너가 실제로 그 안에 떠 있는 목록 항목을 포함하는 컨테이너 역할을 하게 됩니다. 요소가 부동형이므로 너비를 100%로 선언해야 합니다. 임시 노란색 배경을 추가하여 상위 컨테이너가 레이블 뒤의 전체 영역을 완전히 채우도록 합니다. 마찬가지로, 균일한 스타일을 보장하기 위해 기본 텍스트 속성을 설정합니다.

#헤더 {
부동:왼쪽;
너비:100%;
배경:노란색;
글꼴 크기:93%;
줄 높이:일반;
}

이제 순서가 지정되지 않은 목록의 기본 여백/패딩 값을 0으로 설정하고 목록 항목 앞의 표시를 제거해야 합니다. 각 목록 항목은 왼쪽에 떠 있습니다.

#헤더 ul {
여백:0;
패딩:0;
목록 스타일:없음;
}
#헤더 리 {
부동:왼쪽;
여백:0;
패딩:0;
}블록 객체로 렌더링하도록 앵커 체인을 설정하면 걱정 없이 모든 스타일을 제어할 수 있습니다.

#헤더{
표시:블록;
}

다음으로 목록 항목 오른쪽에 배경 이미지를 추가합니다(변경 사항은 굵게 표시됨).

이제 왼쪽 이미지를 앵커 체인(컨테이너 내부 요소)의 왼쪽에 배치할 수 있습니다. 또한 레이블을 확대하고 레이블 가장자리에서 텍스트를 밀어내는 패딩을 추가합니다.

#헤더{
표시:블록;
배경:url("norm_left.gif")
반복되지 않는 왼쪽 상단;
패딩:5px 15px;
}

이런 식으로 우리는 효과 2를 얻습니다. 라벨의 모양이 어떻게 되는지 확인하세요. 여기서 IE5/Mac 사용자들은 "맙소사, 내 탭이 수직으로 쌓여 전체 화면으로 확장되어 있습니다!"라고 놀라실 것입니다. 걱정하지 마세요. 바로 해결하도록 도와드리겠습니다. 지금은 아래 단계를 따르거나, 편리하다면 임시로 다른 브라우저로 전환해 보세요. 그러면 IE5/Mac 버전의 문제는 즉시 해결될 것입니다.

이제 일반 라벨의 배경 이미지가 완성되었으므로 "현재" 라벨의 ​​이미지를 교체해야 합니다. id="current"와 앵커 체인을 대상 목록 항목에 추가하여 이를 달성합니다. 이미지 이외의 배경 모양을 변경할 필요가 없으므로 배경 이미지 기능을 사용합니다.

#header 컨테이너의 배경(원래 노란색 배경 대체)에 이미지를 배치하고, 배경 이미지를 아래쪽으로 이동한 후, 이미지 위의 빈 공간에 해당 배경색을 추가합니다. 동시에 body에서 상속된 패딩을 제거하고 ul의 위쪽, 왼쪽, 오른쪽에 10픽셀의 패딩을 추가합니다.

#헤더 {
부동:왼쪽;
너비:100%;
배경:#DAE0D2 url("bg.gif")
반복-x 하단;
글꼴 크기:93%;
줄 높이:일반;
}
#헤더 ul {
여백:0;
패딩:10px 10px 0;
목록 스타일:없음;
}

일반 앵커 체인의 하단 패딩 값을 1픽셀(5px-1px=4px)만큼 줄인 다음 빼낸 패딩을 "현재" 앵커 체인에 추가하여 이를 수행합니다.

마무리 작업

예리한 관찰자는 이전 예에서 흰색 라벨 모서리를 발견했을 수 있습니다. 이러한 불투명한 모서리는 아래 이미지가 위 이미지를 통해 표시되는 것을 방지하는 데 사용됩니다. 이론적으로는 레이블의 배경에 맞게 배경 이미지의 일부를 사용할 수 있습니다. 그러나 배경색을 이동하려고 하면 배경 이미지가 짧아집니다. 대신 라벨 모서리가 투명하도록 이미지를 변경하세요. 호가 앤티앨리어싱된 경우 가장자리 주변에 더욱 균일한 배경색을 사용합니다.

이제 모서리가 투명해졌으므로 왼쪽 이미지가 오른쪽 이미지 모서리를 통해 표시됩니다. 이를 보완하기 위해 왼쪽 이미지의 너비와 일치하는 양식 항목에 패딩(9px)을 추가합니다. 이제 양식 항목에 패딩을 추가했으므로 텍스트를 중앙에 배치하기 위해 동일한 너비를 제거해야 합니다(15px-9px=6px).

#헤더 리 {
부동:왼쪽;
배경:url("right.gif")
반복되지 않는 오른쪽 상단;
여백:0;
패딩:0 0 0 9px;
}
#헤더{
표시:블록;
배경:url("left.gif")
반복되지 않는 왼쪽 상단;
패딩:5px 15px 4px 6px;
}

아직 끝나지 않았습니다. 9픽셀의 패딩을 추가하면 왼쪽 이미지와 레이블 왼쪽 사이에 간격이 생기기 때문입니다. 이제 보이는 "출입구"의 왼쪽과 오른쪽 가장자리가 연결되었으므로 더 이상 왼쪽 이미지를 맨 위에 유지할 필요가 없습니다. 따라서 두 배경 이미지의 순서를 바꿔서 반대로 해보세요. 또한 "current" 태그에 사용된 두 이미지를 교체합니다.

#헤더 리 {
부동:왼쪽;
배경:url("left.gif")
반복되지 않는 왼쪽 상단;
여백:0;
패딩:0 0 0 9px;
}
#헤더 a, #헤더 강력, #헤더 범위 {
표시:블록;
배경:url("right.gif")
반복되지 않는 오른쪽 상단;
패딩:5px 15px 4px 6px;
}
#헤더 #현재 {
배경 이미지:url("left_on.gif");
}
#헤더 #현재 a {
배경 이미지:url("right_on.gif");
패딩 하단:5px;
}

이 작업을 완료하면 Effect 4에 도달합니다. 투명한 모서리로 인해 라벨 왼쪽에 클릭할 수 없는 영역이 생성됩니다. 이 영역은 텍스트 외부에 있지만 여전히 인지할 수 있습니다. 라벨 양면에 투명 이미지를 사용할 필요는 없습니다. 이 유효하지 않은 영역을 생성하지 않으려면 레이블 뒤의 색상을 사용한 다음 레이블 모서리의 투명 이미지를 이 색상으로 바꿔야 합니다. 이제 우리는 이 투명한 모서리를 유지합니다.

나머지 문제에서는 모든 변경을 한 번에 수행합니다. 레이블 텍스트를 더 무겁게 만들고, 일반 레이블의 텍스트를 갈색으로 변경하고, "현재" 레이블 텍스트를 어두운 회색으로 변경하고, 링크 밑줄을 제거합니다. , 마지막으로 호버 텍스트 색상을 동일한 어두운 회색 색상으로 변경했습니다. 일련의 변화를 거쳐 지금까지의 효과를 살펴보겠습니다 5.

일관된 솔루션
After Effect 2에서 우리가 인식한 한 가지 문제는 IE5/Mac 브라우징 모드에서 각 탭이 확장되어 브라우저의 전체 너비를 차지하므로 탭이 수직으로 함께 쌓인다는 것입니다. 이것은 우리가 원하는 것이 아닙니다.

대부분의 브라우저에서 플로팅 요소는 포함된 콘텐츠의 최소 크기로 축소됩니다. 부동 요소가 이미지를 포함하거나 이미지인 경우 이미지 너비로 축소됩니다. 텍스트만 포함된 경우 상단이 없는 가장 긴 텍스트의 너비로 축소됩니다.

자동 너비 블록 개체 요소가 부동 요소에 삽입되면 IE5/Mac의 이미지에서 문제가 발생합니다. 다른 브라우저는 여전히 부동 소수점을 최소화하고 컨테이너 내의 블록 요소를 무시합니다. 그러나 IE5/Mac은 이 동작을 따르지 않고 대신 부동 및 블록 개체 요소를 최대한 넓게 확장합니다. 이 문제를 해결하기 위해 앵커 체인을 동시에 플로팅하지만 다른 브라우저를 포기하지 않도록 IE5/Mac에만 해당됩니다. 먼저 앵커 체인에 대한 부동 규칙을 설정합니다. 그런 다음 백슬래시 주석 방법을 사용하여 이 규칙을 숨겨 IE5/Mac에만 적용되고 다른 브라우저는 무시합니다.

하나의 예에서 추론하기 우리는 일반 텍스트와 순서가 지정되지 않은 목록을 사용하여 약간의 스타일로 탐색 레이블을 만드는 슬라이딩 도어 기술을 연습했습니다. 로드 속도가 빠르고, 유지 관리가 가능하며, 모양을 망치지 않고 텍스트 크기를 크게 확장할 수 있습니다. 복잡한 스타일의 내비게이션 바를 만들 때 슬라이딩 도어 기술의 유연성을 반복할 필요는 없습니다.

생각하지 못할 일도 없고 할 수 없는 일도 없습니다. 최종 효과는 하나의 예를 보여 주지만 이것으로 우리의 디자인을 제한할 수는 없습니다.

어떤 경우에는 레이블이 반드시 대칭이 아닐 수도 있습니다. 저는 이 라벨의 두 번째 버전을 음영처리된 3D 스타일, 각진 모서리 및 독특한 왼쪽 부분으로 빠르게 만들었습니다. 두 번째 버전에 따르면 왼쪽 이미지와 오른쪽 이미지의 위치를 ​​바꿀 수도 있습니다. 이 상세한 레이아웃과 스마트 이미지 제어를 사용하면 세 번째 버전에서 볼 수 있듯이 버튼의 아래쪽 테두리를 제거하여 레이블 이미지가 배경에 더 잘 맞도록 할 수 있습니다. 브라우저가 여러 스타일 시트 간의 전환을 지원하는 경우 이를 사용하여 탐색 모음의 여러 버전 간에 자유롭게 전환할 수도 있습니다.

우리가 언급하지 않은 다른 효과도 많이 있습니다. 참고로 마우스 오버 시 텍스트 색상을 변경했지만 전체 이미지를 교체하여 더욱 흥미로운 변형 효과를 만들 수 있습니다. 마크업에 두 개의 중첩된 HTML 요소가 있더라도 CSS를 사용하면 아직 생각하지 못한 효과를 얻을 수 있습니다. 이 예에서 만든 것은 단지 수평 탭 표시줄이지만 슬라이딩 도어는 다른 많은 상황에서 사용될 수 있습니다. 어떻게 생각하나요?