Bootstrap Snippet glass text using HTML CSS

1
2
3
4
5
6
7
8
9
10
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<main>
<blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
<footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer>
</blockquote>
</main>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * Frosted glass effect
 */
body {
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding-top: calc(50vh - 6em);
  font: 150%/1.6 Baskerville, Palatino, serif;
}
body, main::before {
  background: url("http://csssecrets.io/images/tiger.jpg") 0/cover fixed;
}
main {
  position: relative;
  margin: 0 auto;
  padding: 1em;
  max-width: 23em;
  background: rgba(255, 255, 255, 0.25) border-box;
  overflow: hidden;
  border-radius: .3em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 0.5em 1em rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}
main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"glass text"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"glass text" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"glass text"
Bootstrap 3.0.0 Snippet by evarevirus