완전 깔끔하고 이쁜 애플 키보드를 css로 디자인해 놓았네요.
구현방법을 간단히 정리해보자면
키보드 배열 한줄씩 ul로 묶어서 li 요소를 float: left 로 한줄로 정렬했네요
display 속성을 inline-block으로 설정하여 자동적으로 내부 여백이 1px 잡히는게 있어서 float 를 사용한게 아닐까 합니다.
각각 특수키에 해당하는 버튼은 id를 지정하여 스타일을 각각 지정해주었네요
오늘은 그냥 코드들을 주욱 훑어보면 될 것 같습니다. ㅎㅎ
간단한 사용 예제 및 Demo
See the Pen Re: Apple Keyboard in pure CSS. by Joey Anuff (@januff) on CodePen.
'Dev. 웹 > Front-end 웹개발을 위한 codepen' 카테고리의 다른 글
| [2015.12.29] javascript pairs games - 짝맞추기 게임 (0) | 2015.12.29 |
|---|---|
| [2015.12.24] Flat UI kit - Freebie PSD (blog) (0) | 2015.12.24 |
| [2015.12.18] CSS3 paper folding effect - 마우스 오버시 종이 접은 효과 구현 (0) | 2015.12.18 |
| [2015.12.16] Dropdown button :: Pure CSS - 순수 css 로만 구현된 드랍다운 버튼, 구현방법 (0) | 2015.12.16 |
| [2015.12.14] CSS3 시계 디자인 - pie time, html5 canvas 함수 예제 (1) | 2015.12.14 |