Skip to content

Instantly share code, notes, and snippets.

@mnmly
Created January 11, 2012 05:47
Show Gist options
  • Save mnmly/1593261 to your computer and use it in GitHub Desktop.
Save mnmly/1593261 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
body{
padding: 100px;
}
.word-container{
position: relative;
}
.word{
position: relative;
top: 0px;
}
.word:nth-child(2){
position: relative;
left: 100px;
top: -60px
}
.word:nth-child(3){
position: relative;
left: 200px;
top: -120px
}
span{
position: absolute;
font-size: 2rem;
font-family: Helvetica;
top: 100px;
font-weight: bold;
color: hsla(0, 0%, 0%, .1);
display: block;
-webkit-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16);
letter-spacing: -.08em;
}
span:nth-child(2){
top: 300px;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 10px hsla(0, 0%, 0%, .3);
}
<div class="word-container">
<div data-count="10" data-term="何かしら" class="word">
<span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span>
</div>
<div data-count="10" data-term="何かしら" class="word">
<span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span>
</div>
<div data-count="10" data-term="何かしら" class="word">
<span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span><span>何かしら</span>
</div>
{"view":"split","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment