Ajax Loader
×
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
5
  </head>
6
  <body>
7
    <div>
8
      <p>A few more examples:</p>
9
      <h1 class="ex1">mask-image</h1>
10
      <h1 class="ex2">mask-image</h1>
11
      <h1 class="ex3">mask-image</h1>
12
      <h1 class="ex4">mask-image</h1>
13
    </div>
14
  </body>
15
</html>
16
 
 
CSS 
/***** CSS Mask *****/
1
/***** CSS Mask *****/
2
h1.ex1 {
3
  -webkit-mask-image: url(http://ahhh.co/files/ex1.png);
4
  -o-mask-image: url(http://ahhh.co/files/ex1.png);
5
  -moz-mask-image: url(http://ahhh.co/files/ex1.png);
6
  mask-image: url(http://ahhh.co/files/ex1.png);
7
  color: #3f3f3f;
8
  text-shadow: 2px 3px #fff, 7px 7px #c3c1c2;
9
}
10
 
11
h1.ex2 {
12
  -webkit-mask-image: url(http://ahhh.co/files/ex2.png);
13
  -o-mask-image: url(http://ahhh.co/files/ex2.png);
14
  -moz-mask-image: url(http://ahhh.co/files/ex2.png);
15
  mask-image: url(http://ahhh.co/files/ex2.png);
16
  color: #ec4679;
17
  text-shadow: 2px 3px #fff, 6px 6px #333;
18
}
19
20
h1.ex3 {
21
  -webkit-mask-image: url(http://ahhh.co/files/ex3.png);
22
  -o-mask-image: url(http://ahhh.co/files/ex3.png);
23
  -moz-mask-image: url(http://ahhh.co/files/ex3.png);
24
  mask-image: url(http://ahhh.co/files/ex3.png);
25
  color: #1ba29a;
26
  text-shadow: 2px 3px #fff, 4px 5px #1ba29a;
27
}
28
29
h1.ex4 {
30
  -webkit-mask-image: url(http://ahhh.co/files/ex4.png);
31
  -o-mask-image: url(http://ahhh.co/files/ex4.png);
32
  -moz-mask-image: url(http://ahhh.co/files/ex4.png);
33
  mask-image: url(http://ahhh.co/files/ex4.png);
34
  color: #444;
35
  text-shadow: 2px 3px #fff, 4px 5px #444;
36
}
37
38
/**** Other Stuff ***/
39
body {font-family: 'Oswald', sans-serif; font-size: 1em; background: #cdcdcd url(http://ahhh.co/files/white.png);}
40
div {padding: 30px;}
41
h1{font-size:8em; line-height: 1.2em; margin: 0; padding: 0; text-transform: uppercase;}
42
p {padding: 3px 5px; font-size: 1; margin: 0; text-transform: uppercase;}
43
 
44
 
45
 
46
 
47
 
48
 
49
 
50
 
51
 
52
 
 

Untitled

CSSDeck G+