Mỹ thuật web

Tổng hợp những hiệu ứng chữ đẹp mắt với CSS3

21/04/2014  | 
Hôm nay, Vivicorp xin giới thiệu đến các bạn 6 hiệu ứng chữ đẹp mắt được làm từ [CSS]3, với những hiệu ứng này bạn có thể sử dụng cho chính [website] hay blog của mình.


Hiệu ứng #1 – CSS3 3D với text-shadow

Để tạo hiệu ứng 3D với thuộc tính text-shadow, các bạn có thể sử dụng đoạn css sau :
 #eff1 {
    color: #00b506;
    text-shadow:
        0px 0px 0 rgb(-28,153,-22),
        1px 1px 0 rgb(-55,126,-49),
        2px 2px 0 rgb(-83,98,-77),
        3px 3px 0 rgb(-111,70,-105),
        4px 4px 0 rgb(-139,42,-133),
        5px 5px 0 rgb(-166,15,-160),
        6px 6px 0 rgb(-194,-13,-188),
        7px 7px 0 rgb(-222,-41,-216),
        8px 8px 7px rgba(0,0,0,0.75),
        8px 8px 1px rgba(0,0,0,0.5),
        0px 0px 7px rgba(0,0,0,.2);
}

Hiệu ứng #2 – CSS3 gradient text với -webkit-mask-image (Webkit)

Hiệu ứng này sử dụng css3 masks (-webkit-mask-image). Hiện tại thì thuộc tính này không hỗ trợ nhiều cho các trình duyệt, nhưng chúng tôi hy vọng là trong tương lai, các trình duyệt sẽ hỗ trợ tính năng này.
#eff2 {
    color: #00b506;
    text-shadow: 1px 1px 1px #000000;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)),
 color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
} 

Hiệu ứng #3 – CSS3 rainbow text background với -webkit-text-fill-color (Webkit)
#eff3 {
    background-image: -webkit-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image: -moz-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image: -ms-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:-o-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
    background-image:linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
 
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
} 

Hiệu ứng #4 CSS3 shining text với transition và -webkit-background-clip (Webkit)

#eff4 {
    background: #00b506 -webkit-gradient(linear, left top, right top,
from(#00b506), to(#00b506), color-stop(0.5, #ffffff)) 0 0 no-repeat;
    color: rgba(255, 255, 255, 0.1);
    font-size: 120px;
    font-weight: bold;
    position: relative;
 
    -webkit-animation: shine 2s infinite;
    -webkit-background-clip: text;
    -webkit-background-size: 300px;
}
 
@-webkit-keyframes shine {
    0% {
        background-position: top left;
    }
    100% {
        background-position: top right;
    }
} 

Hiệu ứng #5 – CSS3 outlined text với text-stroke (Webkit)

#eff5 {
    color: #00b506;
 
    -webkit-text-stroke: 1px #000;
} 

Hiệu ứng #6 – CSS3 3D flip text với transform (rotateY)

Bạn có thể làm chữ quay bằng cách sử dụng transitions + transform (rotateY):

#eff6 {
    color: #00b506;
}
#eff6 p {
    color: #8A2BE2;
    cursor: pointer;
    display: inline-block;
 
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
#eff6 p:hover {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -0-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
} 

Hy vọng các bạn sẽ thích với những hiệu ứng mà chúng tôi giới thiệu trong bài viết này, hãy chia sẻ cho bạn bè của bạn nhé !

Tham khảo thêm : Hover.css - tập hợp hiệu ứng hover bằng CSS3 đơn giản

Like Tạp Chí Web
comments powered by Disqus