목록CSS (122)

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

[해피CGI][cgimall] CSS only 종이가 넘겨지는 책

오직 CSS로 제작된 종이가 넘겨지는 책입니다. html 소스에서 위 radio 버튼들을 확인해보실 수 있습니다. 각 책 페이지 영역에 radio버튼들의 위 label이 감싸져 있으므로 왼쪽, 오른쪽 종이 넘김 효과를 준 것을 확인해보실 수 있습니다. 자세한 소스는 홈페이지에서 확인하세요. ^^
웹프로그램밍 자료실/기타 자료 2021. 6. 30. 09:55
[해피CGI][cgimall] 클릭하면 파티클이 생성되는 버튼

Click Me 버튼을 클릭하면 별, 사각형 등 다양한 형태의 파티클이 출력됩니다. [파티클 html] [파티클 css] .btn-particles { width: 100px; height: 100px; position: absolute; border-radius: 50%; color: #eee; font-family: monospace; z-index: 5; } [파티클 js 중 아이콘 부분] var shapes = [ '', // '', '', '']; 위 html과 css로 파티클 영역이 생성되며, js소스로 해당 영역안에 svg 아이콘들을 생성되어 뿌려지고 있습니다. 자세한 소스는 홈페이지에서 확인해보실 수 있습니다. ^^
웹프로그램밍 자료실/기타 자료 2021. 6. 29. 09:22
[해피CGI][cgimall] CSS Loader - codepen

Css3로 만들어진 로더입니다 JS는 따로 존재하지 않으며 HTML파일과 CSS만으로 만들어진 로더입니다 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다 ^^
웹프로그램밍 자료실/기타 자료 2021. 6. 15. 09:24
[해피CGI][cgimall] Pure CSS Slideshow Gallery 순수 CSS만으로 구현된 이미지 슬라이드

css 만으로 구현된 반응형 이미지 슬라이드 입니다. 좌우 버튼 또는 하단 목록 버튼으로 슬라이드 이동 css 를 수정하여 디자인 변경이 가능합니다. css를 수정하여 슬라이드를 추가할 수 있습니다. 해당 사이트 또는 첨부타일을 다운로드 받아서 소스 확인이 가능합니다.
웹프로그램밍 자료실/기타 자료 2021. 6. 1. 09:26
[해피CGI][cgimall] transform을 사용한 텍스트 슬라이딩 효과 - Sliding Perspective

텍스트에 마우스가 올라가면 우측 이미지처럼 텍스트가 계단을 타고 미끄러져 오르는 듯한 효과를 볼 수 있습니다. 소스를 살펴보면 transform의 skew를 이용하여 계단 모양을 만들고 마우스 올릴 시 transform: translate(0, -50px); 스타일을 통해 각 영역의 글자를 위로 올리는 것을 확인해보실 수 있습니다. [html 소스] [주요 css]
웹프로그램밍 자료실/기타 자료 2021. 5. 25. 09:30
[해피CGI][cgimall] Masonry Grid with CSS Column

Css를 이용한 Masonry Grid 디자인 갤러리입니다. css의 column옵션을 이용해서 디자인되고 있으며 css column 속성은 브라우저별 접두사를 붙여 사용해야 합니다. 크롬,사파리 -webkit- 파이어폭스 -moz- 오페라 -o- 익스플로러 -ms- (11,엣지 제외) column 옵션을 이용해서 단의 디자인을 구성하고 있으며 이미지 크기를 100%로 지정하여 해당 효과가 구현이되어 있습니다. 데모보기를 클릭하시면 결과물을 확인하실 수 있습니다. 최신버전의 브라우저에서만 동작이 됩니다^^
웹프로그램밍 자료실/기타 자료 2021. 5. 20. 09:24
[해피CGI][cgimall] 간단한 에니메이션 효과 밑줄 긋기 4종 css

간단하게 class 자만 추가하면 밑줄긋기 에니메이션 효과를 줄 수 있는 4가지 형태의 css 소스입니다. 첨부파일을 다운받으셔서 선언된 css 소스와 html 소스를 이용하면 되며, 아래의 class 명을 원하시는 항목에 대입하시면 쉽게 적용이 가능합니다. 왼쪽에서 오른쪽으로 이동하는 에니메이션 가운데서 좌우로 펼쳐지는 라인 에니메이션 형광펜 효과가 위로 올라오는 에니메이션 위에서 살짝 떨어지는 에니메이션
웹프로그램밍 자료실/기타 자료 2021. 5. 7. 09:15
[해피CGI][cgimall] Login Form with floating placeholder 폼의 타이틀 위치 변경

인풋 박스에 포커스가 되면 라벨을 이용한 인풋 타이틀이 위치가 변경됩니다. 타이틀의 스타일도 변경됩니다. 인풋의 placeholder 같은 느낌을 주면서 디자인을 할 수 있습니다. 해당 사이트 또는 첨부파일을 다운로드 받아보시면 전체 소스를 확인할 수 있습니다. 표시한 부분을 소스를 확인해보시면 쉽게 응용이 가능합니다.
웹프로그램밍 자료실/기타 자료 2021. 5. 4. 09:30
[해피CGI][cgimall] Simple CSS Waves Mobile & Full width 웨이브 소스

움직이는 웨이브 css 소스입니다. 이미지배너 대신 사용이 가능합니다. 가로크기 반응하여 구현되어 있습니다. 해당 사이트에서 소스 다운로드 및 확인이 가능합니다.
웹프로그램밍 자료실/기타 자료 2021. 5. 3. 09:34
[해피CGI][cgimall] css로 만드는 Corner Ribbon

이미지로 만들었던 리본을 css로 쉽게 만들어보세요. transform:rotate 스타일를 사용하여 모서리에 감겨있는 리본을 만들어 보실 수 있습니다. [주요 CSS01 - 리본 몸통] [주요 CSS02 - 뒤로 넘어가는 리본 표현] [주요 CSS03 - 위치에 따른 스타일] 위치에 따라 position 위치 와 넘겨지는 리본의 border-color값, 그리고 rotate값이 달리지는 것을 확인해보실 수 있습니다. 포토샵으로 이미지로만 제작했던 리본을 css를 이용하여 이미지 제작과정 없이 쉽게 제작해 보세요 ^^
웹프로그램밍 자료실/기타 자료 2021. 4. 20. 09:27
Prev 1 ··· 3 4 5 6 7 8 9 ··· 13 Next