Background Clip Practice


by Jeremy Caudle
code

Playing with and learning more about the background-clip property today. Text is a bit odd to work with within Code Editor, but I'm not sure how it looks when added to my CMS.

border-box
padding-box
content-box
text

View the code:

HTML and JS 
<div class="codedoodle-block">
			<div class="bb">border-box</div>
			<div class="pb">padding-box</div>
			<div class="cb">content-box</div>
			<div class="tb">text</div>
		</div>
CSS 
.codedoodle-block {
			margin: 1rem auto;
			max-width: 30rem;
			background-color: rgba(0, 0, 0, 0.2);
			padding: 1rem;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			grid-gap: 1rem;
		}
		
		.codedoodle-block div {
			padding: 1rem;
			background-image: url("https://jeremycaudle.com/floorshotJC.jpeg");
			min-height: 5rem;
			background-position: center center;
			border: dashed 5px white;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			vertical-align: middle;
			text-align: center;
			font-size: 1.5rem;
			font-weight: bold;
			font-family: sans-serif;
			color: white;
		}
		
		.bb {
			background-clip: border-box;
		}
		
		.pb {
			background-clip: padding-box;
			-webkit-background-clip: padding-box;
		}
		
		.cb {
			background-clip: content-box;
		}
		
		div.tb {
		background-clip: text;
			-webkit-background-clip: text;
			color: rgba(0,0,0,0.2);
		}

Tags