HTML5의 모서리를 보존하면서 이미지 스트레칭

Question

다음 질문에 설명 된 효과를 얻으려고하지만 CSS를 사용하고 싶습니다. 어딘가에서 HTML5로이 작업을 수행 할 수 있지만 지금은 속성 이름을 찾을 수 없다는 것을 기억합니다.

Stretching an UIImage while preserving the corners

Answer 1

당신은 3 개 가지 다른 이미지를 사용해야합니다.

먼저 포토샵이나 김프 등으로 들어가서 화살표 이미지를 세 부분으로 나눕니다. 곡선이있는 왼쪽과 화살표 부분이있는 오른쪽. 그들을 3 가지 다른 이미지로 저장하십시오.

이미지를 받으면. 당신의 CSS에서

<img src="img-middle.jpg" /> 

전후 의사 요소에 스타일을 적용하고 뻗어 원하지 않는 두 이미지 비트를 추가 한 HTML 이미지 요소를 만듭니다.

img:before { 
    contents: ''; 
    background: url('img-left.jpg'); 
    height: 50px; 
    width: 20px; 
    position: absolute; 
    left: -20px; 
} 

img:after { 
    content: ''; 
    background: url('img-right.jpg'); 
    height: 50px; 
    width: 40px; 
    position: absolute; 
    right: -40px; 
} 

두 이미지 파일의 너비와 높이와 일치하도록 너비, 높이, 왼쪽 및 오른쪽 값을 변경했는지 확인하십시오. 이 CSS는 아무리 넓은 요소가 늘어 났더라도 이미지의이 비트가 왼쪽과 오른쪽에 추가되도록합니다. CSS는 단지 하나의 요소이기 때문에 멋지기 때문에 빈 콘텐츠의 요구 사항을 제외하면 CSS는 매우 깨끗합니다. 재산.

그러면 중간 이미지 요소를 동적으로 늘릴 수 있습니다. 화살표를 늘리고 요소의 너비를 애니메이션하는 jQuery를 사용하면 중간 부분이 늘어나고 모서리는 기술적으로 원래 요소의 일부가 아니기 때문에 그대로 유지됩니다. 그냥 추가됩니다.

ETA : objective-C 관련 게시물에 설명 된 방법에 관해서는 내가 들어 본 적이없는 약간의 웹킷 야간 빌드에 있지 않는 한 그런 이미지를 분해하는 CSS 속성은 없습니다. 여기서 당신의 선택은 다른 두면을 무너 뜨리는 것입니다. 이미지의 왼쪽과 오른쪽 부분을 스프라이트로 결합하여 background-position을 사용할 수도 있습니다. CSS 속성을 사용하여 이미지 비트를 선택하면 페이지로드 시간을 단축하기 위해 이미지 파일 요청을 2 개만 유지할 수 있습니다.

Answer 2

왼쪽 및 오른쪽 사이드 캡에 대해 요소를 만들고이 요소에 false 요소를 할당하고 width 속성에 적용된 CSS3 전환을 사용하여이 효과를 얻을 수 있습니다.

완료 방법을 설명하기 위해 working demo on jsFiddle을 설정했습니다. 이 데모에서는 배경색을 사용하지만 이미지도 사용할 수 있습니다 (가운데 요소에 대해 X 축을 따라 반복).

HTML5 rocks playground을 살펴보면 CSS3와 HTML5 (자연스럽게)의 힘을 보여주는 멋진 스 니펫을 발견 할 수 있으며 빠른 참조로 사용할 수 있습니다.