CSS3 — Градиент для текста

Home Форумы Программирование CSS3 — Градиент для текста

В этой теме 0 ответов, 1 участник, последнее обновление  bo3gyx 6 мес., 2 нед. назад.

Просмотр 1 сообщения - с 1 по 1 (всего 1)
  • Автор
    Сообщения
  • #248

    bo3gyx
    Хранитель

      Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе WebKit-движка. Тем не менее, этим приёмом можно свободно пользоваться, а для браузеров, не поддерживающих это свойство, просто задавать цвет текста. Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.

      Меняя угол градиента, а также используя повтор градиента, можно создавать интересные эффекты.

      Свойство -webkit-background-clip: text обрезает любой фон (в том числе градиентный) по границе текста. Используется в сочетании с css-свойством
      -webkit-text-fill-color: transparent, которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.

      Пример 1. Градиентный текст

      ГРАДИЕНТНЫЙ ТЕКСТ

      <p class="gradient-text">Градиентный текст</p>
      @import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic);
      .gradient-text {
        font-family: 'Rubik One', sans-serif;
        font-size: 50px;
        text-transform: uppercase;
        background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #0B2349;
        display: table;
        margin: 20px auto;
      }

      Пример 2. Полосатый текст

      ПОЛОСАТЫЙ ТЕКСТ

      <p class="striped-text">Полосатый текст</p>
      .striped-text {
        font-family: 'Rubik One', sans-serif;
        font-size: 50px;
        text-transform: uppercase;
        background: repeating-linear-gradient(white, white 2px, #7AB4E2 2px, #7AB4E2 3px);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #183D58;
        display: table;
        margin: 20px auto;    
      }

      Пример 3. Прозрачный текст

      ПРОЗРАЧНЫЙ ТЕКСТ

      <p class="transparent-text">Прозрачный текст</p>
      .transparent-text {
        font-family: 'Rubik One', sans-serif;
        font-size: 50px;
        text-transform: uppercase;
        background: #2E2F45;
        display: table;
        margin: 20px auto;
        color: white;
        border-radius: 5px;
        mix-blend-mode: multiply;
        padding: 5px 10px;
      }

      Пример 4. Полосатая тень

      ПОЛОСАТАЯ ТЕНЬ

      <p class="striped-shadow">Полосатая тень</p>
      .striped-shadow {
        font-family: 'Rubik One', sans-serif;
        font-size: 50px;
        text-transform: uppercase;
        text-shadow: -4px -4px 0px #D2EAD7;
        background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: table;
        margin: 20px auto;
      }

      Пример 5. Тень «горошек»

      ТЕНЬ «ГОРОШЕК»

      <p class="shadow-polka-dot">Тень "горошек"</p>
      .shadow-polka-dot {
        font-family: 'Rubik One', sans-serif;
        font-size: 50px;
        text-transform: uppercase;
        text-shadow: -5px -5px 0px #EF7657;
        background: radial-gradient(#9DA8A9 1px, transparent 1px);
        background-size: 4px 4px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: table;
        margin: 20px auto;
      }

      Пример 6. Градиентные границы

      Элегантное решение, как сделать градиентные границы для элемента с помощью свойства border-image.
      За толщину рамки отвечает свойство border: 1px solid;

      Градиентные границы
      <div class="gradient-border">Градиентные границы</div>
      .gradient-border {
        padding: 20px;
        letter-spacing: 0.2em;
        border: 1px solid;
        border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
        border-image-slice: 1;
      }

      Пример 7. Градиентные границы и градиентный текст

      Градиентные границы и текст
      <div class="gradient-all">Градиентные границы и текст</div>
      .gradient-all {
        font-size: 2em;
        background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
        padding: 0.3em 0.6em ;
        border: 3px solid transparent;
        border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
        border-image-slice: 1;
      }
    Просмотр 1 сообщения - с 1 по 1 (всего 1)

    Для ответа в этой теме необходимо авторизоваться.