Градиентный фон
|
1 2 3 4 5 6 7 8 9 10 |
.gradient-background { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 50px; line-height: 50px; text-transform: uppercase; background: linear-gradient(to top, #337AB7, #BFE2FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
Графический фон
Фон был взят из сборника "Бесшовные графические фоны", опубликованного ранее
|
1 2 3 4 5 6 7 8 9 10 |
.image-background { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 50px; line-height: 50px; text-transform: uppercase; background: url("photo.jpg"); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
Смотрится уже более интересно, чем стандартный, к примеру синий цвет.
А если в качестве фона взять что-то анимированное:
Увеличить размер шрифта и наложить к каждой букве, то может получиться еще нечто более интересное, например:
ATUIN
Другими словами вариантов масса, как можно украсить крупный текст на вашем сайте.
Добавить комментарий: