Hiệu ứng Text trong CSS3
1. Vấn đề
Khi bạn tiến hành format văn bản sẽ gặp một số trường hợp đặc biệt đó là hiệu ứng của text.Hiệu ứng của text có thể là hightling một dòng văn bản, hay seclection một cụm từ nào đó mà đó được biểu thị dưới dạng quan trọng.CSS3 sẽ chịu trách nhiệm định dạng những văn bản có hình thức như vậy.Bây giờ, chúng ta cùng tìm hiểu vài nét về thuộc tính của những đối tượng này.
2. Hiệu ứng Text
Hiệu ứng đầu tiên mà chúng ta cần tìm hiểu đó là hiệu ứng hightlight trong văn bản. Để làm được việc đó bạn sử dụng đối tượng background-color trong thuộc tính của css cung cấp. Đoạn mã lệnh trên sẽ được cài đặt trong tag strong của html như bên dưới
p
{
line-height: 170%;
font-family: Verdana;
font-size: 12px;
width: 60%;
}
p>strong{background:yellow;}
Trong nội dung của html bạn cài đặt source code đầy đủ như sau:
<head>
<title></title>
<linkhref="css/textEffect.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<p>
Không gì có thể thay thế được từ dáng đầm ngắn của nàng. Một trong những phong cách
mang một nét đẹp nhẹ nhàng và uyển chuyển Nét đẹp không chỉ thể hiện qua chất liệu
của nét vãi mà còn thể hiện nên hình tượng và kiểu dáng của nhà thiết kế. Những
phong cách phù hợp đến từng kiểu dáng sang trọng của nàng <strong>Màu sắc tinh tế kiểu dáng
đa dạng hòa cùng những phụ kiện sẽ làm tôn lên nét đẹp của dáng đầm. </strong> Nổi bật nhất
là nét cách điệu của chiếc đầm họa tiết hoa phối hợp cùng dây thắt lưng màu tím,
phụ kiện đeo tay luôn sẽ tôn lên nét đẹp quý phái của nàng.
</p>
</body>
Kết quả nhận được từ đoạn mã trên sẽ là:
3. Lưu ý
Bạn cần lưu ý khi sử dụng trình duyệt Safari và firefox, khi sử dụng firefox và Safari bạn cần cài đặt mã lệnh:
::selection {
color: #90c;
background: #cf0;
}
::-moz-selection {
color: #90c;
background: #cf0;
}
Kết quả đạt được
GV Hồ Đức Duy
Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.Thông tin kích hoạt gửi đến mail của bạn.
Hiệu ứng Text trong CSS3
Người đăng: VNTAOBAO.COM on Thứ Tư, 27 tháng 3, 2013
{ 0 nhận xét... read them below or add one }
Đăng nhận xét