CSS로 브라우저에서 콜라주 효과 생성

Jan 26, 2026

어떻게

당신이 원한다면 전통의 효과를 복제 할 수 있습니다. 콜라주 메이커 당신의 웹 사이트 레이아웃 , 이것은 당신을위한 튜토리얼입니다.

웹 디자인 자습서는 세 가지 CSS 속성을 볼 것입니다. 마스크 - 이미지 , 클립 경로 과 모양 외부 ...에 그들을 사용한 경우에도 걱정하지 마십시오. 나는 많은 웹 사이트에서 보지 못했을 것도 아마도 효과를 창출하는 데 도움이되는 예제를 보여줄 것입니다.

다른 유형의 자습서를 찾고 계십니까? 보다 Photoshop에서 사진 콜라주를 만드는 방법 ...에 그리고 편리한 가이드를 위해, 우리의 꼭대기 픽 웹 사이트 빌더 과 웹 호스팅 서비스.

18 상위 CSS 애니메이션 예제

언급 된 특성을 사용하는 것에 대한 가장 큰 영감은 전통적인 콜라주입니다. 그래픽 편집기 또는 소프트웨어를 사용하지 않고 웹 브라우저에서 생성 할 수 있는지 궁금해하고있었습니다. CSS의 마법으로, 그것은 완전히 일할 수 있습니다! 코드를 작성하는 또 다른 보너스는 확장 가능, 애니메이션 및 대화식을 갖추고 있습니다. 시작하기 전에 다음을 수행하십시오.

필요할 것이예요:

좋아하는 웹 브라우저 및 개발자 도구 -이 자습서에서 사용하는 모든 기능을 지원하기 때문에 Google 크롬을 사용하는 것이 좋습니다.
코드 편집기
이미지 또는 SVG 파일과 같은 자산 -이 자습서에서 사용하고있는 것들을 다운로드 할 수 있습니다. 여기

텍스트 겹치는 이미지를 마스크하십시오

CSS masks example — CSS Masks는 사용자가 페이지를 위아래로 스크롤하고 사용자가 위와 아래로 스크롤 할 때 사이트 제목을 선택적으로 나타나는 특수 효과를 만들 수 있습니다 (위 이미지를 위의 이미지로 대조)

마스킹은 내가 당신을 보여주고 싶은 첫 번째 기능입니다. 자산 요소가 표시되어야하는 브라우저를 알려줌으로써 웹에서 더 많은 창조적 인 모양과 레이아웃을 구축하는 데 도움이됩니다. 마스킹은 세 가지 방법으로 수행 할 수 있습니다. 래스터 이미지 (투명 부품이있는 PNG 형식)를 사용합니다. CSS 그라디언트; 또는 svg 요소. 일반적인 래스터 이미지와 달리 SVG는 품질이 크게 손실되지 않고 확장되거나 변형 될 수 있습니다.

내가 특히 마스킹에 관해서는 무엇이 같은 것과 같은 속성을 적용 할 수있는 능력입니다. 배경 - 예를 들어, 마스크의 위치, 크기 및 반복을 정의 할 수 있습니다. 마스크 - 반복 : 반복 없음 과 마스크 크기 : 커버 ...에

CSS 마스킹 덕분에 우리는 웹에서보다 정교한 효과를 창출 할 수 있습니다. 그 중 하나는 이미지의 일부가 텍스트를 덮는 이미지의 예에서 찾을 수 있습니다. 사용자가 페이지를 위아래로 스크롤하면 일부 텍스트 부분이 표시되거나 숨겨집니다. 이것은 페이지 제목이 산 뒤에있는 인상을줍니다. 이 효과를 만들려면 일부 트릭이 필요하며 CSS 마스크의 영리한 응용 프로그램이 그를 얻는 데 도움이됩니다.

선택한 배경 이미지와 두 개의 헤더가있는 헤더를 만들어 봅시다. 그 중 하나는 기본 하나 (첫 번째 수준의 제목)가 될 것입니다.

& lt; 헤더 & gt; & lt; h3 & gt; 이것은 & lt; / h3 & gt; & lt; h1 & gt; & lt; 스팬 & gt; 내 모험 & lt; / span & gt; & lt; / h1 & gt; & lt; / header & gt;

제목의 본문은 & lt; span & gt; 꼬리표. 일반적이지는 않지만이 경우에는 컨테이너가 아닌 향하기 위해 마스킹을 적용하고 있습니다.

 헤더 {
    너비 : 100VW;
    높이 : 80VH;
    TOP : 0;
    왼쪽 : 자동;
    배경 : URL (../ 이미지 / Landscape.jpg) 센터 탑 - 반복;
    배경 크기 : 덮개;
}
H1 {
    마스크 : URL (../ 이미지 / mask.svg # maskid);
    -webkit-mask : URL (../ 이미지 / 가로 - mask.png)
센터 탑 - 반복;
    마스크 크기 : 덮개;
    -webkit-mask 크기 : 덮개;
    너비 : 100VW;
    높이 : 80VH;
    색상 : #fff;
    글꼴 크기 : 100px;
    위치 : 상대;
}
H1 스팬 {
    위치 : 고정;
    디스플레이 : 인라인 블록;
    텍스트 - 정렬 : 센터;
    글꼴 - 가족 : 'Libre Baskerville', Serif;
    너비 : 100VW;
    상단 : 80px;
    글꼴 스타일 : 기울임 꼴;
}

CSS 클리핑을 사용하여 이미지를 잘라냅니다

CSS clipping example — 클리핑 패스를 사용하면이 예에서 공장 이미지를 잘라낼 수 있습니다.

다른 예를 탐색하고 CSS 클리핑에 대해 자세히 알아 보겠습니다. 간단히 말해서 클리핑은 어떤 이미지 영역을 볼 수 있어야하는지 정의합니다. 클리핑은 종이 조각을 자르는 것과 유사합니다. 모양의 경계를 클립 경로라고합니다. 경로 외부의 모든 항목은 숨겨집니다. 경로 내부의 모든 것들이 볼 수 있습니다. 클립 경로를 사용하면 무거운 PNG 파일을 사용하는 대신 이미지에서 배경을 제거 할 수 있습니다. 이를 위해 이미 잘라내어 모양을 준비해야합니다.

이 연습의 목표는 이미지에서 공장을 빼고 배경을 제거하는 것입니다. 우리는 파일에서 SVG 코드를 복사하여 HTML 문서에 붙여 넣을 수 있습니다. 클립 경로가 내장되어야합니다 & lt; defs & gt; & lt; / defs & gt; 태그.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; Clippath ID = "클립 식물"& gt;
     & lt; 경로 D = "M293.2,524.8C0,3.3,0 ... 및 더 많은 숫자]"& gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "식물"& gt; & lt; / div & gt;

나중에 SVG 코드에서 정의 된 경로를 쉽게 참조 할 수 있습니다. URL 함수.

 {
    높이 : 700px;
    배경 이미지 : URL (../ 이미지 / Plant.jpg);
    배경 크기 : 덮개;
    위치 : 상대;
    배경 - 반복 : 없음;
    -webkit-clip-path : URL ( "# 클립 식물");
    클립 경로 : URL ( "# 클립 식");}

상자 밖에서 생각해보십시오

clipping in CSS example — 당신이 사용할 수있는 **모양 - 내부** 과 **모양 외부** 모든 종류의 모양을 만드는 것

누가 본문 용기가 항상 직사각형 일 필요가 있다고 누가 말했습니까? 적용으로 모든 종류의 다른 종류의 다른 종류로 절단 될 수 있습니다. 모양 외부 과 모양 - 내부 CSS의 사용자 정의 경로 주위에 콘텐츠를 랩핑 할 수있는 속성.

그래서, 어떻게 작동합니까? 단순히 적용 모양 외부 주어진 플로팅 된 이미지 또는 컨테이너에. 그 사실을 주목하는 것이 중요합니다 흙손 속성 및 요소의 치수 - 높이 또는 너비 중 하나를 정의해야합니다. 그렇지 않으면 작동하지 않습니다. 당신은 그를 사용할 수 있습니다 url () 기능을 사용하는 기능 모양 외부 속성은 svg 파일에서 경로를 기반으로 요소 모양을 정의합니다.

 .A- 문자 {
    배경 - 이미지 : URL ( '../ 이미지 / gold-bg-bg.jpg');
    배경 크기 : 1000px;
    -webkit-mask-image : URL ( '../ 이미지 / A-Letter2.svg');
    -webkit-mask-composite : 소스 아웃;
    -webkit-mask- 반복 : 반복 없음;
    -webkit-mask 크기 : 300px;
    너비 : 100 %;
    높이 : 60VH;
    위치 : 상대;
    상단 : 0px;
    배경 첨부 파일 : 고정;
    왼쪽으로 뜨다;
    디스플레이 : 인라인 블록;
    너비 : 310px;
    모양 마진 : 23px;
    모양 외부 : URL ( '../ 이미지 / mask.svg');
}

그만큼 모양 외부 부동산은 플로트 영역 이외의 요소에 대해 아무 것도 변경하지 않습니다. 즉, 어떤 테두리와 배경 이미지가 요소에 생성 된 모양에 적응하지 않음을 의미합니다. 이것이 우리가 마스크 - 이미지 속성 - 정의 된 모양과 일치하도록 요소의 배경을 자르려면.

하나의 중요한 일은 그 것입니다 모양 외부 기능은 Cors 지원 파일에서만 작동합니다. Cors는 크로스 원산지 자원 공유를 의미합니다.

이 특별한 경우를 보는 가장 좋은 방법은 localhost를 사용하는 것입니다. 그렇지 않으면 브라우저에서 열면 작동하지 않습니다.

실험 할 때, 언급 된 모든 기능이 모든 브라우저가 지원하는 것은 아닙니다. 여기 ...에 최신 예제는 Firefox, Opera 및 IE에서 작동하지 않지만 모든 브라우저에서 곧 사용할 수 있습니다. 그리고 프로젝트를 위해 저장하기 위해 많은 문서가 있으면 안전하게 안전하게 지켜보십시오. 클라우드 스토리지 ...에

자세히보기 :

CSS에서 변수 글꼴로 시작하십시오
CSS 그리드 사용 포괄적 인 가이드
지금 시도하는 새로운 CSS 규칙

CSS로 브라우저에서 콜라주 효과 생성

필요할 것이예요:

텍스트 겹치는 이미지를 마스크하십시오

CSS 클리핑을 사용하여 이미지를 잘라냅니다

상자 밖에서 생각해보십시오

어떻게 - 가장 인기있는 기사

캔버스를 늘리고 오일 페인트에 설치하는 방법

Adobe Illustrator에서의 관점 만들기

2018 년 Flash 웹 사이트 재구성

친 화성 디자이너가있는 레트로 로고를 만드는 방법

브랜딩 팬은 브랜드의 목소리를 어떻게 못냅니다

캐리커처 기술 개발

3D 팬 아트 마스터 방법

타이포그래피의 스타일과 물질을 발견

카테고리