일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #솔루션
- #쇼핑몰
- 해피CGI
- #happycgi
- 해피씨지아이
- #홈페이지제작
- javascript
- 홈페이지
- 솔루션
- #cgimall
- #업종별
- 게시판
- jquery
- #CSS
- happycgi
- #뉴스
- 웹솔루션
- 사이트제작
- #해피CGI
- #홈페이지
- 쇼핑몰
- #동영상
- #이미지
- CGIMALL
- php
- #image
- 홈페이지제작
- CSS
- #웹솔루션
- #jQuery
- Today
- Total
목록웹프로그램밍 자료실 (2510)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
순수 css로 만든 로딩 아이콘 애니메이션 효과입니다. css로 만든 로딩바 애니메이션으로 다양한 효과를 선택해서 쓰면 됩니다.
css를 이용한 off-canvas형 원형 메뉴 CSS만을 이용하여 메뉴 클릭 시 off-canvas로 메뉴가 출력됩니다. css와 html로만 구성하여 손쉽게 구성이 가능합니다.
다음 슬라이드로 넘기게 되면 차트로 되어있는 다음 이미지가 확대 되면서 배경이 바뀌게됩니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML "Lossless Youths" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim. Read More "Estrange Bond" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesen..
스프라이트 시트를 css로사용하여 움직이는 이미지 제작입니다. 소스다운로드 또는 데모페이지를 통해 확인해 보실 수 있습니다. HTML CSS .hi { width: 50px; height: 72px; background-image: url("http://s.cdpn.io/79/sprite-steps.png"); -webkit-animation: play .8s steps(10) infinite; -moz-animation: play .8s steps(10) infinite; -ms-animation: play .8s steps(10) infinite; -o-animation: play .8s steps(10) infinite; animation: play .8s steps(10) infinite; } @..
PC 에서는 위와 같이 반응형으로 모바일 사이즈에서는 위와 같이 나타납니다. 사용법은 간단합니다. js 선언 후 탭 디자인은 위와 같은 형태로 한후 스크립트 옵션 조절하여 사용하시면 되겠습니다. https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion 위의 링크에서도 동일 내용 확인 가능하니 위의 링크도 같이 확인해 보세요~
https://indigounited.github.io/jquery.simplemarquee/test/demo.html 위의 데모 링크에 접근하셔서 한번 보시는게 이해가 가장 빠릅니다. 글자를 위로 아래로 왼쪽으로 오른쪽으로 스크롤 되게 할 수 있습니다. 사용법은 간단합니다. 두 js 를 선언하고 위와 같이 오른쪽으로 스크롤 하고 싶다면, 오른쪽으로 옵션을 주면 됩니다. 그 외에 옵션들은 참고하세요.
이 사이트는 완전 디자이너만을 위한 곳입니다. 디자이너가 여러 프로그램을 사용하면서 필요한 모든 단축키를 모아놓은 “Shortcuts.design” 입니다. 정말 기본 디자인 프로그램 부터 개발 프로그램, 기타 프로그램 까지 모든 단축키를 손쉽게 검색하여 알수 있습니다.
노트북, 모바일등 다양한 디바이스에 원하는 이미지를 손쉽게 넣고 무료로 다운 받을 수 있는 곳입니다. 바로 “Device Shots” 포토샵을 잘 사용하시는 분이라면 필요 없는 기능 이지만 포토샵은 잘 못쓰지만 다양한 디바이스에 원하는 이미지를 넣어서 사용하고 싶다면 유용한 사이트 입니다.
상업적으로 이용 가능한 무료 이미지 사이트입니다. 필요한 이미지를 검색하여 해당 이미지를 클릭 후 이미지의 상세페이지에서 Download Image 버튼을 클릭하면 회원가입 페이지로 이동합니다. 이메일, 이름, 비밀번호 등 간단한 정보만 입력하면 가입이 완료되고 바로 무료이미지를 다운로드 받을 수 있습니다.