CSS3에 의한 커스텀 스타일

새로 추가된 커스텀 스타일로 디자이너와 개발자 사이의 거리는 더욱 작아졌습니다. CSS3 코드를 사용하여 요소의 모양과 동작을 직접 설정할 수 있습니다.

요소를 선택하면 속성 패널의 끝에 사용자 지정 CSS 섹션이 표시됩니다. 여기에 CSS 코드를 입력하거나 다른 소스에서 복사하여 붙여넣기하면 바로 결과가 표시됩니다. 이 예에서는 몇 번의 클릭으로 상자에 그림자를 추가합니다.

box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);

또한 요소의 모든 비주얼 설정에 한 번에 직접 영향을 줄 수도 있습니다. 이를 위해 저희는 CSS3 코드 생성기를 활용했습니다.

아래가 위의 예제에서 사용한 코드입니다:

width: 180px;
height: 60px;
border-radius: 30px;
color: rgba(0,0,0,1);
background: #ffffff;
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2);

모든 CSS 속성이 지원되는 것은 아니지만 여기에서는 사용 가능한 속성의 전체 목록을 소개합니다.

Background 속성:

'background'

'background-attachment'

'background-clip'

'background-color'

'background-image'

'background-origin'

'background-position'

'background-repeat'