일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- #해피CGI
- 해피CGI
- #뉴스
- 사이트제작
- #jQuery
- 홈페이지
- php
- #홈페이지
- #쇼핑몰
- CGIMALL
- #웹솔루션
- 해피씨지아이
- #동영상
- 솔루션
- #happycgi
- #cgimall
- #솔루션
- #이미지
- #CSS
- 홈페이지제작
- jquery
- CSS
- 쇼핑몰
- javascript
- #image
- Today
- Total
목록CSS (119)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
색상이 있는 부분이 플립되면서 배경색상 및 텍스트가 변경됩니다. CSS를 수정하여 배경색 및 폰트크기 등을 쉽게 수정할 수 있습니다.
로그인 박스의 아이디 패스워드 입력박스에 포커스가 되거나 아이디가 입력되면 타이틀의 위치. 색상, 크기가 변경됩니다. css 만으로 구현이 가능하며 디자인 변경이 용이합니다.
CSS를 이용한 간단 로그인/회원 가입 페이지 입니다. 데모페이지에서 만들어진 화면을 확인하실 수 있으며 첨부파일내에 관련 HTML, CSS를 확인하실 수 있습니다^^
를 이용하여 원모양으로 돌아가는 텍스트를 만들어 보실수 있습니다. [svg 소스] [주요 svg 요소] 1) - 로 텍스트를 배치할 선을 만듭니다. 2) Sweet ~ Coding - 로 텍스트 요소를 감싸고 href 속성에 연결할 path id값을 넣는다. 3) - 으로 움직이는 애니메이션 효과를 준다. svg 요소는 인터넷 익스플로어 및 일부 브라우저에서 지원하지 않습니다. 해당 소스를 활용하여 로딩화면에 돌아가는 이미지 등에 사용 해보실수 있을거 같습니다. ^^
플러그인 소개 1줄의 스크립트와 CSS 로 2개의 이미지를 슬라이더로 비교할 수 있도록 구성된 플러그인 입니다. 사용 방법 1. CSS 를 호출하세요. 파일을 압축해제하면 CSS 폴더에 2개의 CSS 파일이 있습니다. 2. 컨테이너를 구성하세요. 실행 결과
순수 CSS로만 만든 모달 레이어 팝업 소스입니다. 별도의 javascript 없이 순수 CSS로 이루어진 모달 레이어팝업으로 가볍게 구동됩니다.
CSS 그리드 레이아웃 관련 자료사이트입니다. flex와 grid를 헷갈릴수도 있는데 아래의 사이트의 내용들을 확인하시면 정확히 내용을 확인할 수 있습니다.^^ 1분코딩 https://studiomeal.com/archives/533 CSS Tricks https://css-tricks.com/snippets/css/complete-guide-grid/ Heropy Tech https://heropy.blog/2019/08/17/css-grid/
오직 CSS로 제작된 종이가 넘겨지는 책입니다. html 소스에서 위 radio 버튼들을 확인해보실 수 있습니다. 각 책 페이지 영역에 radio버튼들의 위 label이 감싸져 있으므로 왼쪽, 오른쪽 종이 넘김 효과를 준 것을 확인해보실 수 있습니다. 자세한 소스는 홈페이지에서 확인하세요. ^^
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 아이콘들을 생성되어 뿌려지고 있습니다. 자세한 소스는 홈페이지에서 확인해보실 수 있습니다. ^^