일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- CSS
- CGIMALL
- php
- 해피CGI
- #이미지
- 웹솔루션
- #쇼핑몰
- #홈페이지제작
- 홈페이지
- #솔루션
- #happycgi
- #업종별
- 사이트제작
- 게시판
- #홈페이지
- #cgimall
- javascript
- 홈페이지제작
- 해피씨지아이
- jquery
- 솔루션
- #image
- #CSS
- 쇼핑몰
- #jQuery
- happycgi
- #해피CGI
- #웹솔루션
- #뉴스
- #동영상
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Masonry Grid with CSS Column 본문
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 |
Comments