Контурний ефект до тексту


329

Чи є в CSS способи надати контури тексту різними кольорами? Я хочу виділити деякі частини мого тексту, щоб зробити його більш інтуїтивним - наприклад, імена, посилання тощо. Зміна кольорів посилань і т. Д. Є поширеними в наш час, тому я хочу щось нове.


17
@Dan Better має на увазі різні. Ваша порада, як правило, гарна, але може також задушити творчі експерименти. Крім того, зазвичай це не "загально = добре" ... скоріше, це "звичайно = ледь досить добре".
Конрад Рудольф

7
@ Дан Гроссман: світ розвивається за допомогою нових ідей, не все нове привабливе.
йода

7
@yoda Ваш синтаксис незвичайний. / EDIT не маю на увазі, плутаю тебе з кимось іншим ... маленьким зеленим чувак.
Конрад Рудольф

Чи можете ви більш детально описати те, що вам потрібно. Я не точно впевнений, що ви маєте на увазі, коли ви говорите, що хочете "надати контури тексту різними кольорами"
Yi Jiang

1
можливий дублікат кордону шрифту CSS?
Адам Дженсен

Відповіді:


452

Існує експериментальна властивість webkit, що називається 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>

Я зробив тут демонстрацію для вас

І наближений приклад доступний тут


Як згадував Джейсон С у коментарях, text-shadowвластивість CSS тепер підтримується всіма основними браузерами, за винятком Opera Mini. Якщо це рішення буде працювати для зворотної сумісності (насправді не проблема щодо веб-переглядачів, які автоматично оновлюються), я вважаю, що text-strokeслід використовувати CSS.


12
На жаль, IE не підтримує text-shadowдо IE10. Як не дивно, IE9 підтримує, box-shadowале ні text-shadow.
Web_Designer

14
Ось підсумок підтримки браузера дляtext-shadow . Схоже, що зараз (через 3 роки після опублікування цієї відповіді) її підтримують усі основні браузери за винятком Opera Mini, яка демонструє «часткову підтримку» (вона ігнорує blur-radius).
Джейсон C

3
Це додає більш тонкий ефект:text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
BeauCielBleu

29
Awesome назва класу
громадянин conn

4
Джейсон C вказував на text-shadowпідтримку, ні text-stroke. Наразі це підтримується лише webkit.
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варіант, він значно покращив вихід у хромі!
Мекі

1
Я зауважую коментар, доданий до відповіді, що текстовий штрих зараз підтримується в більшості браузерів, але канюза все ще (серпень 2016 року) показує його як непідтримуваний у всіх версіях IE та Edge та потребує -webkit-text-stroke з макетом Прапор .css.prefixes.webkit увімкнено у Firefox. Це не достатньо поширена підтримка загальнодоступних сайтів.
Нік Райс

1
Я думаю, що повторення 14-ти разів текстової тіні може мати певну проблему з продуктивністю. Особливо під час прокрутки на мобільному.
kaosmos

2
AFAIK text-stroke- це не те, що контур via 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
Це дало мені набагато кращий ефект, ніж текстові тіні, бо мені потрібна була товста лінія. Дякую!
Андреа

2
Це чистий золотий чувак !! Дуже професійний та кваліфікований підхід, ідеально відповів на питання! Це рішення випереджає Раду W3 або Google або що завгодно, вітаємо!
Гейтор

Це рішення було б ідеальним і для мене, якби я не додав штрих до текстової області :(
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
  • він відображається зовсім по-різному у кожному браузері
  • нанесення такої кількості тіней дуже важко обробляти: S

1
Це дійсно проста і яскрава ідея!

1
Дякую, проблема в цьому полягає в продуктивності, проте використовуйте з обережністю :)
brohr

1
Це фантастично. Додаткові шари затінення дійсно додають йому деякої глибини, і вона працює в IE11, FF36 та Chrome 41.
RockiesMagicNumber

17

Я шукав рішення для обведення текстовим штрихом між браузером, яке працює при накладенні на фонові зображення. думаю, у мене є рішення для цього, яке не передбачає додаткової націнки, js та працює в IE7-9 (я не перевіряв 6), і не спричиняє проблем.

Це поєднання використання CSS3 text-shadow, який має хорошу підтримку, крім IE ( http://caniuse.com/#search=text-shadow ), а потім використання комбінації фільтрів для IE. Підтримка CSS3 тексту-обведення наразі погана.

IE-фільтри

Фільтр світіння ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) виглядає жахливо, тому я не користувався цим.

Відповідь Девіда Хьюітта включала додавання фільтрів для затінення тіней у поєднанні напрямків. Потім ClearType, на жаль, видаляється, тому ми закінчуємо погано відчужений текст.

Потім я поєднав деякі елементи, запропоновані на useragentman, з фільтрами тіні.

Збираючи його разом

Цей приклад - чорний текст із білим штрихом. Я використовую умовні класи html шляхом націлювання на IE ( 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>

PS: Я хотів би знати, як зробити 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;
}

Я хотів більшої тіні, і довелося додати пару зайвих рядків .... 3px 0px 0 # 343a7e, -3px 0px 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
Цей міксин не працював для мене, але цей зробив: 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 з моєї скрипки, який генерує властивість text-shadow. Зауважте, що вам не потрібно реалізовувати цей код у власних роботах:

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 - надіньте -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
Будь ласка, детально розробимо своє рішення. Навіть якщо це все-таки працює, у нас немає поняття, як ним користуватися.
Патрік Хофман

3
Я сподіваюся, що правильні рішення не повинні мати 200 рядків css.
Дардуб

2
Ця відповідь взагалі не має сенсу.
надсвіткові
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.