| Kosten | Суббота, 10 Февраля 2018, 00:52 | Сообщение 1 |
| Здесь рассмотрим, как можно использовать 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 и полезного свойства клипа. Попробуйте сами в своих проектах - не стесняйтесь настраивать цвета, текст и семейство шрифтов.
Демонстрация:
| | Страна: (RU) |
| |
