I see a lot of inset text, but none of it's white. I want to have white inset text with a blue background. How is it done?
This is what I have so far, but can't seem to get the text to inset (also see fiddle below).
HTML:
<body>
<div>
<h1><a href=#>H</a>
E
L
L
O
</h1>
</div>
</body>
CSS:
body {
font-family: 'Sigmar One', cursive;
font-size: 100px;
color: white;
text-shadow: 4px 4px 4px #000;
background-color:#0047B2;
width: 100%;
height: 100%;
margin: 0;
}
div {
position:absolute;
height:100%;
width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
a:visited, a:hover, a:active {
text-decoration: none;
color: white;
}
a:link {
text-decoration: none;
text-shadow: 0px 2px 3px rgba(255,255,255,.25);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
a:hover {
text-shadow: 4px 4px 4px #000;
color: white;
}
i would use a paint program and make the background blue and then add white text to the background and save the image and then use that image as the background of your webpage.
it shouldn't be that hard.
eg body background="background1.png"