CSS를 이용하여 INPUT에 애니메이션 효과주기
CSS의 transition 을 이용하여 애니메이션 효과를 만드는 예제입니다. 예제에 이미 HTML과 CSS에 대한 코드가 들어있으므로 앞으로는 코드를 늘어놓는 장황한 설명없이 기본적인 원리만 설명하고, 댓글로 달리는 질문에 답변드리는 방법으로 포스팅을 하겠습니다. (설명하는 글재주가 없어서요.) 이번에 올리는 체크박스와 라디오 예제들의 원리는 같습니다. 디자인을 변경할 수 없는 input은 display를 none으로 하여 감추고, input에 label을 엮은 뒤에 label과 input 의 가상클래스(Pseudo-class) :checked 를 디자인 하는 것입니다.
예제 1)
See the Pen input radio #0 by moksunung (@moksunung) on CodePen.
input은 디자인할 수 없기에 display:none; 하여 감춥니다. input의 id와 label의 for 속성값을 일치시켜 인풋과 라벨을 묶고 label의 기본을 디자인합니다. label 안에는
폰트어썸 글리피콘과, span으로 텍스트를 넣었습니다. 글리피콘과 텍스트의 기본 디자인을 글리피콘은 opacity값을 0으로 하여 감추고, 텍스트는 적절히 가운데 위치할 수 있도록 transform : traslateX(-값); 을 줍니다. 그리고 해당인풋이 check 상태일 때 글리피콘의 opacity를 1로하여 나타나도록 ,span의 위치를 원상복귀(transform : traslateX(0);) 되도록 코딩합니다.
예제 2)
See the Pen input radio #1 by moksunung (@moksunung) on CodePen.
input은 디자인 할 수 없기에 display:none; 하여 감춥니다. input의 id와 label의 for 속성값을 일치시켜 인풋과 라벨을 묶고 label의 기본 디자인을 완성합니다. 여기서는 label 가상선택자 ::before 에 네모 단색 글리피콘을 넣어 디자인했습니다. 디자인의 기본크기는 transform:scale3d(값,값,값); 에서 1보다 조금 작게 해두고, hover했을 때, 1로 돌아오게 check 되었을 때 글리피콘이 단색 글리피콘이 아닌 체크박스 글리피콘이 나타나게 합니다.
CSS는 기본적인 원리만 파악해두면 다음은 퍼블리셔가 응용하기에 따라 무궁무진하게 표현될 수 있습니다. 설명이 조금 부실한데 궁금한 내용은 댓글로 주시면 답변드리겠습니다.
이런거 좋아요~
너무 좋아요~~~~
감사합니다 ㅋ
기초적인 수준이죠 ㅋㅋ
CSS에 Jquery까지 섞어서 휘황찬란한 결과물을 만들고 싶은데
아직 갈길이 멀죠 ㅎㅎ
놀러왔어용~~ 잘지내봐용
환영합니다. 잘 지내보아요 ^^
와우~!!
우와~!!
질문있습니다!
content: "\f111"; <- 이 content 의 의미는 뭔가요~? 체크박스에서
이대로 사용하려고 보니 계속 깨지네요 ㅠㅠ
왜일까요 ㅠㅠ
그건 글리피콘을 불러오는 코드입니다. 웹폰트화 시킨 아이콘을 불러오는건데요. Svg 라는 포맷으로 이미지를 만들고 글자관련된 유니코드에 아이콘을 엮어놓은 다음 해당 유니코드를 불러오면 글자처럼 아이콘을 불러올 수 있게 하는거에요^^ 그러니까 체크박스로 보이는 부분이 브라우저에서 생성하는 기본 체크박스가 아니라 그래픽인 셈이죠.
그래서 일까요 ㅠㅠ
체크박스를 체크하면 위에 포스팅에 result 처럼 체크된것으로 보이는게 아니라 그냥 테두리 색상만 변하고 말아버리네요 ㅠㅠ
뭐가 문제일까요 ㅠㅠ 그대로 붙여 넣어도 안되고 ...........ㅠ_ㅠ 흑 도와주세요! ㅠㅠㅠㅠㅠㅠㅠㅠ
작업중이신 url을 알려주세요~!
오 글리피콘이 이런거였군요!!! 너무 신기해요 ㅋㅋㅋㅋ
헤더에 bootstrap awesome 링크를 추가하니 해결이 되었어요!!!
블로그가 너무 깔끔하고 한눈에 잘들어와요!!
다음 포스팅도 기대할께요~!!! ^-----^
네ㅎㅎ 글리피콘은 아실거라는 가정하에 쓴글이다보니 ㅜㅜ 즐거운 하루 보내세요~! ㅋㅋ
비밀댓글입니다