• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Текстовый эффект с тиснением при помощи CSS (Удивительные эффекты на знаки с красивым оттенком CSS)
Текстовый эффект с тиснением при помощи CSS
Kosten
Дата: Среда, 31.01.2018, 21:40 | Сообщение 1
Администраторы
Сообщений:17103
Награды: 55


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

Свойство CSS3 со всеми его возможностями, является революцией в веб разработке. Новые свойства CSS3 дают дизайнерам прекрасную возможность улучшить свои проекты таким образом, чтобы они были быстрыми и легкими, но визуально впечатляющими. Более того, почти все основные браузеры теперь поддерживают большинство функций CSS3, поэтому это еще одна причина для освоения этих новых технологий. Одна из сфер CSS3 резко изменилась, это типография. Творческий стиль текста теперь может быть достигнут без использования Javascript или изображений.

Будет представлено 2 варианта, что можете подобрать, тот, который будет вам удобнее.

Найдите код ниже.

1. Вариант:



HTML

Код
<h1>ZORNET.RU</h1>

CSS

Код
h1 {
    text-align: center;
    font-size: 73px;
    color: #333131;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(21, 20, 20, 0.92);
}

1. Первая демонстрация:

2. Вариант:

Свойство text-shadow CSS3 можно использовать для достижения стольких интересных текстовых эффектов, включая эффект тиснения. Этот эффект создается путем предоставления значения свойства text-shadow -1 для горизонтальной и вертикальной тени и оставляя радиус размытия по умолчанию. Тогда горизонтальные и вертикальные значения тени положительного 1 накладываются поверх негатива значения.



HTML

Код
<div class="zornet_ktersamis"><a href="/load/vid_materialov_na_doski_objavlenij_dlja_ucoz/81-1-0-8515">ZorNet.Ru для uCoz</a></div>

CSS

Код
.zornet_ktersamis {
    text-align: center;
    font-size: 53px;
    color: #504d4d;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.22), 1px 2px 0px rgba(93, 88, 88, 0.82);
    font-weight: bold;
}

2. Вторая демонстрация:

Не забывайте, что для достижения истинного рельефного изображения должно быть только несколько оттенков разницы между цветом фона и цветом текста.
Прикрепления: 7947172.png(10.5 Kb) · 1586715.png(12.0 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Текстовый эффект с тиснением при помощи CSS (Удивительные эффекты на знаки с красивым оттенком CSS)
  • Страница 1 из 1
  • 1
Поиск: