일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #happycgi
- #솔루션
- #홈페이지제작
- #CSS
- 게시판
- #웹솔루션
- 해피씨지아이
- jquery
- #image
- 홈페이지제작
- #동영상
- #cgimall
- 쇼핑몰
- CGIMALL
- 사이트제작
- happycgi
- 웹솔루션
- javascript
- #홈페이지
- #이미지
- #업종별
- php
- 솔루션
- 홈페이지
- #뉴스
- #쇼핑몰
- #해피CGI
- 해피CGI
- CSS
- #jQuery
- Today
- Total
목록CSS (119)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
css 만으로 구현된 반응형 이미지 슬라이드 입니다. 좌우 버튼 또는 하단 목록 버튼으로 슬라이드 이동 css 를 수정하여 디자인 변경이 가능합니다. css를 수정하여 슬라이드를 추가할 수 있습니다. 해당 사이트 또는 첨부타일을 다운로드 받아서 소스 확인이 가능합니다.
텍스트에 마우스가 올라가면 우측 이미지처럼 텍스트가 계단을 타고 미끄러져 오르는 듯한 효과를 볼 수 있습니다. 소스를 살펴보면 transform의 skew를 이용하여 계단 모양을 만들고 마우스 올릴 시 transform: translate(0, -50px); 스타일을 통해 각 영역의 글자를 위로 올리는 것을 확인해보실 수 있습니다. [html 소스] [주요 css]
Css를 이용한 Masonry Grid 디자인 갤러리입니다. css의 column옵션을 이용해서 디자인되고 있으며 css column 속성은 브라우저별 접두사를 붙여 사용해야 합니다. 크롬,사파리 -webkit- 파이어폭스 -moz- 오페라 -o- 익스플로러 -ms- (11,엣지 제외) column 옵션을 이용해서 단의 디자인을 구성하고 있으며 이미지 크기를 100%로 지정하여 해당 효과가 구현이되어 있습니다. 데모보기를 클릭하시면 결과물을 확인하실 수 있습니다. 최신버전의 브라우저에서만 동작이 됩니다^^
간단하게 class 자만 추가하면 밑줄긋기 에니메이션 효과를 줄 수 있는 4가지 형태의 css 소스입니다. 첨부파일을 다운받으셔서 선언된 css 소스와 html 소스를 이용하면 되며, 아래의 class 명을 원하시는 항목에 대입하시면 쉽게 적용이 가능합니다. 왼쪽에서 오른쪽으로 이동하는 에니메이션 가운데서 좌우로 펼쳐지는 라인 에니메이션 형광펜 효과가 위로 올라오는 에니메이션 위에서 살짝 떨어지는 에니메이션
인풋 박스에 포커스가 되면 라벨을 이용한 인풋 타이틀이 위치가 변경됩니다. 타이틀의 스타일도 변경됩니다. 인풋의 placeholder 같은 느낌을 주면서 디자인을 할 수 있습니다. 해당 사이트 또는 첨부파일을 다운로드 받아보시면 전체 소스를 확인할 수 있습니다. 표시한 부분을 소스를 확인해보시면 쉽게 응용이 가능합니다.
움직이는 웨이브 css 소스입니다. 이미지배너 대신 사용이 가능합니다. 가로크기 반응하여 구현되어 있습니다. 해당 사이트에서 소스 다운로드 및 확인이 가능합니다.
이미지로 만들었던 리본을 css로 쉽게 만들어보세요. transform:rotate 스타일를 사용하여 모서리에 감겨있는 리본을 만들어 보실 수 있습니다. [주요 CSS01 - 리본 몸통] [주요 CSS02 - 뒤로 넘어가는 리본 표현] [주요 CSS03 - 위치에 따른 스타일] 위치에 따라 position 위치 와 넘겨지는 리본의 border-color값, 그리고 rotate값이 달리지는 것을 확인해보실 수 있습니다. 포토샵으로 이미지로만 제작했던 리본을 css를 이용하여 이미지 제작과정 없이 쉽게 제작해 보세요 ^^
css만을 이용한 효과로 텍스트에 마우스를 올리면 텍스트 왼쪽에서부터 배경이 채워지고 마우스 아웃시 텍스트 왼쪽에서부터 배경이 사라집니다.
카드형태의 레이아웃이며 클릭시 숨겨진 글부분이나타나고 나머지 카드는 뒤로 멀어지는 듯한 효과가 나타나 원근감을 줍니다.