728x90 반응형 CSS127 [SVG] 체크박스에 SVG 로 애니메이션 효과 넣기 라벨안에 svg 를 넣어줍니다. 체크하려면 클릭하세요. css를 이용해 check 되면 label 의 svg를 그리는 애니메이션을 추가합니다. input:checked ~ label .st1{ stroke:#000000; animation: dash 0.3s linear alternate 1; } See the Pen XwxeaB by gahyun (@gahyun) on CodePen. 2019. 5. 30. [CSS]3D 막대그래프 그리기 그림자를 이용해 3D의 입체적인 느낌을 나타낸다 background: #f49842; box-shadow: 1px -1px #d88a41, 2px -2px #d88a41, 3px -3px #d88a41, 4px -4px #d88a41, 5px -5px #d88a41, 6px -6px #d88a41, 7px -7px #d88a41, 8px -8px #d88a41, 9px -9px #d88a41, 10px -10px #d88a41; 스크립트 attr을 이용해 높이를 지정한다. for(var i=0; i 2019. 5. 30. [CSS] @media 이용해 인쇄용 CSS 보통 반응형 웹을 제작하기 위해 CSS에 @media 를 이용해 screen 사이즈에 따라 다르게 CSS를 지정해줍니다. @media 로는 screen 뿐만아니라 print 즉 인쇄물에도 지정할수 있습니다. 아래와 같이 지정한다면 해당 선택자는 화면에서는 잘 보이지만, 화면을 출력할 경우에는 출력되지 않습니다. @media print { 선택자 { display:none; } } screen - 모니터 화면 print - 인쇄 speech - 화면낭독기 all - 기본값으로 모든 장치에 적용됨 2019. 5. 30. [CSS]버튼에 쓸수 있는 애니메이션 :after을 이용해 선을 하나 그려주고 클릭시 선을 없애고 버튼을 살짝 이동해 눌리는 효과를 줄 수 있습니다. a:active{ top:5px; left:5px; } a:active:after{ border:0; } 아래에서 버튼을 클릭해서 효과를 눈으로 확인해보세요 See the Pen button by gahyun (@gahyun) on CodePen. 2019. 5. 30. 이전 1 ··· 10 11 12 13 14 15 16 ··· 32 다음 728x90 반응형