[CSS] animation을 이용해 hover시 배경색 변경하기

-
마우스를 올렸을때 animation 을 이용하면, 서서히 배경색이 바뀌는 방법은 덜 까다롭지만,위에서 부터 아래 방향으로 바뀌는 방법은 상대적으로 까다롭더라구요.그래서 코드도 정리할 겸, 포스팅을 하게되었습니다.가상선택자 :before 과 animation 을 이용했습니다.
코드는 아래와 같습니다.






keyframes과 animation 프로퍼티들은  ie 10버전 부터 적용됩니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

[CSS] 마우스 hover 시, transition을 이용해 배경색 채우기

-
블로그를 옮기고 첫번째 글입니다. 차근차근 코드들을 옮기고, 수정작업을 거칠 것입니다. 이번 내용은 css만으로, 움직임효과를 내는 것인데요. 마우스를 태그에 올렸을때, 왼쪽에서부터 오른쪽으로 배경색이 차는 듯한 효과를 낼 수 있습니다. 아래의 코드를 통해 자세한 사항이 확인 가능합니다. See the Pen jGxKpm by eunjun ( @eunjin10914 ) on CodePen .
자세한 내용 보기

[All] JavaScript 와 CSS를 이용해 글자크기 조절버튼 구현하기

-
이미지
관공서에 많이 쓰이는 형태면서, 돋보기 기능이라고 해야할까요. 브라우저를 줌인, 줌 아웃 시키는 기능을 JavaScript와 CSS를 이용해 구현하고자 합니다. CSS 속성중에 zoom 을 사용할 건데, 브라우저가 firefox인 경우에는 지원하지 않는 속성이기 때문에, firefox로 접속했을 경우에는 zoom 외에 transform의 scale() 를 적용해줘야합니다. 코드는 아래와 같습니다. See the Pen KZaRqJ by jemaime ( @eunjin10914 ) on CodePen .
자세한 내용 보기

[CSS3] CSS3를 이용해 input range 스타일링하기

-
HTML5 요소를 이용해, 손쉽게 range 을 조절할 수 있습니다. input element 의 type="range" 을 이용해서 말이죠. 물론, 최신 기술이다보니.. IE는 9버전 이상부터 지원합니다. 이 range 태그는 브라우저별로 상이하게 보이며, 미적으로도 평범? 하기때문에 수정이 하고싶다는 생각이 드실 수 있습니다. 그럴때는 CSS를 통해서 변화를 주실 수 있습니다. input[type=range] { -webkit-appearance : none ; /* 기본슬라이드 숨기기*/ width : 100% ; /* Firefox에서는 특정한 넓이가 필요*/ background : transparent ; /* Chrome에서 투명하게 출력 */ } input[type=range] ::-webkit-slider-thumb { -webkit-appearance : none ; } input[type=range] :focus { outline : none ; /* input range에 포커스 되었을 경우 기본 블러처리 제거 */ } input[type=range] ::-ms-track { width : 100% ; cursor : pointer ; /* IE에서 기본슬라이드 숨기기 */ background : transparent ; border-color : transparent ; color : transparent ; } 아래의 코드를 보면서 설명하겠습니다. See the Pen input range styling by jemaime ( @eunjin10914 ) on CodePen . 실질적인 CSS들은 많지 않은데, 크로스브라우징에 맞춰 속성을 주다보니 길어졌습니다. 접두어들이 붙으며 헷갈릴 수 있으니 잘 구분해서 사용하시길 바랍니다. 아래는 제가 참고한 참고사이트입니다. 제
자세한 내용 보기