Pure CSS Metal Text Effects - CSS Creative 3D Text Typography - Tutorial - HTML5 CSS3 Text Effects

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Metal Text Effects đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.

Metal text Metal text

<h3 id="text-effect">
    <span>Metal text</span>
    <span>Metal text</span>
</h3>

#text-effect {
    display: block;
    position: relative;
    span {
        font-size: 40px;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: 5px;
        background: -webkit-gradient(linear,left top, left bottom,from(#262626),color-stop(#eaeaea),to(#262626));
        background: -webkit-linear-gradient(#262626,#eaeaea,#262626);
        background: -o-linear-gradient(#262626,#eaeaea,#262626);
        background: linear-gradient(#262626,#eaeaea,#262626);
        -webkit-background-clip:text;
        color: transparent;
        text-align: center;
        font-weight: bold;
        position: relative;
        z-index: 2;
        &:nth-child(2) {
            position: absolute;
            top:0;
            left: 0;
            z-index: 1;
            text-shadow: 1px 1px 0 #262626,2px 2px 0 #262626,3px 3px 0 #262626,4px 4px 0 #262626,5px 5px 0 #262626,1px 1px 0 #262626,6px 20px 20pc rgba(0,0,0,1),-1px -1px 0 #fff;
        }
    }
}

0 thảo luận về Pure CSS Metal Text Effects - CSS Creative 3D Text Typography - Tutorial - HTML5 CSS3 Text Effects

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục