텍스트에 대한 개요 효과


329

CSS에서 다른 색상으로 텍스트에 개요를 제공하는 방법이 있습니까? 이름, 링크 등보다 직관적으로 만들기 위해 텍스트의 일부를 강조하고 싶습니다. 링크 색상 변경 등은 오늘날 일반적이므로 새로운 것을 원합니다.


17
@ Dan Better는 다른 것을 암시합니다. 조언은 일반적으로 좋지만 창의적인 실험을 방해 할 수도 있습니다. 또한 일반적으로“공통 = 양호”가 아닙니다. 오히려“공통 = 겨우 충분합니다”입니다.
Konrad Rudolph

7
@ Dan Grossman : 세상은 새로운 아이디어로 진화하고 모든 것이 비열한 것은 아닙니다.
yoda

7
@yoda 문법이 특이하다. / EDIT 신경 쓰지 말고 다른 사람과 혼동하여… 작은 녹색 친구.
Konrad Rudolph

필요한 것을 더 자세히 설명 할 수 있습니까? 나는 당신이 '다른 색으로 텍스트에 윤곽선을주고 싶다'고 말할 때 당신이 무엇을 의미하는지 확실하지 않습니다
Yi Jiang

답변:


453

text-strokeCSS3에 실험적인 웹킷 속성이 있는데 , 한동안 작동 시키려고했지만 지금까지 실패했습니다.

내가 대신 한 것은 이미 지원되는 text-shadow속성 (Chrome, Firefox, Opera 및 IE 9에서 지원됨)을 사용하는 것입니다.

네 개의 그림자를 사용하여 획이있는 텍스트를 시뮬레이션하십시오.

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="strokeme">
  This text should have a stroke in some browsers
</div>

나는 당신을 위해 데모 만들었습니다.

호버링 된 예제는 여기에서 사용할 수 있습니다


Jason C가 주석에서 언급했듯이 text-shadowOpera Mini를 제외한 모든 주요 브라우저 에서 CSS 속성이 지원됩니다. 이 솔루션이 이전 버전과의 호환성을 위해 작동하는 곳 (실제로 자동 업데이트되는 브라우저와 관련된 문제는 아님) text-strokeCSS를 사용해야 한다고 생각합니다 .


12
슬프게도 IE는 text-shadowIE10까지 지원하지 않습니다 . 이상하게도 IE9는 지원 box-shadow하지만 지원 하지는 않습니다 text-shadow.
Web_Designer

14
대한 브라우저 지원text-shadow 요약은 다음과 같습니다 . 현재 (이 답변이 게시 된 후 3 년) Opera Mini를 제외한 모든 주요 브라우저에서 지원되며, "부분 지원"을 표시합니다 (무시 blur-radius).
Jason C

3
이것은 더 얇은 효과를 추가합니다text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
BeauCielBleu

29
멋진 수업 이름
시민 conn

4
Jason C는 text-shadow지원이 아니라 지적했다 text-stroke. 현재 웹킷에서만 지원됩니다.
Gregoire D.

100

편집 : text-stroke 이제는 상당히 성숙되어 대부분의 브라우저에서 구현됩니다 . 더 쉽고 선명하며 정확합니다. 브라우저 사용자가이를 지원할 수 있다면 이제 text-stroke대신을 먼저 사용해야 text-shadow합니다.


text-shadow오프셋없이 효과만으로이 작업을 수행 할 수 있고 수행해야 합니다.

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

왜? 여러 그림자 효과를 오프셋하면 불규칙하고 울퉁불퉁 한 모서리가 나타납니다. 그림자 효과 오프셋으로 인해 들쭉날쭉 한 모서리가 나타납니다.


한 위치에 텍스트 그림자 효과를 적용하면 오프셋이 제거됩니다. 같은 효과를 반복 할 수 있습니다 (같은 위치와 흐림 유지). 이렇게 :

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

다음은 단 하나의 효과 (위)와 동일한 효과가 14 회 반복 된 (아래) 샘플입니다.


텍스트 그림자로 렌더링 된 샘플 텍스트

참고 : 선이 너무 얇아 지므로을 사용하여 하위 픽셀 렌더링을 끄는 것이 좋습니다
-webkit-font-smoothing: antialiased.


흥미로운 답변, 감사합니다. 그래도 효과를 '반복'한다는 것이 무엇을 의미하는지 이해하지 못합니다.
edzillion

font-smoothing옵션 덕분 에 크롬의 출력이 크게 향상되었습니다!
Meki

1
텍스트 스트로크가 대부분의 브라우저에서 지원된다는 의견에 대한 의견이 추가되었지만 캐니 우스는 여전히 (8 월 2016) 모든 버전의 IE 및 Edge에서 지원되지 않는 것으로 표시하고 레이아웃에 -webkit-text-stroke가 필요합니다. Firefox에서 .css.prefixes.webkit 플래그가 활성화되었습니다. 일반 공공 사이트를 충분히 지원하지 않는 Methinks.
Nick Rice

1
텍스트 그림자를 14 번 반복하면 성능 문제가 발생할 수 있다고 생각합니다 . 특히 모바일에서 스크롤 할 때.
kaosmos

2
AFAIK는를 text-stroke통한 개요와 다릅니다 text-shadow. text-stroke텍스트 외부에 윤곽선을 표시 할 수있는 옵션이 없습니다. 즉, 윤곽선이 텍스트에 번져서 종종 끔찍하게 보입니다. 다시 말해서 개요를 text-stroke대신 할 수는 없습니다text-shadow
gman

90

쉬운! 구조에 SVG.

이것은 간단한 방법입니다.

svg{
  font: bold 70px Century Gothic, Arial;
  width: 100%;
  height: 120px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:0.5px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:4px; }
}
<svg viewBox="0 0 450 50">
  <text y="40">Scalable Title</text>
</svg>

좀 더 복잡한 데모가 있습니다.


6
이것은 훌륭한 솔루션이며 텍스트 그림자와 관련된 성능 문제가 없습니다. 이 접근법과 여러 텍스트 섀도우를 쌓아 올리는 것의 성능 차이는 내 특정 응용 프로그램 (큰 화면 디스플레이의 IE 10)에서 엄청납니다.
djskinner

3
두꺼운 줄이 필요했기 때문에 텍스트 그림자보다 훨씬 나은 효과를 얻었습니다. 감사합니다!
Andrea

2
순금 친구 야 !! 매우 전문적이고 숙련 된 접근 방식으로 질문에 완벽하게 대답했습니다! 이 솔루션은 W3 Council 또는 Google 또는 그 이상의 것을 앞두고 있습니다. 축하합니다!
Heitor

텍스트 영역에 획을 추가하지 않은 경우이 솔루션은 나에게도 완벽했을 것입니다. (
Brandito

36

그림자가 획처럼 보일 때까지 여러 번 흐리게 그림자를 쌓을 수 있습니다.

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

바이올린은 다음과 같습니다. http://jsfiddle.net/GGUYY/

나는 여러 가지 방법으로 실패하기 때문에 해결책이라고 부르지 않더라도 누군가가 관심을 가질 수 있다고 언급했습니다.

  • 오래된 IE에서는 작동하지 않습니다.
  • 모든 브라우저에서 상당히 다르게 렌더링됩니다.
  • 너무 많은 그림자를 적용하는 것은 처리하기가 매우 무겁습니다.

1
이것은 정말 간단하고 화려합니다.

1
고마워, 이것의 문제는 성능입니다.주의해서 사용하십시오 :)
brohr

1
환상적이다. 그림자의 추가 레이어는 실제로 깊이를 더해 주며 IE11, FF36 및 Chrome 41에서 작동합니다.
RockiesMagicNumber

17

배경 이미지에 오버레이 할 때 작동하는 크로스 브라우저 텍스트 스트로크 솔루션을 찾고있었습니다. 여분의 마크 업, js 및 IE7-9 (6 테스트하지 않음)에서 작동하지 않으며 앨리어싱 문제를 일으키지 않는 솔루션이 있다고 생각합니다.

이것은 IE를 제외하고 훌륭한 지원을 제공하는 CSS3 text-shadow의 조합입니다 ( http://caniuse.com/#search=text-shadow )를 를 사용한 후 IE 용 필터 조합을 사용하는 조합입니다. 현재 CSS3 텍스트 입력 지원이 좋지 않습니다.

IE 필터

글로우 필터 ( http://www.impressivewebs.com/css3-text-shadow-ie/ )는 끔찍해 보이므로 사용하지 않았습니다.

데이비드 휴이트의 답변 에는 여러 방향으로 그림자 필터를 추가하는 것이 포함되었습니다. 그런 다음 ClearType은 불행히도 제거되어 별칭이 잘못 지정된 텍스트로 끝납니다.

그런 다음 useragentman에서 제안한 요소 중 일부를 결합했습니다. 에서 그림자 필터와 .

함께 모으기

이 예는 흰색 선이있는 검은 색 텍스트입니다. IE를 대상으로하는 방식으로 조건부 HTML 클래스를 사용하고 있습니다 ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

이것은 또한 오래된 IE에서도 작동합니다.filter: glow(color=white,strength=1);
mch

16

이 답변을 추가하면됩니다. 텍스트 "쓰다듬 기"는 "개요"와 다릅니다

개요가 좋아 보인다. 쓰다듬어 보인다.

다른 곳에 나열된 SVG 솔루션도 같은 문제가 있습니다. 개요 를 원한다면 텍스트를 두 번 넣어야합니다. 한 번 스트로크하고 다시 쓰지 않았습니다.

쓰다듬 기가 개요가 아닙니다

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}
<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

추신 : SVG를 임의의 텍스트의 올바른 크기로 만드는 방법을 알고 싶습니다. svg를 생성하고 javascript로 쿼리하여 범위를 얻은 다음 결과를 적용하는 것이 상당히 복잡하다고 생각합니다. js가 아닌 쉬운 방법이 있다면 알고 싶습니다.


1
이 방법은 올바른 방법이며, 획이 아닌 개요입니다. 아름답게 작동하며 눈에 깔끔하고 쉽습니다.
MitchellK

7

6 가지 그림자로 더 나은 결과를 얻었습니다.

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

나는 0 픽셀 0 # 343a7e .... -3px에는 3px 0 픽셀 0 # 343a7e을, 더 큰 그림자를 원했고, 추가 라인의 몇 가지를 추가했다
로손 재이든

7

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}
<h1>Properly stroked!</h1>


6

이 SASS 믹스 인은 8 축을 사용하여 부드러운 결과를 제공합니다.

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

그리고 일반적인 CSS :

text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;

4

더 두꺼운 스트로크로 작업하는 것은 약간 지저분합니다. 만약 당신이 sass의 즐거움을 가지고 있다면 완벽하지 않고이 믹스 인을 시도하고 스트로크 무게에 따라 상당한 양의 CSS를 생성합니다.

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

1
이 mixin은 나를 위해 작동하지 않았지만이 하나를했다 : gist.github.com/nathggns/2984123
akirk

0

여러 개의 텍스트 그림자 ..
이와 같은 것 :

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

데모 : http://jsfiddle.net/punosound/gv6zs58m/


0

텍스트 그림자 생성기

여기에 많은 훌륭한 답변이 있습니다. 텍스트 섀도우가 아마도 가장 신뢰할 수있는 방법 인 것처럼 보일 것입니다. 다른 사람들이 이미 그렇게 했으므로 텍스트 그림자 로이 작업을 수행하는 방법에 대해서는 자세히 설명하지 않겠지 만 기본 아이디어는 텍스트 요소 주위에 여러 텍스트 그림자를 만드는 것입니다. 텍스트 윤곽이 클수록 더 많은 텍스트 그림자가 필요합니다.

(이 게시물 기준으로) 제출 된 모든 답변은 텍스트 그림자에 대한 정적 솔루션을 제공합니다. 다른 접근 방식을 취해 윤곽선 색상, 흐림 및 너비 값을 입력으로 허용하고 요소에 적절한 텍스트 그림자 속성을 생성하는 이 JSFiddle 을 작성 했습니다 . 빈칸을 채우고 미리보기를 확인한 다음 클릭하여 CSS를 복사하여 스타일 시트에 붙여 넣으십시오.


바늘 부록

JSFiddle에 대한 링크가 포함 된 답변은 코드가 포함되어 있지 않으면 게시 할 수 없습니다. 원한다면이 부록을 완전히 무시해도됩니다. 이것은 텍스트 그림자 속성을 생성하는 바이올린의 JavaScript입니다. 자신의 작품에서이 코드를 구현할 필요 는 없습니다 .

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

-2

나는이 문제도 가지고 있었고 text-shadow, 모서리가 나빠 보였을 때 (어두운 그림자가 많지 않으면) 옵션이 아니었고 흐릿함을 원하지 않았으므로 다른 옵션은 다음을 수행하는 것이 었습니다. 2 div와 배경 div의 경우 원하는 -webkit-text-stroke만큼 큰 윤곽선을 사용할 수 있습니다.

