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

Multiple CSS3 powered hover effects : CSS3 버튼 효과 또한, 데모사이트에서 아이콘, 테두리, 배경 등 여러가지 버튼 효과를 확인하실 수 있습니다.

다양한 그라디언트를 미리보기로 직접 확인하고 CSS코드도 바로 확인이 가능한 편리한 사이트입니다. 미리보기 페이지에서는 좌우 스크롤 버튼을 확인할 수 있고. 클릭시 다음 색상으로 이동됩니다. 하단의 버튼들중에서 첫번째 버튼은 그라디언트 리스트를 한눈에 확인할 수 있어, 스크롤버튼으로 이동하는것보다 빠른 선택이 가능합니다. 끝에 있는 버튼은 해당 그라디언트의 CSS코드로 복사가 손쉽게 되도록 버튼이 마련되어있습니다.

처음에 홈페이지를 제작하실때 어떻게 시작을 해야할지.. 디자인을 구상하고 적용하기가 많이 어려우실껀데요^^ 이때는 제가 알려드리는 openwebdesign 사이트를 방문하셔서 무료 디자인 소스를 다운받아 홈페이지 제작에 유용하게 사용해보세요^^ 이미지에서도 보실수 있지만 다양한 스타일로 제작이된 무료소스들이 아주 많아 원하시는 디자인을 다운받아 홈페이지 제작에 유용하게 사용하시기 바랍니다~ (무료니깐 걱정하지마시고 받아가세요~)

일전에도 Sprite 이미지를 Css로 변환해주는 사이트를 올렸지만.. 조금 불편해서 다른곳을 찾는중에 더 괜찮은곳을 찾아서 소개해드립니다. 이미 만들어둔 Sprite 이미지를 이용하여 클릭만으로 하단에 CSS코드를 생성해 줍니다. 그리고 하단의 2* 와 %는 각 각 레티나용 그리고 백그라운드 포지션을 %로 이용할시에 선택하는곳이며 선택시 각 각 css코드가 변경이되게 됩니다. Select Sprite를 클릭하여 선택한다음 Css를 확인하신 후 작성해주시면 쉽게 적용이 가능합니다. 이전의 사이트와는 조금 다른점은 이전 사이트에서는 이미지를 이용하여 만들어주는 곳이었지만. 여기는 제작한 이미지가 있어야 한다는점이 조금 다른점 입니다. 사용하기 편하신곳으로 아무곳이나 이용하셔도 좋을듯합니다 ^^

블럭형태의 요소가 사라지면서 뒤에 숨겨져 있는 텍스트 또는 이미지등이 나오는 효과를 확인할 수 있습니다. https://tympanus.net/Development/BlockRevealers/ 위 링크페이지에서 데모를 확인하실 수 있으며 페이지를 스크롤하면 블럭요소들이 사라지면서 나타나는 텍스트 및 이미지 그리고 효과를 보실 수 있습니다. 데모페이지 하단에 보시면 위 press 버튼을 눌러 사용자가 직접 확인할수도 있습니다. 파일을 다운로드 받으시면 여러가지 폴더와 다양한 파일들중 디자인과 스크립트로 데모를 구성하고 있는 index.html 그리고 블럭요소를 지정한 지정한 css/revealer.css 파일을 확인하시면 됩니다. html5의 트랜스폼을 이용하여 출력되는 효과이기 때문에 익스플로러 하위버전..

미리보기 화면을 보면서 손쉽게 그림자 소스를 생성이 가능합니다. 아래와 같은 옵션이 있습니다. Horizontal Lengthpx, Vertical Lengthpx, Blur Radiuspx, Spread Radiuspx, Shadow Color, Background Color, Box Color, Opacity 미리보기 부분의 소스를 복사하여 사용하시면 됩니다.

심플한 이펙트부터 유니크한 이펙트까지 다양한 마우스 오버 효과가 있습니다. 아래와 같이 각각의 이펙트별 html 소스와 css 소스를 분리하여 보기쉽게 잘 정리되어 있습니다.

CSS로 말풍선을 간단히 생성/디자인하는 Bubbler 입니다. 간단한 조작으로 말풍선을 생성하고 CSS를 확인하여 적용할 수 있습니다. [ 말풍선 디자인툴 ] 데모페이지 하단에서 말풍선 디자인과 관련된 툴을 확인하실 수 있습니다. [ 말풍선 디자인 미리보기 ] 편집툴의 상단에서 즉시 적용되어 보여지는 말풍선 디자인을 확인할 수 있습니다. 원하는 말풍선 디자인을 완성한후 우측 화면상단의 CSS버튼을 클릭하면 펼쳐지는 CSS소스를 확인할 수 있습니다.

간단히 마우스 드래그만으로도 원하는 줄 도는 칸을 드래그하여 정렬할 수 있는 테이블 소스입니다. 사이트 주소에서 데모 링크 밑 첨부파일을 다운받으실 수 있으며 데모링크에서 다양한 형태의 테이블요소 드래깅을 확인하실 수 있으며 데모에서도 확인하실 수 있는 적용될 테이블 id와 드래깅 핸들러 클래스 추가로 적용하실 수 있습니다. ex) id="row_table" 이 선언되어 있는 테이블의 드래깅 핸들러는 class=handle" 입니다. 즉 class=handle 을 이용하여 각 테이블 드래깅 요소에맞에 줄 칸 이동을 할 수 있습니다. 더 자세한 사항은 데모사이트 또는 파일을 다운받으셔서 확인하시면 됩니다. 사이트 제작에 많은 도움이 되었으면 좋겠네요 ^^

N-WAX 는 NHN 에서 개발되어 배포가 되는 웹 접근성 진단 Plug in 입니다. FireFox 와 Chrome 모듈이 제공 되지만 해당 페이지에 FireFox에 대한 다운로드 링크만 제공되고 있네요. FireFox 웹브라우저에서 아래 링크로 접속 하시면 플로그인 설치가 가능 합니다. https://addons.mozilla.org/ko/firefox/addon/n-wax/ 플러그인 설치가 완료되면 주소창 옆에 초록색으로 된 사다리 아이콘이 노출 되고, 해당 아이콘을 클릭시 N-WAX 프로그램이 구동 됩니다. 사다리 아이콘을 클릭시 "현재 페이지 검사" 버튼이 노출이 되고, 해당 버튼을 클릭시 각각의 항목별로 검사 결과를 볼 수 있게 됩니다. 각각의 탭 메뉴를 클릭시 펼쳐지며 세부 내용 확인이 가능..