CSS note

Special Presentation for Emphasize the character

@source

@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);
@keyframes flip-top {
 from {
 transform: rotate(50deg) translateY(120vh);
 }
}
@keyframes flip-bottom {
 from {
 transform: rotate(-50deg) translateY(120vh);
 }
}
.data-text-css {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 300px;
 overflow: hidden;
 background: #111;
 animation: glow 8s both;
}

.data-text-css span {
 font: 900 5vw Raleway;
 position: relative;
 display: inline-block;
 perspective: 500px;
}
.data-text-css span:nth-child(odd):before {
 animation-name: flip-top;
}
.data-text-css span:nth-child(odd):after {
 animation-name: flip-bottom;
}
.data-text-css span:nth-child(even):before {
 animation-name: flip-bottom;
}
.data-text-css span:nth-child(even):after {
 animation-name: flip-top;
}
.data-text-css span:nth-child(1n + 0):before {
 color: #4EC0B6;
}
.data-text-css span:nth-child(1n + 0):after {
 color: #4ea4c0;
}
.data-text-css span:nth-child(2n + 1):before {
 color: #3967CB;
}
.data-text-css span:nth-child(2n + 1):after {
 color: #3c39cb;
}
.data-text-css span:nth-child(3n + 2):before {
 color: #FDCD2F;
}
.data-text-css span:nth-child(3n + 2):after {
 color: #e8fd2f;
}
.data-text-css span:nth-child(4n + 3):before {
 color: #E23942;
}
.data-text-css span:nth-child(4n + 3):after {
 color: #e26839;
}
.data-text-css span:nth-child(1):before {
 animation-delay: 0.88706103s;
}
.data-text-css span:nth-child(1):after {
 animation-delay: 1.32716906s;
}
.data-text-css span:nth-child(2):before {
 animation-delay: 1.76318195s;
}
.data-text-css span:nth-child(2):after {
 animation-delay: 2.19375431s;
}
.data-text-css span:nth-child(3):before {
 animation-delay: 2.61755757s;
}
.data-text-css span:nth-child(3):after {
 animation-delay: 3.03328403s;
}
.data-text-css span:nth-child(4):before {
 animation-delay: 3.43965091s;
}
.data-text-css span:nth-child(4):after {
 animation-delay: 3.83540431s;
}
.data-text-css span:nth-child(5):before {
 animation-delay: 4.21932309s;
}
.data-text-css span:nth-child(5):after {
 animation-delay: 4.59022261s;
}
.data-text-css span:nth-child(6):before {
 animation-delay: 4.94695842s;
}
.data-text-css span:nth-child(6):after {
 animation-delay: 5.28842978s;
}
.data-text-css span:nth-child(7):before {
 animation-delay: 5.61358301s;
}
.data-text-css span:nth-child(7):after {
 animation-delay: 5.92141483s;
}
.data-text-css span:nth-child(8):before {
 animation-delay: 6.21097537s;
}
.data-text-css span:nth-child(8):after {
 animation-delay: 6.48137117s;
}
.data-text-css span:nth-child(9):before {
 animation-delay: 6.73176788s;
}
.data-text-css span:nth-child(9):after {
 animation-delay: 6.96139287s;
}
.data-text-css span:before, .data-text-css span:after {
 display: block;
 content: attr(data-text);
 animation: 0.88888889s ease-out both;
 animation-name: inherit;
 text-shadow: 0 0 1em;
}
.data-text-css span:before {
 -webkit-clip-path: polygon(0 0 100% 0, 100% 100%);
 clip-path: polygon(0 0 100% 0, 100% 100%);
 position: absolute;
 transform-origin: left center;
 color: #4EC0B6;
}
.data-text-css span:after {
 -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
 clip-path: polygon(0 0, 100% 100%, 0 100%);
 color: #3967CB;
}

SVG

.entry-content{
 background:url(https://tenman.info/labo/css/files/blur-header-1.jpg);
 height:300px;
 background-size:contain;
 background-repeat:no-repeat;
}
svg{
 font: bold 50px 'Arial';
 width: 50%;
 height: 300px;
}
text{
 fill: #000;
 stroke: #fff;
 stroke-width:2px;
 stroke-linejoin: round;
}

.stroke-dasharray text{
 fill: #000;
 stroke: #fff;
 stroke-width:2px;
 stroke-dasharray: 2,2;
 stroke-linejoin: round;
}

CSS text-stroke

Browser Support

CSS text-shadow

新着記事