div {
  font-size: 200px;
  position: absolute;
  white-space: nowrap;
}

.front {
 color: blue;
}

.outline {
  -webkit-text-stroke: 30px red;
  user-select: none;
}
<div class="outline">
 outline text
</div>

<div class="front">
 outline text
</div>  

이 사용하여, 나는 달성 할 수 있었다 밖으로 때문에, 라인을 stroke-width당신이 있기 때문에 텍스트가 (매우 큰 윤곽과 읽기 쉬운 유지하려면 방법은 옵션이 아니었다 stroke-width윤곽이되지 읽기 쉽게 글자 안에 시작할 때 폭 글자보다 커집니다.

참고 : 내가 뚱뚱한 개요가 필요한 이유는 "Google지도"에서 거리 레이블을 모방하고 있었기 때문에 텍스트 주위에 뚱뚱한 흰색 후광이 필요했습니다. 이 솔루션은 저에게 완벽하게 작동했습니다.

이 솔루션을 보여주는 바이올린이 있습니다.

여기에 이미지 설명을 입력하십시오


-15

여기 CSS 파일이 있기를 바랍니다.

/* ----- Logo ----- */

#logo a {
    background-image:url('../images/wflogo.png'); 
    min-height:0;
    height:40px;
    }
* html #logo a {/* IE6 png Support */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
}

/* ----- Backgrounds ----- */
html{
    background-image:none;  background-color:#336699;
}
#logo{
    background-image:none;  background-color:#6699cc;
}
#container, html.embed{
    background-color:#FFFFFF;
}
.safari .wufoo input.file{
    background:none;
    border:none;
}

.wufoo li.focused{
    background-color:#FFF7C0;
}
.wufoo .instruct{
    background-color:#F5F5F5;
}

/* ----- Borders ----- */
#container{
    border:0 solid #cccccc;
}
.wufoo .info, .wufoo .paging-context{
    border-bottom:1px dotted #CCCCCC;
}
.wufoo .section h3, .wufoo .captcha, #payment .paging-context{
    border-top:1px dotted #CCCCCC;
}
.wufoo input.text, .wufoo textarea.textarea{

}
.wufoo .instruct{
    border:1px solid #E6E6E6;
}
.fixed .info{
    border-bottom:none;
}
.wufoo li.section.scrollText{
    border-color:#dedede;
}

/* ----- Typography ----- */
.wufoo .info h2{
    font-size:160%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .info div{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo .section h3{
    font-size:110%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .section div{
    font-size:85%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.wufoo label.desc, .wufoo legend.desc{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:bold;
    color:#444444;
}

.wufoo label.choice{
    font-size:100%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{
    font-style:normal;
    font-weight:normal;
    color:#333333;
    font-size:100%;
}
{* Custom Fonts Break Dropdown Selection in IE *}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ 
    font-family:inherit;
}


.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
    font-family:inherit;
    color:#444444;
}
.safari .wufoo input.file{ /* Webkit */
    font-size:100%;
    font-family:inherit;
    color:#444444;
}
.wufoo .instruct small{
    font-size:80%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.altInstruct small, li.leftHalf small, li.rightHalf small,
li.leftThird small, li.middleThird small, li.rightThird small,
.iphone small{
    color:#444444 !important;
}

/* ----- Button Styles ----- */

.wufoo input.btTxt{

}

/* ----- Highlight Styles ----- */

.wufoo li.focused label.desc, .wufoo li.focused legend.desc,
.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label,
.safari .wufoo li.focused input.file{ 
    color:#000000;
}

/* ----- Confirmation ----- */

.confirm h2{
    font-family:inherit;
    color:#444444;
}
a.powertiny b, a.powertiny em{
    color:#1a1a1a !important;
}
.embed a.powertiny b, .embed a.powertiny em{
    color:#1a1a1a !important;
}

/* ----- Pagination ----- */

.pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{
    font-family:inherit;
    color:#444444;
}
.pgStyle1 var, .pgStyle2 td{
    border:1px solid #cccccc;
}
.pgStyle1 .done var{
    background:#cccccc;
}

.pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{
    background:#FFF7C0;
    color:#000000;
}
.pgStyle1 .selected var{
    border:1px solid #e6dead;
}


/* Likert Backgrounds */

.likert table{
    background-color:#FFFFFF;
}
.likert thead td, .likert thead th{
    background-color:#e6e6e6;
}
.likert tbody tr.alt td, .likert tbody tr.alt th{
    background-color:#f5f5f5;
}

/* Likert Borders */

.likert table, .likert th, .likert td{
    border-color:#dedede;
}
.likert td{
    border-left:1px solid #cccccc;
}

/* Likert Typography */

.likert caption, .likert thead td, .likert tbody th label{
    color:#444444;
    font-family:inherit;
}
.likert tbody td label{
    color:#575757;
    font-family:inherit;
}
.likert caption, .likert tbody th label{
    font-size:95%;
}

/* Likert Hover */

.likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{
    background-color:#FFF7C0;
    color:#000000;
}
.likert tbody tr:hover td{
    border-left:1px solid #ccc69a;
}

/* ----- Running Total ----- */

.wufoo #lola{
    background:#e6e6e6;
}
.wufoo #lola tbody td{
    border-bottom:1px solid #cccccc;
}
.wufoo #lola{
    font-family:inherit;
    color:#444444;
}
.wufoo #lola tfoot th{
    color:#696969;
}

/* ----- Report Styles ----- */

.wufoo .wfo_graph h3{
    font-size:95%;
    font-family:inherit;
    color:#444444;
}
.wfo_txt, .wfo_graph h4{
    color:#444444;
}
.wufoo .footer h4{
    color:#000000;
}
.wufoo .footer span{
    color:#444444;
}

/* ----- Number Widget ----- */

.wfo_number{
    background-color:#f5f5f5;
    border-color:#dedede;
}
.wfo_number strong, .wfo_number em{
    color:#000000;
}

/* ----- Chart Widget Border and Background Colors ----- */

#widget, #widget body{
    background:#FFFFFF;
}
.fcNav a.show{
    background-color:#FFFFFF;
    border-color:#cccccc;
}
.fc table{
    border-left:1px solid #dedede;  
}
.fc thead th, .fc .more th{
    background-color:#dedede !important;
    border-right:1px solid #cccccc !important;
}
.fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{
    background-color:#FFFFFF;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #dedede;
}
.fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{
    background-color:#f5f5f5;
}

/* ----- Chart Widget Typography Colors ----- */

.fc caption, .fcNav, .fcNav a{
    color:#444444;
}
.fc tfoot, 
.fc thead th,
.fc tbody th div, 
.fc tbody td.count, .fc .cards tbody td a, .fc td.percent var,
.fc .timestamp span{
    color:#000000;
}
.fc .indent .count{
    color:#4b4b4b;
}
.fc .cards tbody td a span{
    color:#7d7d7d;
}

/* ----- Chart Widget Hover Colors ----- */

.fc tbody tr:hover td, .fc tbody tr:hover th,
.fc tfoot tr:hover td, .fc tfoot tr:hover th{
    background-color:#FFF7C0;
}
.fc tbody tr:hover th div, .fc tbody tr:hover td, .fc tbody tr:hover var,
.fc tfoot tr:hover th div, .fc tfoot tr:hover td, .fc tfoot tr:hover var{
    color:#000000;
}

/* ----- Payment Summary ----- */

.invoice thead th, 
.invoice tbody th, .invoice tbody td,
.invoice tfoot th,
.invoice .total,
.invoice tfoot .last th, .invoice tfoot .last td,
.invoice tfoot th, .invoice tfoot td{
    border-color:#dedede;
}
.invoice thead th, .wufoo .checkNotice{
    background:#f5f5f5;
}
.invoice th, .invoice td{
    color:#000000;
}
#ppSection, #ccSection{
    border-bottom:1px dotted #CCCCCC;
}
#shipSection, #invoiceSection{
    border-top:1px dotted #CCCCCC;
}

/* Drop Shadows */

/* - - - Local Fonts - - - */

/* - - - Responsive - - - */

@media only screen and (max-width: 480px) {
    html{
        background-color:#FFFFFF;
    }
    a.powertiny b, a.powertin em{
        color:#1a1a1a !important;
    }
}

/* - - - Custom Theme - - - */

9
솔루션을 자세히 설명하십시오. 그것이 작동하더라도 우리는 그것을 사용하는 방법에 대한 실마리가 없습니다.
Patrick Hofman

3
올바른 솔루션이 200 라인의 CSS를 필요로하지 않기를 바랍니다.
dardub

2
이 대답은 말 그대로 전혀 의미가 없습니다.
superluminary
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.