CSS3 투명 그라디언트가 Photoshop ColorPicker와 비슷합니다.

CSS로 투명 그라디언트를 만들려고합니다. 색상 선택기 앱에 필요합니다. 사용할 수있는 투명 PNG가 있지만 크기가 20kb이며 새 HTTP 요청을 요청합니다. 코드는 초경량이어야합니다.CSS3 투명 그라디언트가 Photoshop ColorPicker와 비슷합니다.

여기까지 내가 한 일은 다음과 같습니다. http://jsfiddle.net/78SEK/ 위의 것과 좋은 것 중 하나는 CSS로 만들어졌습니다.

HTML5 캔버스로 시도했지만 정확한 일치를 얻을 수 없었습니다. 내가 할 수있는 방법이 있습니까? 고축

출처

2010-04-29 Mircea

왜 투명해야합니까? 당신이 오버레이로 사용한다면, 왜 PNG가 필요 할지도 모르겠다.하지만 css가 있어야만 하는가? –

예, 페이지 본문 색상으로 변경하면 Photoshop에서 색상 피커와 동일한 것을 사용하게됩니다. 나는 거의 불투명도를 포함한 PNG를 복사하려고한다. – Mircea

아, 생각합니다 ... 당신은 몇 가지 중첩 그라디언트가 있습니다. –

2 개의 그라디언트 만 있으면됩니다.

http://jsfiddle.net/SKFRS/

HTML :

<div id="white_grad"><div id="black_grad"></div></div> 
<p>CSS3 Gradient</p>

CSS :

#white_grad { 
    background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) repeat scroll 0 0 transparent; 
    height:255px; 
    width:255px; 
} 

#black_grad { 
    background:-moz-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) repeat scroll 0 0 transparent; 
    border:1px solid #333333; 
    height:255px; 
    width:255px; 
}

당신은 할 수 아래로 검은 상단에 투명에서가는 오른쪽으로 투명 왼쪽에 흰색에서가는 하나 하나의 또한 하단 그라디언트를 검은 색에서 원하는 색으로, 투명하지 않게 이동합니다. 그런 다음 배경 색상 수, 그리고 DIV 여전히 원하는 효과를 가질 것이다 :

http://jsfiddle.net/SKFRS/3/

당신이 프로그래밍 방식을 변경하려면 첫 번째 방법은 바닥 단색 배경 층, 아마 더 좋다.

출처

2010-04-29 18:15:13

고맙습니다. 방금 저를 구해 주셨습니다. 20Kb :) – Mircea

CSS3 투명 그라디언트가 Photoshop ColorPicker와 비슷합니다.

답변

관련 문제