일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #cgimall
- #happycgi
- #동영상
- javascript
- #이미지
- 해피CGI
- #jQuery
- #쇼핑몰
- 웹솔루션
- #뉴스
- #홈페이지
- #업종별
- jquery
- 솔루션
- php
- 홈페이지
- happycgi
- #image
- #해피CGI
- CGIMALL
- 해피씨지아이
- 사이트제작
- 홈페이지제작
- #홈페이지제작
- #솔루션
- CSS
- 게시판
- 쇼핑몰
- #웹솔루션
- #CSS
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
디자인 패턴은 둥근 “Inset”형태 디자인의 “Material design ‘ 과 ‘Material design small ‘, 박스 타입의”Box ” 약간의 애니메이션 된’Flex ‘나’Bubble ‘등 총 11 가지가되고 있으며, 다양한 효과들이 잘 구성되어 있고 와 이런 식으로매우 간단합니다. 실제 표시와 움직임의 확인은 다음과 같이 CodePen 데모에서 확인할 수 있도록되어 있습니다.
3D 변환 CSS를 이용한 Card Flip이며, 스크립트 없이 CSS3를 이용하여 간단하게 이용가능합니다. 시점을 정하고 평면상태에서 어떤방향으로 어떤 원근감 깊이도 반응 할지 속성으로 조절할 수 있습니다. 예시를 보시면 좀더 이해가 쉽습니다. 단순한 사이트에 동적인 요소를 쉽게 넣을 수 있어서 좋은거 같습니다.
한페이지 내에서 직관적으로 컬러값을 확인할 수 있는 재미있으면서도 바로바로 색상을 확인할 수 있는 사이트 입니다. 마이스 드레그를 통해서 화면중앙에 보이는 색상코드를 확인할 수 있으며 마우스를 움직여 원하는 색상을 클릭 후 페이지내 저장도 가능합니다. 톱니버튼을 클릭하여 색상조절도 가능하며 좌측상단의 Colordot 버튼을 클릭하여 사용법 확인이 가능합니다. 디자인하실때 색상조합에 많은 도움이되길 바랍니다 ^^
다른 곳에 비하면 적은양일수도 있지만.. 충분히 퀼리티가 좋은 사이트입니다. 상단 메뉴 부분에 있는 DESIGN 등은 유료니 참고하시고 알려드린 링크에서만 다운받아 사용하시기 바랍니다.^^
CSS와 HTML을 이용하여 일반버튼에 마우스오버시 애니메이션을 적용한듯한 효과를 낼 수 있습니다. 메뉴마다의 버튼에 마우스를 올릴때마다 각자의 다른 효과를 확인하실 수 있습니다. 해당 효과의 소스는 바로위창에서 확인 가능합니다.
freenicetemplates 를 들어가보시게 되면 상단에 플래쉬템플릿, CSS 등등 다양한 무료소스를 받아보실수 있습니다. 플래시에 대한 정보가 많은 부분이니 플래시를 이용하시어 사용을 하시는 분들께는 참고가 많이 되실것입니다. 다들 유용하게 사용하시기 바랄께요^^
위 사이트로 접속을 하면 사용자들이 추천을 해준 색상을 확인하실 수 있습니다. 상단의 툴 메뉴(TOOL)를 통하여 원하는 색상을 검색하여 나열된 색상조합도 확인하실 수 있습니다. 그리고 색상 버블을 클릭하면 색상 코드가 복사가되고 info버튼을 클릭하면 상세정보가 나타나게 됩니다. 위 색상조합을 이용하여 사이트 제작에 도움이 되시길 바랍니다 ^^
Css는 변수,인자,함수라는 개념이 없기 때문에 활용에 제한이 있었지만 SCSS를 활용하게되면 전역변수, 함수 , 매계변수 그리고 상속, 확장, 힘포트등을 활용할 수 있습니다. 이렇게 구성되는 scss 확장명의 파일은 css파일을 생성해내게 됩니다. 먼저 scss를 이용하기 위해서는 몇몇가지의 프로그램 설치가 필요합니다. 설치법과 사용법은 아래의 링크에서 확인하실 수 있습니다. http://opentutorials.org/course/470/2489 http://sass-lang.com/ [SASS] 공식사이트 위 사이트는 SASS공식 사이트이며 SCSS 사용법에 대해서도 설명하고 있습니다.] 사용법을 확인하신 후 아래의 사이트의 SCSS 자료도 이용하셔서 사이트 제작에 도움이 되시길 바랍니다 ^^ ht..