[2015.11.25] CSS3 Music Player UI

아이디어도 좋고~ 레이아웃도 좋고~ 굿굿굿~ㅎ

오늘 코드에서는 크게 어려운 부분은 없네요~

간단하게 요소를 화면 가운데 정렬하는 여러 방법중에 여기서 사용된 50% 기법을 잠깐 살펴보겠습니다.

.music-player-container {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  height: 370px;
  position: absolute;
  min-width: 460px;
  left: 50%;  top: 50%;
}

​

left: 50%; top: 50%;

transform: translate(-50%, -50%);

요놈들 보이시나요?

요소의 시작점을 딱 화면 중앙에 오게 위치 시킨 상태에서 자신의 크기의 50% 만큼씩 다시 이동시킨겁니다~

이렇게 많이들 사용하시더라구요~ㅎ

간단한 사용 예제 및 Demo

See the Pen UI Challenge - Week 6 by Matt Stvartak (@mattstvartak) on CodePen.