• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Текстовой эффект разделения цвета при CSS (Красивый эффекты для текста css по разному цвету)
Текстовой эффект разделения цвета при CSS
Kosten
Дата: Суббота, 10.02.2018, 00:52 | Сообщение 1
Администраторы
Сообщений:17380
Награды: 55


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

Сначала нам понадобится довольно простой HTML для определения вашего текста, который может говорить все, что вам нравится. Ваш HTML должен выглядеть примерно так:

Код
<div class="content">
    <h1 data-letters="ZORNET.RU">ZORNET.RU</h1>
</div>

Все что вам нужно, это div и тег h1. Удостоверьтесь, что вы включили атрибут. Также можно назвать все, что вам нравится, до тех пор, пока не назовете его как переменную позже в своем CSS, значение которого соответствует вашему тексту, в данном случае: ZORNET.RU прописал.

Теперь пришло время для CSS:

Код
h1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    position: absolute;
    margin: 0;
    font-family: 'Helvetica', sans-serif;
    color: #984507;
    font-size: 73px;
    letter-spacing: -0.225rem;
    background: #f7f7f7;
    justify-content: center;
    z-index: 1;
    transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43);
}
@media screen and (min-width: 768px) {
h1 {
font-size: 80px;
}
}
@media screen and (min-width: 1024px) {
h1 {
font-size: 100px;
}
}
h1:after {
    content: attr(data-letters);
    left: 0;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    text-align: center;
    position: absolute;
    justify-content: center;
    color: #e1e6e1;
    background: #445fc5;
    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 77%);
}

Итак, теперь ваш код должен выглядеть так:



Довольно круто, что возможно вед дизайнеру пригодится при создание оригинального элемента. Вы заметите, что текст над синей линией светлый зеленый, а текст под линией и яркой фуксии. Мы достигаем этого эффекта в основном с помощью псевдо селекторов: after и полезного свойства клипа. Попробуйте сами в своих проектах - не стесняйтесь настраивать цвета, текст и семейство шрифтов.

Демонстрация:
Прикрепления: 4544335.png(10.6 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Текстовой эффект разделения цвета при CSS (Красивый эффекты для текста css по разному цвету)
  • Страница 1 из 1
  • 1
Поиск: