일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- #CSS
- #happycgi
- CGIMALL
- 홈페이지제작
- javascript
- #홈페이지
- 홈페이지
- 해피씨지아이
- 웹솔루션
- php
- 사이트제작
- happycgi
- #쇼핑몰
- 쇼핑몰
- 해피CGI
- #홈페이지제작
- 게시판
- #동영상
- #업종별
- #솔루션
- jquery
- #해피CGI
- #jQuery
- #뉴스
- CSS
- 솔루션
- #웹솔루션
- #cgimall
- #image
- #이미지
- Today
- Total
목록웹프로그램밍 자료실/HTML 자료 (268)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
html과 css 만을 이용하여 만든 썸네일 오버레이 효과입니다. 마우스를 오버하시면 오버레이된 박스쉐도우가 점점 얇아지면서 썸네일이 보이는 효과입니다. 해당 사이트에서 html, css 소스코드를 확인할 수 있습니다. css를 수정하여 투명도 색상등을 자유롭게 수정이 가능합니다.
자바스크립트 도움없이 애니메이션 효과를 만들 때 사용합니다. 즉 변화가 부드러운 애니메이션을 의미합니다. 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; }..
위와 같은 디자인 작업시 파란 박스 리스트에 float:left로 정렬을 시키고 오른쪽이나 왼쪽에 마진이나 패딩값을 주고, 마지막 또는 첫 박스에 해당 마진이나 패딩을 없애주는 방법을 주로 사용합니다.
Pure CSS Image Hover Effect Library 쉽게 확장이 가능한 이미지 마우스 오버 효과입니다. 총 44가지 효과가 있으며 무료로 소스를 다운로드 받으실수 있습니다. 사이트 상단의 free 버튼을 클릭하시면 css 소스를 다운로드 받으실수 있습니다. 효과별로 css 가 정리되어 있습니다.
이미지를 마우스로 클릭하면 해당 이미지가 확대됩니다. 닫기 버튼을 클릭하면 원래의 크기로 돌아갑니다. 해당 사이트에서 htm, css 소스를 확인할수 있고 사이트에 소스에 대한 자세한 설명이 되어있습니다.
링크를 통해서 이동하시면 무료글꼴 및 상업용으로 사용가능.불가능 등을 표를 통해서 정리되어 있습니다. 폰트에 관련된 궁금증을 한방에 해결해주는 글이네요 ^^ 위 글꼴외에도 링크를 통해서 더 자세한 글꼴과 다운로드 링크를 확인할 수 있습니다. http://www.bloter.net/archives/201916?rccode=lvRc 참고하셔서 걱정없이 폰트를 사용해 보세요
총 4가지의 에니메이션 효과가 있습니다. 모두 css를 이용하여 디자인 되어 있으며 약간의 스크립트를 사용합니다. css 수정으로 간단하게 버튼의 크기, 패딩, 두께, 색상 등을 수정이 가능합니다. 각각의 버튼별로 css 가 설명이 되어있습니다. 공통으로 사용하는 css 가 많으므로 사용상 어려움이 없습니다. 하단의 다운로드 소스 버튼을 클릭하여 css 및 스크립트 소스를 다운로드 받으실 수 있습니다.
4가지 형태의 토글 스위치가 있습니다. 체크박스는 디자인 변경이 안되므로 css trick을 이용한 디자인입니다. ie10 버전이상 크롬에서 정상작동 합니다. 스크립트를 이용한 에미메이션 효과가 각 버튼별로 있습니다. 버튼별로 css 소스가 정리되어 있으며 해당 페이지에 구현 원리에 대해 설명되어 있습니다. 하단의 다운로드 버튼을 클릭하여 소스를 다운로드 하실 수 있습니다.
HTML5 태그는 웹브라우저에서 오디오파일을 재생하게 해줍니다. 재생되는 파일 형식은 브라우저마다 일부 차이가 있으며, MP3, WAV, Ogg 가 있습니다. 브라우저마다 재생되는 파일은 w3school.com에서 확인하시면 됩니다. 태그 속성은 아래와 같습니다. src : 음악파일의 경로 설정 preload : 재생전에 모두 불러올지 설정 autoplay : 음악의 자동 재생여부 설정 loop : 반복 재생 설정 controls : 음악재생 인터페이스를 보이기 할지를 설정 브라우저 마다 플레이어가 다르니 참고하세요.. 손쉽게.. 오디오 파일을 웹브라우저에서 재생할 수 있어 다양하고 손쉽게 이용이 가능합니다.
HTML코드에 CSS를 이용하여 필터효과를 가능하게 하는 플러그인입니다 ^^ 기본적인 사용법은 링크를 통해 사이트에서 확인하실 수 있으며 예제 확인 및 다운로드도 가능합니다. 아래의 필터 효과들을 사용할 수 있습니다. blur grayscale hue-rotate saturate sepia contrast invert opacity brightness drop-shadow - Supports only black color. Requires 4 values. The 4th value instead of color is opacity 0 to 100%. svg - Custom SVG filter. Requires 1 value - filter ID. color - Requires 2 values. Color..