웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Masonry Grid with CSS Column 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] Masonry Grid with CSS Column

해피CGI윤실장 2021. 5. 20. 09:24

Css를 이용한 Masonry Grid 디자인 갤러리입니다.
css의 column옵션을 이용해서 디자인되고 있으며 css column 속성은 브라우저별 접두사를 붙여 사용해야 합니다.

크롬,사파리 -webkit-
파이어폭스 -moz-
오페라 -o-
익스플로러 -ms- (11,엣지 제외)

column 옵션을 이용해서 단의 디자인을 구성하고 있으며 이미지 크기를 100%로 지정하여 해당 효과가 구현이되어 있습니다.

 


데모보기를 클릭하시면 결과물을 확인하실 수 있습니다.
최신버전의 브라우저에서만 동작이 됩니다^^

 

 

 

홈페이지바로가기

저작자표시

'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글

[해피CGI][cgimall] skew 를 이용한 종이 접힌 듯한 효과 - Skew text  (0) 2021.05.27
[해피CGI][cgimall] transform을 사용한 텍스트 슬라이딩 효과 - Sliding Perspective  (0) 2021.05.25
[해피CGI][cgimall] [CSS] Explanation of different points of the image / css로 구현한 이미지의 각 부분 설명  (0) 2021.05.18
[해피CGI][cgimall] Simple CSS loaders 로딩효과 css 애니메이션  (0) 2021.05.17
[해피CGI][cgimall] 대한제분에서 만든 곰표 폰트  (0) 2021.05.12
공유하기 링크
'웹프로그램밍 자료실/기타 자료' Related Articles more
Comments