Laman

Làm biến hình biểu tượng cảm xúc sử dụng CSS3

0   nhận xét

Trong một văn bản web, đôi khi người viết dùng một nhóm ký tự để tạo biểu tượng cảm xúc và ít nhiều biểu tượng đó nói lên được cảm xúc mà tác giả muốn bày tỏ.

Ví dụ (:   :-O

Sử dụng CSS3 có thể làm biến hình các biểu tượng cảm xúc này một cách độc đáo. Trước tiên, bạn hãy tạo phần CSS như dưới đây.
span.smile {
color: Cyan;
display: inline-block;
font-family: Tahoma;
font-size: 20px;
padding: 0 5px;
}
span.smile.left {
-webkit-transform: rotate(-90deg); /* Chrome y Safari */
-moz-transform: rotate(-90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
-o-transform: rotate(-90deg); /* Opera */
}
span.smile.right {
-webkit-transform: rotate(90deg); /* Chrome y Safari */
-moz-transform: rotate(90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Internet Explorer */
-o-transform: rotate(90deg); /* Opera */
}
Tiếp đến là tạo cấu trúc HTML đơn giản như thế này.

<span class="smile right">:-)</span>

Bên dưới là kết quả một số biểu tượng cảm xúc sau khi sử dụng thủ thuật này.

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D