Skip to content

Instantly share code, notes, and snippets.

@elzup

elzup/text-shadow-inset.html

Created April 11, 2015 05:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save elzup/00ed2e8d3eb79a85417b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save elzup/00ed2e8d3eb79a85417b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
text-shadow-inset.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>text-shadow inset</title>
<style>
.row {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
width: 80%;
margin: 0 auto;
}
.row2 {
background: black;
}
.row > div {
width: 25%;
}
.shadow {
font-size: 10rem;
}
.shadow.shadow-l1 {
color: green;
}
.shadow.shadow-l2 {
color: rgba(0, 128, 0, 0.5);
}
.shadow.shadow-l3 {
color: rgba(0, 128, 0, 0.5);
text-shadow: 0 0 0 #000;
}
.shadow.shadow-l4 {
color: rgba(0, 128, 0, 0.5);
text-shadow: 10px 10px 10px #fff, 0 0 0 #000;
}
</style>
</head>
<body>
<div class="row">
<div>
<p>1. <br /><span class="shadow shadow-l1">龍■</span></p>
</div>
<div>
<p>2. <br /><span class="shadow shadow-l2">龍■</span></p>
</div>
<div>
<p>3. <br /><span class="shadow shadow-l3">龍■</span></p>
</div>
<div>
<p>4. <br /><span class="shadow shadow-l4">龍■</span></p>
</div>
</div>
<div class="row row2">
<div>
<p>1. <br /><span class="shadow shadow-l1">龍■</span></p>
</div>
<div>
<p>2. <br /><span class="shadow shadow-l2">龍■</span></p>
</div>
<div>
<p>3. <br /><span class="shadow shadow-l3">龍■</span></p>
</div>
<div>
<p>4. <br /><span class="shadow shadow-l4">龍■</span></p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment