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

웹 사이트 꾸미기에 적합한 효과입니다.카드 디자인에 어울릴거 같습니다.자세한 내용은 데모를 참고해 주시기 바랍니다.HTML Dramatic Electric Border ..

보더의 색상이 그라디언트로 색상으로 되어 있습니다.마우스오버시 애니메이션 효과가 있습니다.아래 소스에서 포지션으로 버튼의 테두리에 여백을 만들어서 뒤에 그라디언트 배경색이보이게 하는 방식으로 제작 되었습니다.해당 사이트 또는 첨부된 파일을 다운로드 하시면배경 그라디언트 소스외에 애니메이션 소스도 확인할 수 있습니다.

보더 차제에 애니메이션과 그라데이션을 적용하는 것이 아니라여백을 주어 해당 여백에 애니메이션과 그라데이션을 적용하여 보더처럼 만드는 방식입니다.--borderWidth 라는 변수를 사용하여 손쉽게 여백의 크기(보더의 굵기)를 조절할 수 있습니다.

테두리를 맞춤으로 설정할 수 있는 사이트입니다.기존 'border:1px dashed #000000' 코드를 사용하면 점 사이의 공간을 조절할 수 없습니다.하지만 해당 사이트에서는 background-image 코드를 사용하여 점 사이의 공간을 줄이거나 늘릴 수 있습니다.1. 사용하고 싶은 테두리를 선택2. 가로, 세로, 획, 점 사이의 공간 등 설정 3. 테두리 색상, 배경색상 설정 4. 만들어진 background-image 코드를 복사하여 붙여넣기 CSS 테두리를 맞춤으로 설정할 수 있는 사이트입니다.

border-image 속성으로 간편하게 테두리 효과를 줄수 있는 CSS border-image 속성으로 간편하게 테두리 효과를 줄수 있는 CSS생성기입니다. 원하는 배경이미지를 업로드 하고 원하는 위치대로 마음대로 지정해서 생성하면 됩니다. 다양하게 이용이 가능하며, 브라우져별 주의 사항에 따라서 이용하시면 좋습니다. 고해상도 이미지를 쓰실려면 이미지 영역값만 두배로 설정해서 하시면 됩니다. border-image의 Offset값이 10으로 세팅있으면, border-width는 그대로 두고 Offset값만 20으로 설정하면 됩니다.