2010-03-25 6 views
4

이미지 대신 그라디언트를 만드는 데 CSS를 사용하면 부정적이지는 않습니까?이미지 대신 CSS 그래디언트 사용

예를 들어 다음 코드를

#gradient { 
    color: #fff; 
    height: 100px; 
    padding: 10px; 
    /* For WebKit (Safari, Google Chrome etc) */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff)); 
    /* For Mozilla/Gecko (Firefox etc) */ 
    background: -moz-linear-gradient(top, #00f, #fff); 
    /* For Internet Explorer 5.5 - 7 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); 
    /* For Internet Explorer 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; 
} 

감사합니다.

+0

코드를 올바르게 게시하십시오. http://stackoverflow.com/editing-help – Crozin

답변

0

예제에서 설명한 것처럼 현재 일반적으로 사용되는 모든 브라우저에서 작동하는 방법은 없습니다. 유지 관리와 코드 가독성 측면에서 "부정적"이라고 생각합니다.

건설적인 비판의 비트 : 당신이 찾고있는 단어는 "순간적"이 아니라 "대신"입니다.

+0

빠른 답변을 제공해 주셔서 감사합니다. 미안하지만 저는 영어가 모국어가 아닙니다. RegDwight가 내 메시지를 변경했습니다. – Wiika

2

그래디언트는 아직 표준화되지 않았으며 많은 브라우저에서이를 지원하지 않습니다. 예를 들어 -moz-linear-gradient은 Firefox 3.6에서 작동하지만 이전 버전에서는 작동하지 않습니다. 귀하의 사이트가 공공 목적이라면, 많은 사람들이 당신에게 그라디언트를 보지 않을 것입니다, 그래서 당신은 그들이 사용하는 브라우저의 버전을 확인하고 그것에 기초한 그라디언트 나 이미지를 사용할 수 있습니다. 인트라넷 사이트 (사용자가 특정 브라우저를 사용하도록 강제 할 수있는 곳)에서 그라디언트를 사용합니다. Firefox 3.6 이상이 아닌 브라우저는 사용자에게 업그레이드를 알리는 메시지 만 표시하지만 이는 좋지 않습니다. 당신이 공개적으로가는 경우에.

그래서 공개 사이트에는 음수를 선택합니다. :)

+0

예 '맞아, 나는 공개 웹 사이트를 가지고 있고 모든 사용자가 현대적인 브라우저를 사용하는 것은 아니며, 대부분 인터넷에서 여전히 인터넷을 사용한다. 6-7, 페이지의 모든 요소에 그라데이션을 적용하는 또 다른 방법은 단 하나의 투명한 이미지를 사용하는 것이다 (그라디언트 : 흰색 투명하게 나는 믿는다) 그러나 나는 포토샵에서 그것을 만드는 방법을 잘 모르겠다. – Wiika

0

CSS 그래디언트는 사용중인 대체물을 사용하는 많은 대형 웹 사이트에서 사용됩니다. 나는 PIE.htc도 추가 할 것이다. PIE를 사용한다면 절대적으로 또는 상대적으로 나타날 위치에 있어야 함을 기억하십시오.

정말로 오래된 브라우저를 지원해야하는 경우 가장 좋은 방법은 대체 색상을 배경색으로 지정하는 것입니다.

오래된 브라우저가 그래디언트를 전혀 표시하지 않는 것은 어리석은 짓입니다. 당신이 조건부로드 스타일 시트를 설정할 수 있습니다에 당신이 절대적으로하는 경우 : 거기에

<!--[if lt IE 8]> 
    <link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]--> 

당신은 반복 이미지 기반 그라데이션을 선언 할 수 있습니다. 마치 CSS3 전에 어떻게 사용했는지와 같습니다.

이렇게하면 현대 웹 브라우저에서 사이트를 조금 더 빠르게 만들 수 있습니다.

관련 문제