Background для текста

Градиентный фон

.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;
}

.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;

}

Графический фон

Фон был взят из сборника "Бесшовные графические фоны", опубликованного ранее

.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;
}

.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

Другими словами вариантов масса, как можно украсить крупный текст на вашем сайте.

Смотрите также:

Добавить комментарий: