• 회원가입
  • 로그인
  • 구글아이디로 로그인

[css] CSS - 반응형 마름모 갤러리 (Responsible Rhomb gallery on grids + clip-path)

 

 

<style>

HTML, BODY {

  height: 100%;

  font-size: 16px;

  line-height: 1.5;

  font-family: Trebuchet MS, Helvetica, Arial, sans-serif;

}


BODY {

  overflow: hidden;

  background: #222;

  background: linear-gradient(to right, rgba(255, 255, 255, 0.025) 10%, transparent 0), linear-gradient(#222, #000);

  background-size: .75em 100%, 100% 100%;

  display: flex;

  align-items: center;

}


.wrapper {

  position: relative;

  flex-grow: 1;

  margin: auto;

  max-width:750px ;

  max-height: 1200px;

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  grid-template-rows: repeat(4, 1fr);

  grid-gap: 2vmin;

  justify-items: center;

  align-items: center;

}


IMG {

  z-index: 1;

  grid-column: span 2;

  max-width: 100%;

  margin-bottom: -52%;

  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

  -webkit-transform: scale(1);

          transform: scale(1);

  transition: all .25s;

}

IMG:nth-child(7n + 1) {

  grid-column: 2 / span 2;

}

IMG:hover {

  z-index: 2;

  -webkit-transform: scale(2);

          transform: scale(2);

}

</style>

 

<div class="wrapper">

  <img src="https://source.unsplash.com/random/600x600?water" alt="">

  <img src="https://source.unsplash.com/random/600x600?summer" alt="">

  <img src="https://source.unsplash.com/random/600x600?plants" alt="">

  <img src="https://source.unsplash.com/random/600x600?snow" alt="">

  <img src="https://source.unsplash.com/random/600x600?roses" alt="">

  <img src="https://source.unsplash.com/random/600x600?sky" alt="">

  <img src="https://source.unsplash.com/random/600x600?nature" alt="">

  <img src="https://source.unsplash.com/random/600x600?blossom" alt="">

  <img src="https://source.unsplash.com/random/600x600?ice" alt="">

  <img src="https://source.unsplash.com/random/600x600?spring" alt="">

</div>

 

결과보기

yoksel 님 https://codepen.io/yoksel/pen/PooVvwZ

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
css CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = …
css CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …
css CSS - 블럭요소 수직중앙정렬/수평중앙정렬 (= 가로가운데정렬) (IE9) ★★★★★ (HT - Cent…
css CSS - appearance 속성 - 요소자체구성요소숨기기 (= 요소내장구성요소제거 = appearance…
css CSS - (div전체/TD전체/TD셀천체/LI전체)에 링크걸기 (= DIV링크/TD링크/LI링크 = 요소전…
css CSS - Smooth Scroll (부드러운 스크롤 = 부드럽게이동) ※ 클릭 상하 이동
css CSS - 선택자 명시도 계산 - (CSS 적용 선택자우선순위 판별 = CSS적용순서 체크)
css CSS - 폰트오썸 아이콘 배경이미지 적용 + fontawesome 엑박원인 엑박해결
css CSS - 부모요소 안 자식요소 너비를 부모요소 밖으로 화면너비 100% 채우기. (= 부모이탈자식너비전체설…
css CSS - (블럭요소 + 인라인요소:이미지/텍스트) 중앙정렬/가운데정렬 원리/방법
css CSS - FADE-IN TEXT - 페이드인 텍스트 (= 서서히 사라지는 이미지 + 서서히 나타나는 글자)
css CSS - 반응형 마름모 갤러리 (Responsible Rhomb gallery on grids + clip…
css CSS - 스크롤 따라다니는 양사이드배너 (= 양쪽날개배너 = 사이드고정배너) 3단 레이아웃
css CSS - 이미지반전 (= 이미지좌우반전 = 이미지좌우대칭변환)
css CSS - 인풋태그 높이통일 (= 동일높이 = 높이동일 = 높이같게 = 세로길이 똑같게 = 높이맞추기) IN…
css CSS - 네임펜 (= 형광펜) 효과
css CSS - IE 전용 CSS핵
css CSS - 화면 비율 유지. (= 요소 종횡비 유지 = 반응형 레이아웃 사이즈/크기)
1/5
목록
찾아주셔서 감사합니다. Since 2012