header-object

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 tim,
      phụ kiện đao 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à:

hieu-ung-text-1

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:

  • Safari
::selection {
color: #90c;
background: #cf0;
}
  • Firefox
::-moz-selection {
color: #90c;
background: #cf0;
}
  • Kết quả đạt được

hieu-ung-text-2

GV Hồ Đức Duy

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 756 khách đang truy cập
2491917