Skip to content

Instantly share code, notes, and snippets.

@chokri

chokri/Text-clipping-background.markdown

Created January 19, 2014 17:37
Show Gist options
  • Save chokri/8508204 to your computer and use it in GitHub Desktop.
Save chokri/8508204 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by khalifa-chokri.
Raw
index.html
<div class="myBox">
<h1>My title</h1>
<p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
Raw
style.css
.myBox{
font-size: 0.8em;
text-align: justify;
width: 450px; height: 120px;
position: relative;
}
.myBox h1{
font-family: Arial;
font-size: 10em;
text-align: center;
background-image: url(http://lorempixel.com/450/120);
-webkit-background-clip: text;
background-clip: text;
color: rgba(255,255,255,0);
}
.myBox p {
color: #fff;
padding: 10px;
}
Raw
Text-clipping-background.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment