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

텍스트 그림자에 대해서 간단한 설정으로 각도, 거리, 흐릿함, 색상, 투명도를 조절하여 css를 생성해주는 사이트입니다. 마우스조작만으로 원하는 그림자를 설정할 수 있고 간단하게 소스를 복사할 수 있어서 매우 편리하네요. ^^ ​ ​ ​

css3 로 만든 패턴 자료사이트 입니다. Firefox 3.6이상, chrome, safari 5.1, opera 11.10 이상 ie10 이상에서 작동합니다 일부 브라우저에서는 작동을 하지 않을 수 있습니다. 원하는 패턴을 클릭하면 아래와같이 소스창을 확인할 수 있으며 적용할려고 하는곳에 위소스를 복사하여 적용하시면 됩니다.

CSS3로 가능한 애니메이션효과를 쉽게 찾아볼수 있고, 적용도 가능한 AniCollection 사이트를 소개합니다. 사이트에 들어가보시면 위 이미지처럼 출력되며 각 부분에 마우스를 올리면 효과확인이 가능합니다. 마우스를 올리면 출력되는 눈아이콘을 클릭하면 각 효과 상세화면이 출력되며 사용된 css는 물론 HTML, JQuery 소스도 확인할 수 있습니다. 사용된 css와 HTML 소스를 그대로 html 소스에 삽입해보시면 효과가 적용되는 것을 확인하실 수 있습니다.

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

자바스크립트를 사용안하고 css 만으로 제작된 이미지 배너 슬라이드 배너위에 텍스트 직접 입력이 가능합니다 텍스트 부분과 이미지 부분 다중으로 에니메이션 효과가 있습니다 해당 사이트에서 소스 다운로드 및 소스를 확인해 보실수 있습니다. 텍스트입력 슬라이드 에니메이션 속도 조절

css3를 이용하여 페이퍼 형식의 디자인 버튼을 손쉽게 만들수있습니다. 페이지로 이동했을때 하단에 보시면 버튼별로 미리보기가 가능하며, 왼쪽화면에서는 HTML을 오른쪽 화면에서 CSS를 확인할 수 있습니다. 버튼의 관한 예시는 스크롤을 내리면 더 많이 확인할 수 있습니다.

css3을 이용하여 이미지에 호버이펙트를 다양하게 사용할 수 있습니다. 마우스올렸을때 제각각 다른 효과를 미리보기로 확인할 수 있습니다. 기본구조 Nice Lily Lily likes to play with crayons and pencils View more 사용 css3 figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; transform: translate3d(0,50%,..

다양한 디자인의 버튼을 CSS로 만드는 css3button HTML5,CSS3로 배경색상, 테두리, 그림자효과등을 손쉽게 선택하고 CSS 코드를 생성하는 사이트입니다. 위 그림과 같이 배경색상, 테두리, 바깥그림자, 안쪽 그림자, 폰트크기, 폰트그림자 효과등 다양한 설정을 클릭으로 가능합니다. 설정한 버튼 스타일시트는 위와 같이 출력되며, 해당 코드를 복사 , 붙여넣기만 하면 끝... 이미지편집을 하지 않아도 이쁜버튼을 손쉽게 만들수 있어요.. 참고로 크롬브라우저에서 접속해야 사이트 이용이 원활합니다..

CSS3는 모바일 환경에서 자주 사용되고 있지만, CSS3를 사용하려면 많은 부분을 알고 사용해야 함은 물론 화면으로 만들기에 번거로움이 있지만, CSS3maker를 이용하면 클릭만으로 코드생성이 가능하며 스타일을 미리 보면서 제작이 가능합니다. http://www.css3maker.com/ Gradient, Text, Shadow, Border Radius 등등 결과물을 미리 눈으로 보고 만들면 훨씬 시간이 절약될 수 있는 디자인요소가 많은 스타일을 눈으로 직접 보면서 설정이 가능합니다.

css3와 js를 이용하여 아코디언 형태의 ui를 만들수 있는 자료입니다 ^^ 어느정도의 css를 다룰수 있어야지 디자인이 수정 가능합니다 위 링크로 이동하시면 데모 및 자료 다운로드가 가능합니다. 페이지내에서도 간단한 html코드 및 css구성을 확인하실 수 있습니다. css3를 이용한 자료이기 때문에 ie하위버전에서는 동작이 안될수도 있는점 참고하세요~ 홈페이지 제작에 도움이 되시길 바랍니다 ^^