Background Clip Text Round 2


by Jeremy Caudle
code

Trying to get background-clip working with text again. Hopefully I can sort things out this time.

GREAT SUCCESS

View the code:

HTML and JS 
<div class="codedoodle-block">
			<div class="tb">GREAT SUCCESS</div>
		</div>
CSS 
.codedoodle-block {
			margin: 1rem auto;
			max-width: 30rem;
			background-color: rgba(0, 0, 0, 0.2);
			padding: 1rem;
		}
		
		.codedoodle-block div {
			padding: 1rem;
			background-color: red;
			min-height: 5rem;
			background-position: center center;
			border: dashed 5px white;
			display: block;
			vertical-align: middle;
			text-align: center;
			font-size: 1.5rem;
			font-weight: bold;
			font-family: sans-serif;
		}
		
		.tb {
			background-clip: text;
-webkit-background-clip: text;
color: transparent;
		}

Tags