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

링크를 통해서 이동하시면 무료글꼴 및 상업용으로 사용가능.불가능 등을 표를 통해서 정리되어 있습니다. 폰트에 관련된 궁금증을 한방에 해결해주는 글이네요 ^^ 위 글꼴외에도 링크를 통해서 더 자세한 글꼴과 다운로드 링크를 확인할 수 있습니다. http://www.bloter.net/archives/201916?rccode=lvRc 참고하셔서 걱정없이 폰트를 사용해 보세요

총 4가지의 에니메이션 효과가 있습니다. 모두 css를 이용하여 디자인 되어 있으며 약간의 스크립트를 사용합니다. css 수정으로 간단하게 버튼의 크기, 패딩, 두께, 색상 등을 수정이 가능합니다. 각각의 버튼별로 css 가 설명이 되어있습니다. 공통으로 사용하는 css 가 많으므로 사용상 어려움이 없습니다. 하단의 다운로드 소스 버튼을 클릭하여 css 및 스크립트 소스를 다운로드 받으실 수 있습니다.

4가지 형태의 토글 스위치가 있습니다. 체크박스는 디자인 변경이 안되므로 css trick을 이용한 디자인입니다. ie10 버전이상 크롬에서 정상작동 합니다. 스크립트를 이용한 에미메이션 효과가 각 버튼별로 있습니다. 버튼별로 css 소스가 정리되어 있으며 해당 페이지에 구현 원리에 대해 설명되어 있습니다. 하단의 다운로드 버튼을 클릭하여 소스를 다운로드 하실 수 있습니다.

HTML5 태그는 웹브라우저에서 오디오파일을 재생하게 해줍니다. 재생되는 파일 형식은 브라우저마다 일부 차이가 있으며, MP3, WAV, Ogg 가 있습니다. 브라우저마다 재생되는 파일은 w3school.com에서 확인하시면 됩니다. 태그 속성은 아래와 같습니다. src : 음악파일의 경로 설정 preload : 재생전에 모두 불러올지 설정 autoplay : 음악의 자동 재생여부 설정 loop : 반복 재생 설정 controls : 음악재생 인터페이스를 보이기 할지를 설정 브라우저 마다 플레이어가 다르니 참고하세요.. 손쉽게.. 오디오 파일을 웹브라우저에서 재생할 수 있어 다양하고 손쉽게 이용이 가능합니다.

HTML코드에 CSS를 이용하여 필터효과를 가능하게 하는 플러그인입니다 ^^ 기본적인 사용법은 링크를 통해 사이트에서 확인하실 수 있으며 예제 확인 및 다운로드도 가능합니다. 아래의 필터 효과들을 사용할 수 있습니다. blur grayscale hue-rotate saturate sepia contrast invert opacity brightness drop-shadow - Supports only black color. Requires 4 values. The 4th value instead of color is opacity 0 to 100%. svg - Custom SVG filter. Requires 1 value - filter ID. color - Requires 2 values. Color..

디자인 패턴은 둥근 “Inset”형태 디자인의 “Material design ‘ 과 ‘Material design small ‘, 박스 타입의”Box ” 약간의 애니메이션 된’Flex ‘나’Bubble ‘등 총 11 가지가되고 있으며, 다양한 효과들이 잘 구성되어 있고 와 이런 식으로매우 간단합니다. 실제 표시와 움직임의 확인은 다음과 같이 CodePen 데모에서 확인할 수 있도록되어 있습니다.

3D 변환 CSS를 이용한 Card Flip이며, 스크립트 없이 CSS3를 이용하여 간단하게 이용가능합니다. 시점을 정하고 평면상태에서 어떤방향으로 어떤 원근감 깊이도 반응 할지 속성으로 조절할 수 있습니다. 예시를 보시면 좀더 이해가 쉽습니다. 단순한 사이트에 동적인 요소를 쉽게 넣을 수 있어서 좋은거 같습니다.

한페이지 내에서 직관적으로 컬러값을 확인할 수 있는 재미있으면서도 바로바로 색상을 확인할 수 있는 사이트 입니다. 마이스 드레그를 통해서 화면중앙에 보이는 색상코드를 확인할 수 있으며 마우스를 움직여 원하는 색상을 클릭 후 페이지내 저장도 가능합니다. 톱니버튼을 클릭하여 색상조절도 가능하며 좌측상단의 Colordot 버튼을 클릭하여 사용법 확인이 가능합니다. 디자인하실때 색상조합에 많은 도움이되길 바랍니다 ^^

다른 곳에 비하면 적은양일수도 있지만.. 충분히 퀼리티가 좋은 사이트입니다. 상단 메뉴 부분에 있는 DESIGN 등은 유료니 참고하시고 알려드린 링크에서만 다운받아 사용하시기 바랍니다.^^

CSS와 HTML을 이용하여 일반버튼에 마우스오버시 애니메이션을 적용한듯한 효과를 낼 수 있습니다. 메뉴마다의 버튼에 마우스를 올릴때마다 각자의 다른 효과를 확인하실 수 있습니다. 해당 효과의 소스는 바로위창에서 확인 가능합니다.