<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

Градиент - это плавный переход от одного цвета к другому. В веб-дизайне мы часто сталкиваемся с фоновыми и интерфейсными градиентами и намного реже с текстовыми градиентами. Сегодня мы разберем, как сделать текст градиентом на чистом CSS, без использования каких-либо графических редакторов. Ведь, чем меньше применяется на сайте графики, тем быстрее он загружается.

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

// HTML код
<div class="container">
    <h1 class="title">
        Gradient
    </h1>
</div>

// CSS код
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    background-color:#0E2431;
}

.title {
    font-family: sans-serif;
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
}


Градиент для текста на CSS.

Пропишем линейный градиент для заголовка. Этот градиент плавно перемещается по прямой снизу вверх, от розового цвета к голубому. Для построения красивых градиентов не нужно держать в голове все эти комбинации кода. Сейчас существуют генераторы градиентов, например webgradiets.

.title {
    background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

Но, никакого чуда не произошло и градиент применился к фону блока, внутри которого приписан текст.


Градиент для текста на CSS.

Как задать градиент для самого заголовка? Существует такое CSS свойство, как background-clip. После применения данного свойства (обязательно с префиксом) со значением text, фон окрасится цвет в цвет заголовка, в нашем случае в белый цвет. Таким образом данное свойство применится только к тесту.

.title {
    -webkit-background-clip: text;
}


Градиент для текста на CSS.

Почему же заголовок снова стал белым? На самом деле градиент есть, только мы его не видим из-за белого цвета у заголовка. Поменяем цвет заголовка на прозрачный, через специальное свойство text-fill-color (с префиксом -webkit).

.title {
    -webkit-text-fill-color: transparent;
}


Градиент для текста на CSS.

И последнее, заменим белый цвет на один из цветов градиента на случай, если специфичные градиентные свойства не сработают в других браузерах. Далеко не все браузеры поддерживают эти новшества. Поэтому для корректного отображения цвета текста (максимально приближенного к макету сайта), мы и добавляем дополнительный цвет. На момент написания статьи, свойство text-fill-color не поддерживается только IE11 из числа более-менее современных браузеров.

.title {
    color: #fbc2eb;
}

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


Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.