CSS3 썸네일형 리스트형 css3를 활용하여 모션주기. transition 문법transition property duration timing-function delay; 사용예-webkit-transition: all 2s ease; JavaScript로 사용object.style.transition=“width 2s”; Prefix -o-box-shadow -moz-box-shadow -webkit-box-shadow Prefix 는 표준제정 이후에도 유효 ---------------------------------------------------------------------------Property Description---------------------------------------------------------------------------transition.. 더보기 css3 transform을 사용하여 모양 변형 시키기 transform은 엘리먼트를 변형할 수 있도록 만드는 스타일입니다.webkit계열이나 오페라 파이어폭스는 각Prefix에 맞게 사용하면 됩니다.Prefix -o-box-shadow -moz-box-shadow -webkit-box-shadow Prefix 는 표준제정 이후에도 유효합니다. 문법transform : 메서드() Sample -webkit-transform: rotate(90deg) scale(1.2) skew(2deg); JavaScript로 스타일 넣는 방법 object.style.transform=“rotate(3deg)”; -------------------------------------------------------------------------------Function Des.. 더보기 css3 모서리가 둥근 사각형 만들기 사각형의 모서리를 둥글게 하려면 예전에는 이미지 파일을 사용하였으마 CSS3에서 border-radius 속성값을 지정하는 것만으로도 구현할 수 잇게 되었습니다. 사용방법-webkit-border-radius: 15px; 코드 예를 살펴보죠. 첫번째 박스 두번째 박스 세번째 박스 코드를 실행하면 이런 결과가 나옵니다. 더보기 css3를 사용하여 box-shadow 그림자 구현하는 방법 사용법box-shadow: h-shadow v-shadow distance color---------------------------------------------------------------------Value Description---------------------------------------------------------------------h-shadow 필수값. 그림자 시작 위치 (가로방향). 음수값 허용v-shadow 필수값. 그림자 시작 위치 (세로방향). 음수값 허용distance 그림자와의 거리 (멀어질수록 뿌옇게 보인다)color 색상--------------------------------------------------------------------- 사용예box-sh.. 더보기 opacity 사용하는 방법 다음 소스코드를 실행해 봅시다. HTML5 : CSS3 Opacity 스타일의 opacity라는 속성을 사용하면 투명도를 조절할 수 있습니다.위의 예제에서는 div태그 전체가 투명도가 20%가 적용됩니다. 컬러를 black으로 설정했는데 이렇게 흐린 글씨로 표시되면 잘 된 것입니다. 더보기 이전 1 다음
