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

메뉴이동시 타임라인이 함께 스크롤되어 사이트의 역동성을 표현할 수 있습니다. 메뉴를 클릭하면 타임라인이 함께 이동합니다. 압축파일안에 포함된 html이나 css를 이용하여 스타일을 변경해줄 수 있습니다.

물체의 움직임을 애니메이션으로 제작하고 그 움직임을 CSS3를 이용하여 출력할 수 있는 생성기입니다. 데모사이트 확인시 크롬사용을 권장합니다^^

코딩시 필수 CSS3를 자동으로 작성해줍니다. 매번 기억이 나지않는 코드를 검색하느라 시간을 다보낼수도 있는데. 위 사이트에서 원하는 항목을 클릭 후 자연스러운 효과를 미리보고 코드를 복사 하시면 됩니다 ^^ 위 이미지는 백그라운드 그라디언트 옵션을 선택했으며 좌->우, 헥스코드 붉은색에서 녹색의 효과를 주었습니다. 우측영역에서 위 옵션에대한 브라우저별로 사용될 css코드가 나오며 하단에는 적용된 코드의 미리보기를 확인할수 있습니다. 효과를 다중으로 적용가능하며 동일하게 우측의미리보기에서 확인하실 수 있습니다. 좌측의 css목록 선택창에서 X버튼을 클릭하여 적용된 효과 삭제도 가능합니다. Css3뿐만이 아닌 Sass(자바스크립트에서 변수 선언을하여 반복되는 Css작업을 일반 프로그래밍하듯 Css를 작성하..

다양한 CSS3 효과를 한눈에보고 다양한 효과를 guthub에 공개된 소스를 이용하여 홈페이지에 반영할 수 있습니다. https://github.com/leaverou/animatable 위 링크에서 소스를 다운받으실 수 있으며 제작하는 사이트에 적용하시면 됩니다 ^^ css3를 공부하시는 분이라면 소스파악에 도움이 될듯하며 급하게 다양한 효과를 사이트에 반영하고 싶으신분에게는 좋은 자료가 될것 같습니다.

CSS3 그라데이션을 손쉽게 만들어주는 CSS생성 사이트 몇번의 클릭만으로 원하는 색상의 그라데이션 CSS를 생성해 주는 사이트입니다. 해당 사이트에는 투명도,위치, 컬러값, 그라데이션 기준값, 크기, 등등 다양한 항목의 값을 몇번의 클릭으로 선택하여 CSS 생성이 가능합니다. 또한 생성된 CSS는 위와 같이 손쉽게 복사할 수 있도록 제공되네요. 복잡하게 만들지 않고 손쉽게 만들고 쓸수 있어서 좋네요.

사이트에서 배경이미지 및 html5/CSS3 등 자료를 검색하면, 무료 자료가 많습니다. 소스를 참고하여 따라하거나 활용해 보실 수 있겠습니다. http://designinstruct.com/web-design/code-a-vibrant-professional-web-design-with-html5css3/ http://designinstruct.com/free-resources/10-free-clean-minimal-resume-templates-help-get-job/

자바스크립트 도움없이 애니메이션 효과를 만들 때 사용합니다. 즉 변화가 부드러운 애니메이션을 의미합니다. delay, property, duration, timing-function 의 4가지 속성을 가지고 있으며 property에서 지정한 속성의 값이 변경 될 때 자연스럽게 표현됩니다. transition속성 transition-property : 속성 transition-duration : 지속시간. transitin-timing-function: 지정시간동안 트랜지션 속도 사용예) 해피CGI a { text-decoration:none; } a.footer { padding:10px 20px; background:#0c4da2; } a.footer:hover{ background:#3baee7; }..

웹서핑 도중에 css3관련해서 아주 괜찮은 사이트를 찾아서 등록합니다~ css3 generator란 사이트구요.. css3에 관련해서 아직 많이 생소해서.. 막상 적용해 보려고해도 실제로 쓰이는 코드가 기억이안나고. 여러 브라우저에서 적용할려면 코드가 각각 다를수도 있기에 막막합니다 ㅜㅜ 와중에 자동으로 생성해주는 사이트를 찾았네요.. ㅎㅎ 자기가 원하는 속성을 선택후 값을 입력하면 자동으로 코드를 만들어주고 미리보기도 보여주는! 익스플로러 11도 출시가되고 익스 저버전에서도 css3가 구동될수 있도록 라이브러리를 많이 제공하고 있으니. 나만의 멋진사이트를 만들기에 참고하기 아주좋은 사이트네요 ㅎㅎ 도움이 되셧길 바랍니다