Adobe Photoshop CC 에서는 레이어 스타일을 CSS 코드로 내보내는 편리한 기능이 있습니다. 그러나 CSS3 그라데이션 코드를 사용하는 경우 코드가 부족하기 때문에 중요합니다.

(※ 2017/12/27 추가 : Photoshop CC 2018에서도 같은 현상)

Photoshop CC에서 CSS 내보내기

Photoshop CC에서 CSS3 그라데이션 코드를 내보냅니다. 그라데이션이 설정된 레이어를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 CSS 복사를 선택합니다.


생성된 CSS의 그라데이션 설정 부분만을 추출하면 다음과 같이 됩니다.

CSS

background-image: -moz-linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);
background-image: -webkit-linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);
background-image: -ms-linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);

내보낸 그라데이션 코드의 문제점과 해결 방법

내보낸 위의 CSS를 실제 코드에서 사용하는 경우 두 가지 주요 문제가 있습니다.

문제점 1 그라디언트를 쓰는 방법이 다른 브라우저가 있다

그라데이션 코드는 브라우저 버전에 따라 다릅니다. 특히 Android2계 등의 낡은 Webkit 브라우저에서는, 상기의 코드에서는 그라데이션이 걸리지 않는 경우가 있습니다. 이전 Webkit 브라우저의 그라데이션 코드는 다음과 같습니다.

CSS

background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(233,95,118)), color-stop(100%,rgb(246,180,198)));

문제점 2 벤더 프리픽스가 불필요하게 되었을 때의 대응이 이루어지지 않았다

앞으로 CSS3가 공식적으로 권고되면 벤더 접두사를 사용하지 않는 코딩이 이상적입니다. 따라서 위에서 언급한 포토샵 코드에는 공급업체 접두사가 없는 다음 설명이 추가되어야 합니다.

CSS

background-image: linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);

CSS3의 그라데이션 기능 자체도 정식 권고가 아니기 때문에 (h tp // w w. w3. rg / Sty ぇ / Cs / 쿤 t-rk ) 이 코드 자체가 바뀔 가능성은 있습니다.

솔루션과 데모

위에서부터 Photoshop CC에서 내보낸 CSS3의 그라데이션 코드를 안전하게 사용하기 위한 코드는 다음과 같습니다.

CSS

background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(233,95,118)), color-stop(100%,rgb(246,180,198)));   /*古いWebkitブラウザ用の記述*/
background-image: -moz-linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);
background-image: -webkit-linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);
background-image: -ms-linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);
background-image: linear-gradient( 45deg, rgb(233,95,118) 0%, rgb(246,180,198) 100%);  /*ベンダープレフィックスなしの記述*/

이 CSS 코드를 사용하여 그라데이션 디스플레이의 데모를 jsdo.it로 업그레이드했습니다.
Photoshop CC CSS 내보내기 + α 그라데이션 - jsdo.it

마지막으로

Photoshop CC에서 둥근 모서리와 그림자를 사용하여 디자인 할 때 CSS 내보내기 기능은 매우 편리하며 코딩 할 때 유용합니다. 그러나 그라데이션 코드는 그대로 사용하는 것은 위험하기 때문에 부족한 코드를 더하거나 Ultimate CSS Gradient Generator 같은 웹 도구를 사용하면 좋을 것입니다.