반응형 CSS311 [CSS3] 배너에 그림자를 입히는 원리② ※ 발췌 : 따라하면서 배우는 HTML5 + CSS3 + jQuery + JavaScript 실무활용 14가지 - 위키북스 배너에 그림자를 입히기에 앞서서 rotate와 skew 에 대해서먼저 살펴보겠습니다. 1. rotaterotate는 지정한 각도만큼 회전시킵니다. 지정하는 값에 따라 기준축을 중심으로 회전합니다. 2014. 3. 7. [CSS3] 배너에 그림자를 입히는 원리① ※ 발췌 : 따라하면서 배우는 HTML5 + CSS3 + jQuery + JavaScript 실무활용 14가지 - 위키북스 배너에 그림자를 입히기에 앞서서 box-shadow에 대해서먼저 살펴보겠습니다. box-shadow properties 속성값 설명 h-shadow 그림자의 수평거리(입력한 만큼 떨어져 위치) 음수 양수 모두 가능 v-shadow 그림자의 수직거리(입력한 만큼 떨어져 위치) 음수 양수 모두 가능 blur 그림자의 경계의 흐림 정도 spread 그림자의 확장거리(그림자를 배너보다 크거나 작게 만든다)음수 양수 모두 가능 color 그림자의 색상(16진수 외에 rgba, hsla로도 가능-투명도 조절할 수 있음) inset 내부그림자(inner-shadow와 같음) 적용 ①수평거리 3p.. 2014. 3. 7. [CSS3] CSS 접두어의 종류 접두어는 CSS가 어떤 웹 브라우저에서도 호환될 수 있게 브라우저 업체별로 사용하는 일종의 약속된 문구입니다. 접두어의 종류 접두어 업체별 브라우저 -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o-, -xv- Opera Software -atsc- Advanced Television Standards Committee -wap- The WAP Forum -webkit- Safari, Chrome (and other Webkit-based browsers) -kthml- Konqueror browser -apple- Webkit supports properties using the –apple- p.. 2014. 3. 7. [CSS3] 3D Image Slider 3D Image Slider Image 1 Image 2 Image 3 Image 4 Click me to toggle transparency #controls, #transparency { text-align:center; } #controls span { padding-right:2em; cursor:pointer; } #cubeCarousel { -webkit-perspective: 800; -moz-perspective: 800px; -ms-perspective: 800; perspective: 800; -webkit-perspective-origin: 50% 100px; -moz-perspective-origin: 50% 100px; -ms-perspective-origin: 50% 100px;.. 2014. 2. 26. 이전 1 2 3 다음 반응형
