@other_letter

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

Привет.
Дано: обычный сайт на WP. Какая-то тема из бесплатных, листаются картинки и кнопка по центру. Ничего особенного.
А можно ли сделать так, чтобы цвет текста (ну или кнопки) зависел от картинки? Картинка оранжевая - кнопка красная, картинка чёрная - кнопка серая.
  • Вопрос задан
  • 355 просмотров
Пригласить эксперта
Ответы на вопрос 5
@Nwton
Намного проще сделать кнопку нейтральной. Например: jsfiddle
Ответ написан
@McBernar
Можно, но сложно.
Проще обойти это дизайном — подложку поверх фото, чтобы она высветляла/затемняла участок под кнопкой.
Ответ написан
Комментировать
deniscopro
@deniscopro Куратор тега WordPress
WordPress-разработчик, denisco.pro
Привет.

Как-то натыкался на подобное, но проверить как работает — руки так и не дошли.
Ответ написан
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
А можно ли сделать так, чтобы цвет текста (ну или кнопки) зависел от картинки? Картинка оранжевая - кнопка красная, картинка чёрная - кнопка серая.

Посмотрите на Color Thief - простая, но очень удобная штуковина. Вы ей даете картинку - она вам основной цвет (или палитру цветов, но в данном случае она не нужна). Получив цвет вы можете его использовать в качестве цвета кнопки/текста (при необходимости можно увеличить/уменьшить насыщенность или яркость - это уже не проблема). Если вы были на сайте uWebDesign, возможно замечали, что они именно эту библиотеку используют для цветных полосок с названиями постов.
Ответ написан
Комментировать
@mletov
Насколько много картинок и как часто они должны меняться?
Если картинок мало и меняются редко, то проще захардкодить типа
switch ($imageNum)
{
      case 1:
            $buttonClass = "buttonWhite";
     break;

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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы