CSS를 이용하여 INPUT에 애니메이션 효과주기
예제 1)
See the Pen input radio #0 by moksunung (@moksunung) on CodePen.
예제 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는 기본적인 원리만 파악해두면 다음은 퍼블리셔가 응용하기에 따라 무궁무진하게 표현될 수 있습니다. 설명이 조금 부실한데 궁금한 내용은 댓글로 주시면 답변드리겠습니다.
'공부 > HTML/CSS' 카테고리의 다른 글
CSS INPUT(CHECKBOX, RADIO) 애니메이션 효과 (13) | 2015.10.23 |
---|---|
CSS 버튼 애니메이션 효과 (2) | 2015.10.18 |
이런거 좋아요~
너무 좋아요~~~~
감사합니다 ㅋ
기초적인 수준이죠 ㅋㅋ
CSS에 Jquery까지 섞어서 휘황찬란한 결과물을 만들고 싶은데
아직 갈길이 멀죠 ㅎㅎ
놀러왔어용~~ 잘지내봐용
환영합니다. 잘 지내보아요 ^^
와우~!!
우와~!!
질문있습니다!
content: "\f111"; <- 이 content 의 의미는 뭔가요~? 체크박스에서
이대로 사용하려고 보니 계속 깨지네요 ㅠㅠ
왜일까요 ㅠㅠ
그건 글리피콘을 불러오는 코드입니다. 웹폰트화 시킨 아이콘을 불러오는건데요. Svg 라는 포맷으로 이미지를 만들고 글자관련된 유니코드에 아이콘을 엮어놓은 다음 해당 유니코드를 불러오면 글자처럼 아이콘을 불러올 수 있게 하는거에요^^ 그러니까 체크박스로 보이는 부분이 브라우저에서 생성하는 기본 체크박스가 아니라 그래픽인 셈이죠.
그래서 일까요 ㅠㅠ
체크박스를 체크하면 위에 포스팅에 result 처럼 체크된것으로 보이는게 아니라 그냥 테두리 색상만 변하고 말아버리네요 ㅠㅠ
뭐가 문제일까요 ㅠㅠ 그대로 붙여 넣어도 안되고 ...........ㅠ_ㅠ 흑 도와주세요! ㅠㅠㅠㅠㅠㅠㅠㅠ
작업중이신 url을 알려주세요~!
오 글리피콘이 이런거였군요!!! 너무 신기해요 ㅋㅋㅋㅋ
헤더에 bootstrap awesome 링크를 추가하니 해결이 되었어요!!!
블로그가 너무 깔끔하고 한눈에 잘들어와요!!
다음 포스팅도 기대할께요~!!! ^-----^
네ㅎㅎ 글리피콘은 아실거라는 가정하에 쓴글이다보니 ㅜㅜ 즐거운 하루 보내세요~! ㅋㅋ
비밀댓글입니다