Ответы пользователя по тегу CSS
  • Как изменить текст цвета в зависимости от фона?

    Frontend777
    @Frontend777
    Ubuнтер, php разраб, Wordпрессер, человек
    Если вам подойдет использование js, то можно попробовать рассмотреть такой пример:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <script src="script.js"></script>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css">
      <title>Dynamic Text Color</title>
    </head>
    <body>
      <div class="container">
        <p id="content">Ваш текст.</p>
      </div>
    </body>
    </html>

    Css:
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    
    .container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white; /* Default background color */
    }
    
    .container.dark {
      background-color: black; /* Dark background color */
      color: white; /* Text color for dark background */
    }

    JS:
    const container = document.querySelector('.container');
    const content = document.getElementById('content');
    
    // Функция для определения цвета фона
    function getBackgroundColor(element) {
      const bgColor = window.getComputedStyle(element).backgroundColor;
      return bgColor;
    }
    
    // Функция для определения оптимального цвета текста
    function getTextColor(backgroundColor) {
      // Пример простой проверки на светлый или тёмный цвет фона
      const rgb = backgroundColor.match(/\d+/g);
      const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
    
      return brightness >= 128 ? 'black' : 'white';
    }
    
    // Изменение цвета текста в зависимости от цвета фона
    function updateTextColor() {
      const bgColor = getBackgroundColor(container);
      const textColor = getTextColor(bgColor);
      content.style.color = textColor;
    }
    
    // Обновляем цвет текста при загрузке и изменении размера окна
    window.addEventListener('load', updateTextColor);
    window.addEventListener('resize', updateTextColor);

    P.S Нагенерил код gpt
    Ответ написан
    7 комментариев
  • Откуда вы берете интересные штуки на html, css, jquery?

    Frontend777
    @Frontend777
    Ubuнтер, php разраб, Wordпрессер, человек
    Ответ написан
    Комментировать