Viết
blog ngoài nội dung phong phú đa dạng, bạn còn phải có cách trình bày,
giao diện đẹp đẽ bắt mắt. Với những Blog càng tạo được phong cách riêng
thì càng được mọi người nhớ lâu. Lần trước Namkna đã giới thiệu thủ
thuật chạy chữ 2 lớp. Hôm nay namkna giới thiệu thủ thuật tạo dòng chữ
xoay tròn theo con trỏ chuột.
#outerCircleText {
font-style: italic;
font-weight: bold; /*Nếu không muốn in đậm cho text bạn có thể bỏ dòng này*/
font-family: times; /*chọn font chữ*/
color: #0033ff; /*màu của dòng text hiển thị*/
position: absolute;
top: 0;
left: 0;
z-index: 1000;
cursor: default; /*hình dạng của chuột*/
}
#outerCircleText div {
position: relative;
}
#outerCircleText div div {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
4. Tiếp theo, bạn thêm tiện ích HTML/Javacript rồi dán code này vào<script type="text/javascript">
var msg = "Chào mừng các bạn đến với Blog Namkna"; // thay thành text của bạn
var size = 24; // cỡ chữ, bạn có thể chọn cỡ chữ khác
var circleY = 0.75; // độ rộng vòng tròn text theo chiều đứng
var circleX = 2; // độ rộng vòng tròn text theo chiều ngang
var letter_spacing = 8; // khoảng trắng giữa các chữ cái
var diameter = 10;
var rotation = 0.2;
var speed = 0.3; // tốc độ chạy của text
</script>
<script type="text/javascript" src="Link Javarsctip circle_text"> </script>
- Bây giờ bạn có thể thay đổi chữ hiển thị kích thước , font chữ, tốc độ... để phù hợp với ý thích của bạn.
- Bạn download file circle_text về tại đây sau đó Upload lên host google code (xem cách đăng ký google code tại đay) để lấy link và thay vào Link Javarsctip circle_text ở Code trên là được.
- Thay dòng chữ màu xanh thành dòng chữ bạn muốn hiển thị quanh chuột.
- Nếu chưa biết các mã màu bạn có thể lựa chọn tại đây
Chúc vui vẻ!!
0 nhận xét:
Đăng nhận xét