Можно ли сделать текстовую кнопку, чтобы цвет зависел от фона?

Question

[other_letter]

Привет.
Дано: обычный сайт на WP. Какая-то тема из бесплатных, листаются картинки и кнопка по центру. Ничего особенного.
А можно ли сделать так, чтобы цвет текста (ну или кнопки) зависел от картинки? Картинка оранжевая - кнопка красная, картинка чёрная - кнопка серая.

Answer 1

[Nwton]

Намного проще сделать кнопку нейтральной. Например: jsfiddle

Comments

[other_letter]

В смысле чёрной или белой?

Answer 2

[McBernar]

Можно, но сложно.
Проще обойти это дизайном — подложку поверх фото, чтобы она высветляла/затемняла участок под кнопкой.

Answer 3

[Денис Янчевский]

Привет.

Как-то натыкался на подобное, но проверить как работает — руки так и не дошли.

Comments

[other_letter]

Прикольно. Ща погляжу

Answer 4

[Ivan Bogachev]

А можно ли сделать так, чтобы цвет текста (ну или кнопки) зависел от картинки? Картинка оранжевая - кнопка красная, картинка чёрная - кнопка серая.

Посмотрите на Color Thief - простая, но очень удобная штуковина. Вы ей даете картинку - она вам основной цвет (или палитру цветов, но в данном случае она не нужна). Получив цвет вы можете его использовать в качестве цвета кнопки/текста (при необходимости можно увеличить/уменьшить насыщенность или яркость - это уже не проблема). Если вы были на сайте uWebDesign, возможно замечали, что они именно эту библиотеку используют для цветных полосок с названиями постов.

Answer 5

[mletov]

Насколько много картинок и как часто они должны меняться?
Если картинок мало и меняются редко, то проще захардкодить типа

switch ($imageNum)
{
      case 1:
            $buttonClass = "buttonWhite";
     break;

     case 2:
            $buttonClass = "buttonBlack";
     break;
    ...
}

Если картинок много и меняются часто, то доработать модуль загрузки картинок через адмику, добавить кастомных полей для каждой, типа цвет фона, цвет текста и т д.

Comments

[other_letter]

В том и дело, что я хочу автомат. Иначе проще было бы сделать маркер или разные кнопки

[mletov]

other_letter: Ну тогда хорошее решение предложил Ivan Bogachev. Точнее половину решения. Color Thief возвращает цветовую гамму изображения. Вам же нужен еще и контрастный цвет. Нужно углубляться в js, "google->javascript get contrast color" и на основе цвета из Color Thief генерить контраст.