Created
December 28, 2021 13:46
-
-
Save chr15m/901c5763b413bae2f4d1adc6fc098998 to your computer and use it in GitHub Desktop.
Outlined drop-shadow header demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en-us"> | |
<head> | |
<title>Fat font drop shadow.</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<meta name="mobile-web-app-capable" content="yes"> | |
<meta name="description" content="Pure CSS fat outline letters with hard drop shadow."> | |
<style> | |
@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap'); | |
body { | |
max-width: 800px; width: 100%; margin: 1em auto; font-size: 2em; | |
font-family: 'Sigmar One', cursive; | |
} | |
h1 { | |
text-align: center; | |
color: white; | |
-webkit-text-stroke-width: 3px; | |
-webkit-text-stroke-color: black; | |
text-shadow: 4px 4px 0px #000, 5px 5px 0px #000, 6px 6px 0px #000; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Hello World.</h1> | |
</body> | |
<script> | |
// put your code here. | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment