css-wordart

by Shogo Kawahara

HTML

<div class="stroke-black">なつやすみのしおり</div>
<div class="gradation">なつやすみのしおり</div>
<div class="arch">なつやすみのしおり</div>
<div class="t3d">なつやすみのしおり</div>
<div class="t3d-2-c">
<div class="t3d-2" title="なつやすみのしおり">なつやすみのしおり</div>
</div>



<script src="https://cdn.rawgit.com/codrops/Arctext/master/js/jquery.arctext.js"></script>

CSS

.stroke-black {
  -webkit-text-stroke-color: black;
	-webkit-text-stroke-width: 1px;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

.gradation {
  font-size: 30px;
  font-weight: bold;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(red, blue);
}

.arch {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 40px;
}

.arch span {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(red, blue);
}

.t3d {
  -webkit-text-stroke-color: black;
	-webkit-text-stroke-width: 2px;
  font-size: 30px;
  font-weight: bold;
  color: white;
  text-shadow:
    1px 1px 0px gray,
    2px 2px 0px gray,
    3px 3px 0px gray,
    4px 4px 0px gray,
    5px 5px 0px gray,
    6px 6px 0px gray,
    7px 7px 0px gray,
    8px 8px 0px gray,
    9px 9px 0px gray,
    10px 10px 0px gray;
}

.t3d-2-c {
  position: relative;
}

.t3d-2, .t3d-2:before, .t3d-2:after {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  content: attr(title);
  left: 0;
  top: 0;
}

.t3d-2 {
  color: red;
  text-shadow:
    1px 1px 0px gray,
    2px 2px 0px gray,
    3px 3px 0px gray,
    4px 4px 0px gray,
    5px 5px 0px gray,
    6px 6px 0px gray,
    7px 7px 0px gray,
    8px 8px 0px gray,
    9px 9px 0px gray,
    10px 10px 0px gray;
}

.t3d-2:after {
  color: blue;
  -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
}

JavaScript

$(document).ready(function() {
  $(".arch").arctext({radius: 200});
});