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

css를 이용한 다이나믹한 71가지의 폼 디자인을 공유하고 있는 사이트입니다. 샘플 사이트내에서 이미지에 마우스를 오버하시면 간단히 이미지내에서 동작하는것을 확인할 수 있고 links 의 demo and code를 클릭하시면 html/css/js 파일 및 결과물을 확인하실 수 있습니다.아래의 export를 클릭하여 소스를 다운 받으시거나 파일로 바로 코드를 복사하여 확인하시면 됩니다.

순수CSS를 이용하여 브라우저간 지원이 되는 버튼 CSS입니다. \ CSS를 이용하여 div, p, a, 버튼 등 다양한 html 요소에 적용이 가능한 버튼 CSS입니다. 둥근모서리, css그라디언트, 색상, 폰트크기, 등등 다양한 요소를 조정할 수 있습니다. 롤오버 아웃 효과도 있어서 단조롭지 않게, 사이트에 적용할 수 있습니다.

회전, 줌인, 줌아웃, 페이드 효과 등 다양한 효과를 심플하고 가벼운 CSS로 구현되는 애니메이션 효과 라이브러리 입니다. 예제 사이트 http://kristofferandreasen.github.io/wickedCSS/examples.html 밋밋한 사이트에 아기자기함을 더해주니, 괜찮은 CSS 애니메이션 효과네요. 사용법 http://kristofferandreasen.github.io/wickedCSS/documentation.html 관련 CSS를 다운로드 받은 후 사이트에 업로드 및 링크해주시고, 효과가 필요한 이미지에 효과별 class를 선언하면 끝... 완전 간단 하네요. 일부 효과에는 jQuery 가 필요한 경우도 있으니, 사용법을 참고해서 사용하세요.

단순하고, 간편하게 편의성을 중점을 둔 CSS 효과 컬렉션 CSS 버튼 효과, 애니메이션 효과의 CSS 소스 제공, 미리보기도 가능 다양한 버튼 효과 CSS, input 박스 효과 CSS, 로딩효과 CSS, 본문내용에 하이라이트 포인트 효과 CSS 등 다양한 효과의 CSS 소스를 복사해서 사용이 가능하다. 효과별 데모를 클릭시 위 이미지와 같이 소스를 손쉽게 복사해서 사용이 가능하다. 단조로운 사이트에서 다양한 효과를 준 사이트로 손쉽게 만들수 있는 CSS 소스네요.

css .balloon_01 { position:relative; margin: 50px; width:400px; height:100px; background:pink; border-radius: 10px; } .balloon_01:after { border-top:0px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid pink; content:""; position:absolute; top:-10px; left:200px; } .balloon_02 { position:relative; margin: 50px; width:400px; hei..

cssgenerators는 클릭만으로 디자인을 조절하여 버튼을 생성해주는 사이트입니다. 효과와 옵션을 조절하면 설정한 버튼 모양을 바로 확인할 수 있습니다. 위와 같이 css 소스를 무료로 제공하기 때문에 유용하게 사용이 가능합니다. 아래의 css 태그 압축하기를 클릭하면 가로 일렬로 정돈이 되어 더욱 편리하게 사용할 수 있습니다. 하단쪽을 살펴보시면 더 많은 버튼 예제가 있어서 다양하게 이용하실 수 있습니다.

Animista는 css 애니메이션을 쉽게 구현시킬 수 있는 사이트 입니다. 다양한 효과와 옵션을 이용하여 설정한 애니메이션들을 사이트에서 미리 볼 수 있으며 css 소스코드 또한 제공하기 때문에 유용하게 사용하실 수 있습니다. try me! 를 클릭 후 사이트를 들어가보시면 다양한 효과와 옵션들을 설정하여 미리보기를 통해 바로 확인 하실 수 있습니다. 마음에 드시는 효과를 설정하셨다면 미리보기 화면 우측 상단에 {·} 버튼을 클릭하시면 아래의 캡쳐와 같이 css소스를 확인하시고 사용하실 수 있습니다.

css를 이용하여 텍스트를 드래그 했을경우 텍스트 및 배경색상을 변경할 수 있는 소스입니다. ::selection을 이용하시면 되며 .aa::selection 과 같은형태로 이용하시면 됩니다. 완성된 예제는 첨부파일을 다운받아서 이용하시면 되며 사용가능한 브라우저는 아래와 같습니다. https://caniuse.com/#search=selection

css3 studio는 box shadow, text shadow, gradient, box radius, opacity, transform을 사용자가 옵션을 설정하는 대로 css 소스를 만들어주는 사이트입니다. css소스를 바로 확인하고 복사도 가능하여 적용이 편리합니다. 또한, 하늘색 DOWNLOAD 버튼을 누르면 해당 소스의 html 파일을 다운받을 수 있습니다. 버튼을 출력하는 소스도 만들 수 있으며, 지원가능한 브라우저 버전이 표기되어있습니다. css를 이용하여 다양한 효과를 내는 샘플들도 있습니다. 해당 샘플을 클릭하면 css 소스 확인 및 복사가 가능하여 손쉽게 스타일을 추가하실 수 있습니다.

html,css,js 소스를 선택하는 옵션으로 자동 생성해 주는 사이트 입니다. Gradient Box Shadow Text Shadow Color Font Table Column Border Border Radius Transform Background 위와 같은 다양한 속성의 소스를 생성 가능합니다. css 뿐만 아니라 html. js 소스도 가능합니다.