Простой эффект гравировки для текста с помощью CSS

Простой эффект гравировки для текста с помощью CSS
Простейшее решение, благодаря которому можно сделать ваш сайт более стильным.
Подойдет для светлых и средне-светлых фонов.

Просто добавляем стиль для объектов, внутри которых будет помещен текст:
.gravirovka {
color: #000
text-shadow: rgba(255, 255, 255, 0.75) 0px 1px 0px;
}

Суть в том, что мы назначаем для текста тень, смещая её на один пиксель вниз.
В итоге получается интересный визуальный эффект:

Без эффекта:С эффектом:

COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов


COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов


COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов


COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов


COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов


COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов


COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов


COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов



Меняя цвета текста и тени, можно добиться различных результатов. Например, эффекта выгравированного раскаленного текста:

.gravirovka-hot {
color:#911800;
background: url(http://cosmostudio.su/metall.jpg);
background-size: cover;
text-shadow:rgba(255,186, 135,.75) 0px 1px 0px;

}



COSMOS – студия создания сайтов
COSMOS – студия создания сайтов
COSMOS – студия создания сайтов







←Предыдущая запись |

©

13-04-2019, 14:35

(Просмотров: 312)


РАЗДЕЛЫ САЙТА
  • Портфолио
  • Лендинг
  • Интернет-магазин
  • Персональный сайт
  • Сайт-портфолио
  • Портал
  • Веб-дизайн
  • Полиграфический дизайн
  • Услуги по развитию сайта
  • Восстановление фото
  • КОНТАКТЫ
    E-mail:
    webcosmostudio.su

    Телефон:


  • Вакансии
  • БЛОГ
    Простой эффект гравировки для текста с помощью CSS
    Делаем изящную CTA-кнопку на сайт для повышения конверсии