Вертикальный эффект разделения текста на CSS
 | |
| Еще один красивый элемент разделение палитры цвета на знаках или словах, где можно распределить на двум принципам оттенка, где можно поставить любой оттенок. Мы уже узнали, как использовать CSS для создания диагонального эффекта разделения текста на этом сайте, поэтому теперь мы покажем вам, как делать один и тот же эффект по горизонтали. Это один из тех эффектов, которые выглядят так, как будто это может быть сложно или сложно создать, но код на самом деле супер прост. Самое приятное в этом состоит в том, что это не один из тех учебных пособий по текстовым эффектам, где он не работает, или нужно изменить интервал и поля, если вы измените текст, используемый в учебнике. Этот код работает практически с любым текстом, который вы могли бы написать, поэтому не стесняйтесь использовать его для своих собственных проектов. HTML код Для начала нам нужен HTML. Здесь мы определяем, что скажет наш текст. Взгляните на фрагмент ниже, чтобы посмотреть, как он должен выглядеть, он немного отличается от вашего типичного текстового тега. Код <h1 data-heading="ZORNET.RU">ZORNET.RU</h1> Как вы можете видеть, мы дали тегу h1 атрибуту, называемому «заголовком данных», со значением, которое точно соответствует тексту в теге. Это очень важно. Если вы не помните, чтобы добавить этот атрибут или чтобы текст в атрибуте соответствовал вашему фактическому тексту, тогда эффект не будет, где вы получите какой-то сверх эффект текст. CSS Этот эффект требует удивительно маленького CSS для достижения. Все, что нам действительно нужно, это некоторый код, который разбивает фоновый цвет наполовину "наполовину белый и наполовину черный, в этом случае". Что достигаем с помощью свойства linear-gradient, некоторый код, что стилизует фактический текст, это позиционирование, цвет и другое. Где происходит формирование, что используется перед псевдо селектором и атрибут заголовка данных, чтобы создать дополнительный слой текста на половине экрана, который имеет белый фон. Это будет текст, окрашенный в черный цвет, а текст, окрашенный в белый цвет и в правой половине экрана - текст из фактического тега h1. Код h1 { font-family: "Futura"; font-size: 10vw; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute; color: #168224; white-space: nowrap; } h1:before { content: attr(data-heading); overflow: hidden; position: absolute; left: 0; top: 0; width: 48%; color: #234992; } Теперь, когда вы знаете основы создания этого эффекта, не бойтесь рисовать свои цвета, шрифты, фоновые цвета, этот учебник CSS является идеальным для настройки, потому что код что настройки на самом деле довольно просты. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |