728x90 반응형 CSS127 [CSS]별점효과 구현하기 왼쪽 오른쪽으로 분리해 0.5점씩 총 5점의 별점을 매길 수 있도록 구현하였다. 별을 클릭하면 클릭한 위치까지 (on) 색칠된다. See the Pen star by gahyun (@gahyun) on CodePen. 2019. 6. 10. [CSS] 마우스 커서 간단하게 이미지로 변경하기 이미지 아래 네모박스에 마우스를 올려 확인해 보세요. cursor 속성에 url을 넣으면 적용됩니다. 이때 url이 적용되지 않을 경우에 적용될 기본값을 꼭! 함께 넣어야 적용됩니다. See the Pen cursor by gahyun (@gahyun) on CodePen. 기본값은 아래의 링크에서 보실 수 있습니다. https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor cursor CSS 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다. developer.mozilla.org 2019. 6. 4. [CSS] 이미지 hover 효과 애니메이션 이미지에 대한 정보를 다양한 방법으로 표현하기 See the Pen img hover animation by gahyun (@gahyun) on CodePen. [CSS/CSS 응용] - 이미지 hover 할때 다른 이미지로 교체 [CSS/CSS 기초] - [CSS3] 이미지에 hover 애니메이션 효과 넣기 [javascript/javascript] - 마우스 따라 움직이는 효과 2019. 6. 4. [CSS] text-shadow 다양하게 적용하기 p.p1{ text-shadow: 5px 5px #ccc; /* 오른쪽 5px 아래 5px #ccc로 그림자 */ } p.p2{ text-shadow : 5px 5px 5px #ccc; /* 오른쪽 5px 아래 5px 번짐 5px #ccc로 그림자 */ } p.p3{ text-shadow: 1px 1px #ccc, 2px 2px #ccc, 3px 3px #ccc,4px 4px #ccc,5px 5px #ccc; /* 오른쪽 1~5px 아래 1~5px #ccc로 그림자 여러개 적용 */ } p.p4{ text-shadow : 0 1px #ccc, 0 2px #ccc, 0 3px #ccc, 0 4px #ccc, 0 4px #ccc; /* 오른쪽 0 아래 1~4px #ccc로 그림자 여러개 적용 */ } p.p.. 2019. 6. 4. 이전 1 ··· 8 9 10 11 12 13 14 ··· 32 다음 728x90 반응형