Knocked Out California

index.html

<p class="city sd limit">San Diego</p>
<p class="city la limit">Los Angeles</p>
<p class="city sf limit">San Francisco</p>
<p class="city ca limit">CA</p>

<div class="credits">
  <i>knocked out cali</i>
  <p>January 12th, 2015</p>
  <a href="http://mksht.crisnoble.com" class="inline">mksht</a>&nbsp;&nbsp;x&nbsp;&nbsp;<a href="http://crisnoble.com" class="inline">Cris Noble</a>
  <br/><br/>
  Photo Credits:
  <a href="https://flic.kr/p/8urNS">Hibiscus Barkcloth</a>

  <a href="https://flic.kr/p/36Z5Etf">Tapete</a>
  
  <a href="https://flic.kr/p/8urLD">Leafy Barkcloth</a>

  <a href="https://flic.kr/p/8urFM">Dark Barkcloth</a>
  <br/>
  Webfont:
  <a href="http://www.google.com/fonts/specimen/Titillium+Web">Titillium</a>
  <br/>
  Code:
  <a href="http://codepen.io/crismanNoble/pen/vExEYa">Codepen.io</a>
  
  
  
  
</div>

Knocked-Out-California.markdown

Knocked Out California

A demonstration of text clipping

A Pen by Crisman Noble on CodePen.

License.

style.css

html,body {
 background-color: #222;
 font-family: 'Titillium Web';
 margin: 0;
  
}

p {
  margin: 0;
}

i {
  font-size: 30px;
}
.credits {
  padding: 40px;
  color: #f2f2f2;
  font-size: 20px;
}
a {
   display: block;
}
.credits a {
 color: #f2f2f2;

  font-weight: 400;
  font-style: italic;
}
.inline {
  display: inline-block;
}
.city {
  padding: 40px;
  font-weight: 900;
  font-size: 150px;
  text-align: center;
  overflow: visible;

  text-transform: uppercase;
  
  
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  
  
}

/*.city:hover {
 border-left: 10px solid green;
}*/

.sd {
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/89/Hibiscus_barkcloth_Honolulu.jpg');
  background-size: cover;
}

.la {
  background-image: url('https://c2.staticflickr.com/2/1176/1380433087_30d4efa949_b.jpg');
  background-size: cover;
}
.sf {
  background-image: url('https://c1.staticflickr.com/1/40/84765297_e504abb13d_z.jpg?zz=1 ');

}


.limit {
  width: 760px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  font-size: 270px;
  line-height: .78em;
  text-align: left;
}

.sf, .la {
  font-size: 120px;
  width:790px;
}

.la {
  font-size: 160px;
  width: 800px;
}

.ca {
  font-size: 450px;
  width:1000px;
}
.ca {
  background-image: url('http://c1.staticflickr.com/1/42/84765015_c2a1a9e74b_z.jpg?zz=1');
  background-position-y: 40px;

}