Header Ads Widget

Ticker

6/recent/ticker-posts

Hiệu ứng chữ 3D

Chia sẻ với các bạn thủ thuật chữ 3D. Chắc rằng sau khi thực hiện sẽ blog của các bạn sẽ trở nên đẹp và lạ mắt hơn đấy. Hiệu ứng này có tác dụng là khi bạn trỏ chuột vào chữ hay tiêu đề bài viết thì sẽ được chuyển thành chữ 3D. Các bạn có thể áp dụng thủ thuật này cho tất cả chữ, nơi mà bạn muốn hiển thị trong Blog của bạn.



Vào chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS bên dưới:
[code type="CSS"]
#text3D {
font-family: 'Myriad Pro', Helvetica, Arial sans-serif;
font-size: 8em;
width: 100%;
text-align: center;
margin: 120px 0;
}

#text3D a {
text-decoration: none;
font-weight: bold;
color: #C0FF3E;
text-shadow: 0 2px 0 #721e1e, 0px 2px 5px rgba(0,0,0,0.5);
position: relative;
-webkit-transition: all 0.1s ease-in;
}

#text3D a:hover {
text-shadow: 0 2px 0 #d84f4f, 0 4px 0 #d54646, 0 6px 0 #ce3333, 0 8px 0 #b92e2e, 0 10px 0 #912525, 0 12px 0 #721e1e, 0px 12px 10px rgba(0,0,0,0.5);
top: -12px;
}[/code]

Khi sử dụng thì dùng đoạn code dưới đây nhé:
[code type="HTML"]
[/code]
Khi bạn thực hiện thành công sẽ được kết quả như sau :

Đăng nhận xét