Золотой эффект текста на CSS

Пример:

golden text

Размер букв зависит от ширины экрана, и чтобы увидеть его меньший размер, просто сузьте окно браузера.

HTML:

<div class="gold">
	<span data-double="golden">golden</span>
	<span data-double="text">text</span>
</div>

<span data-double="golden">golden</span>

</div>

CSS:

.gold {
	margin: 20px 0;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	padding: 6vw 0;
	background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.gold span {
    color: #cfc09f;
	font-family: Times, serif;
    position: relative;
	text-transform: uppercase;	
	font-size: 9vw;
	letter-spacing: 1vw;
	line-height: 1;
	margin: 0;
	font-weight: 300;
	text-shadow: -1px 0 1px #c6bb9f, 0 1px 1px #c6bb9f, 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
}
.gold span + span {
	font-size: 15vw;
}
.gold span:before {
    content: attr(data-double);
    left: 0;
	top: 0;
    position: absolute;	
	z-index: 1;
	background: linear-gradient(to bottom, #cfc09f 14%,#634f2c 16%, #cfc09f 20%, #cfc09f 22%,#ffecb3 40%,#3a2c0f 84%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	text-shadow: none;
}

.gold {

margin: 20px 0;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

padding: 6vw 0;

background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.gold span {

color: #cfc09f;

font-family: Times, serif;

position: relative;

text-transform: uppercase;

font-size: 9vw;

letter-spacing: 1vw;

line-height: 1;

margin: 0;

font-weight: 300;

text-shadow: -1px 0 1px #c6bb9f, 0 1px 1px #c6bb9f, 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);

}

.gold span + span {

font-size: 15vw;

}

.gold span:before {

content: attr(data-double);

left: 0;

top: 0;

position: absolute;

z-index: 1;

background: linear-gradient(to bottom, #cfc09f 14%,#634f2c 16%, #cfc09f 20%, #cfc09f 22%,#ffecb3 40%,#3a2c0f 84%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

text-shadow: none;

}

Найдено на codepen.io у пользователя Mandy Michael

Пример:

HTML:

CSS:

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

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

Комментарии: