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

css3로 만든 다양한 호버효과 모음 hover.css는 css3로 만든 다양한 호버효과를 확인 하실 수 있습니다. github에서 다운받아서 개인용, 오픈소스용으로 사용하실수 있습니다.(상업용은 유료입니다.) 데모사이트에서 2d전환효과, 배경전환효과, 아이콘효과, 테두리효과, 그림자&글로우효과, 말풍선효과, 접힌 효과를 확인하실 수 있습니다. 사용방법은 github에서 다운받으신 후, hover.css에 사용하실 효과를 찾으셔서 css를 붙여넣으시면 됩니다. 그리고 사용할 요소에 class를 적용하시면 됩니다.

유명 SNS아이콘 등 다양한 버튼을 3D 효과로 나타낼 수 있는 소스를 제공해주고 있는 사이트 입니다. https://flashuser.net/tutorial/css3-social-media-buttons/

CSS로 이미지에 흐림효과 (Blur) 적용하는 방법으로, 편집프로그램이 없이도 이미지에 충분한 효과를 적용할 수 있는 편리한 기능입니다. -webkit-filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); -ms-filter:blur(3px); filter:blur(3px);

코딩작업시 자주 문제점에 봉착을 하게되며 이에대한 답을 얻기위해 구글링을 통해 찾게된 OACSS입니다. 반응형웹에서 div의 너비높이 비율을 유지 시킬 수 있나요?생각처럼 동작하지 않는 height: 100%div 가로 가운데 정렬 |CSS 가운데 정렬 특집여러 div를 몽땅! 가로 가운데 정렬 CSS 가운데 정렬 특집img태그 하단에 생기는 알 수 없는 빈 공간 파헤치기CSS 텍스트 요소 가로, 세로 가운데 정렬 div 가로세로 모두 가운데 정렬 with positionCSS EM의 유래 이야기 | EM과 REM 특집CSS EM단위로 만들 수 있는 3가지 예제 | EM과 REM 특집CSS REM단위를 이용한 반응형 예제 | EM과 REM 특집CSS 선택자 우선순위 이모저모너비높이를 알 수 없는 div ..

Css 그리드 레이아웃을 이용하여 만들어진 사이트를 모아서 볼수있는 사이트입니다. 자신이 만든 사이트도 제출할 수 있으며 grid 레이아웃을 만들기위해서 float, lnline, inline-block, table-cell등 다양한 코드를 이용하여 만들지만 구성에따라 틀어짐이 발생하기에 다른사람들은 어떻게 만들었는지 참고하기 좋은 곳입니다. 그리드 레이아웃은 아래의 링크를 참고하세요 [그리드 레이아웃]

인풋박스를 클릭하여 값을 입력할 떄 생기는 테두리를 없앨 수 있는 CSS소스를 알려드립니다. focus를 활용하여 테두리를 지울 수 있습니다. input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 input:focus {outline:2px solid #d50000;} input 박스를 클릭 했을떄 나오는 테두리 색상 없애기 input:focus {outline:none;}

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

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. CSS 결과 위와 같은 방법으로 텍스트를 디자인할 수 있습니다. 그외에도 방향과 값에 따라서 다양한 디자인 효과를 연출해낼 수 있습니다. CSS 결과 그 외 더욱 다양한 효과를 보고싶다면 아래의 링크로 활용해보시기 바랍니다. 더욱 다양한 효과 활용하기

하이라이트 되는 애니메이션 메뉴 CSS3 입니다. 익스플로러 10 이상, 크롬, 파폭에서 실행이 가능한 소스입니다. 첨부파일에 해당 html 파일과 css 파일이 첨부되어있습니다.

원하는 버튼을 결정하신후 클릭하면 버튼의 사이즈 테두리 모서리 그림자효과 등등 자유롭게 설정이 가능합니다. 버튼의 설정이 완료가 된 후 Copy code 버튼을 클릭하면 코드가 복사됩니다. 편집프로그램을 열어 Ctrl + v를 하면 복사된 코드를 확인하실 수 있습니다.