CSS3 Border-Image 속성으로 멋진 사진 만들기!
테두리 만들기는 전혀 새로운 기능이 아닙니다. HTML & CSS; 우리는 처음부터 국경을 추가 할 수있었습니다. 단단한 테두리, 점선 테두리, 점선 테두리 등을 잘 알고있을 것입니다..
그러나 새로운 CSS3 border-image 속성을 사용하면 HTML 요소에 테두리를 만드는 것이 더 발전되고 있습니다. 음, 간단하게 말하면, 우리는 더 매력적인 테두리를 추가 할 수있는 소스로 이미지를 사용하여 테두리를 추가 할 수 있습니다. 좋아, 이제이 부동산이 어떻게 작동하는지 보자..
구문 및 브라우저 지원
CSS3의 테두리 이미지는 다음과 같은 약식 구문을 사용하여 정의됩니다.
border-image : [이미지 소스] [slice] [width] [outset] [repeat];
위의 구문은 Chrome에서만 지원되는 W3C의 공식 버전이며 Opera, Firefox 및 Safari는 여전히 프리픽스로 표시된 버전을 필요로합니다.-영형-, -모즈-, -웹킷-), Internet Explorer는 놀라 울 정도로이 속성을 전혀 지원하지 않습니다.
또한, [폭] 그리고 [시초] 이 값 국경 이미지 속성은 모든 브라우저에서 아직 지원되지 않지만 width 값은 국경 너비 재산.
즉, 간단히 말해서 현재로서는 [이미지 소스], [일부분] 과 [반복] .
border-image : [이미지 소스] [슬라이스] [반복];
이미지 조각
이 속성을 설명하기 전에, “이미지 조각” 먼저 속성을 선언 할 때 새로운 점이 있습니다. 여기에있는 이미지 슬라이스는 이미지 가장자리의 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 각각 시작점을 취하는 이미지의 컷을 정의합니다. 이미지 가장자리는 다음 이미지와 같이 이미지를 9 개의 섹션으로 또한 나눕니다..
위 이미지에서 섹션을 볼 수 있습니다. 1, 삼, 7 과 9 국경의 모서리가 될 것이며, 2, 4, 6 과 8 가장자리가 될 섹션이 반복 가능하거나 신축성이 있는지 확인하여 테두리 가장자리 또는 선이됩니다..
슬라이스 값은 a로 선언 할 수 있습니다. 화소 단위 또는 백분율 (%) 유연한 측정을위한 장치.
더 많은 참조 :
- CSS 배경 및 경계 레벨 3
사진 프레임 만들기
이제 실제 예제에서 속성을 보여 드리겠습니다..
이번에는 국경 이미지 속성을 사용하여 사진 프레임을 만들고 아래 이미지를 소스로 사용합니다. 우리는 신중하게 이미지를 측정하여 콘텐츠 너비와 높이에 관계없이 적절히 슬라이스, 반복 및 늘릴 수 있습니다..
노트 : 이 링크에서 위 이미지를 다운로드 할 수 있습니다..
또한,이 데모에서 우리는이 멋진 Cinemagraph를 From Me to You로 사용합니다.
(이미지 출처 : Me To You)
마크 업
마크 업은 다음과 같이 간단합니다.
교체하는 것을 잊지 마세요. images_2 / css3-border-image-property-making-photos-really-cool_3.jpg 나만의 사진으로.
스타일
그런 다음 프레임을 사용하여 국경 이미지.
위 이미지를 보면 이미지 너비는 180px 전체적으로. 이 값은 다음과 같이 나눌 수 있습니다. 6 각 부서는 30px; 그래서 우리는 이미지를 30px.
슬라이스에 길이 값을 사용하는 경우 픽셀 단위로 자동 변환됩니다. 화소, 하지만 백분율을 사용하기로 결정했다면 (%).
이미지 반복은 기본값을 사용합니다. 반복. 또는 뻗기 국경 이미지가 여전히 고 상할 것입니다. 걱정하지 마십시오..
img border-image : url ( "images / frame.png") 30 반복; -o-border-image : url ( "images / frame.png") 30 반복; -moz-border-image : url ( "images / frame.png") 30 반복; -webkit-border-image : url ( "images / frame.png") 30 반복; border-width : 30px;
또한 브라우저 창 중앙에 이미지를 배치하고 문서에 배경 텍스처를 추가하여 더욱 매력적인 이미지로 만들려고합니다..
html background : url ( 'images / lightpaperfibers.png'); .wrapper margin : 20px auto; 높이 : 476px; 너비 : 675px; 텍스트 정렬 : 가운데;
좋아, 이제 끝났다고 생각해. 이제 브라우저에서 보자..
- 데모
- 소스 다운로드
호그와트에서 마법의 그림을보고있는 것처럼 느껴 집니까??
최종 생각
이 국경 이미지 의심 할 여지없이 CSS3 제품군에 추가되었습니다. 우리는 더 이상 단순한 평범한 경계에 국한되지 않습니다..
그리고이 포스트에서 우리는 내용이나이 경우 사진의 크기 (너비와 높이)에 대해 걱정하지 않고 이미지 프레임을 만드는 방법을 보여 줬습니다. 테두리 소스가 반복 가능하거나 늘릴 수있는 한 높이와 너비는 유연 할 수 있습니다..
마지막으로, 아직 조금 혼란 스럽다면 국경 이미지, 당신이 더 쉽게 만들 수 있도록 도와주는 도구가 있습니다 : border image tool
