50 thủ thuật CSS không thể bỏ qua – part V

50 thủ thuật CSS không thể bỏ qua – part V

(tiếp theo các phần trước)
50 thủ thuật CSS không thể bỏ qua – part IV
50 thủ thuật CSS không thể bỏ qua – part III
50 thủ thuật CSS không thể bỏ qua – part II
50 thủ thuật CSS không thể bỏ qua – part I

36. Tạo chữ mờ

CSS

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

37. Cross-browser inline-block

inline-block không hoạt động trên IE6, 7 và Firefox 2 trở xuống. Bạn cần đoạn CSS sau:

display: inline-block;
*display: inline; zoom: 1; /* IE6,7*/
display: -moz-inline-stack;  /* Firefox <= 2*/

38. Hiệu ứng cho các button

.btn{
    background-color: #21759B;
    background-image: linear-gradient(to bottom, #2A95C5, #21759B);
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
    border-color: #21759B #21759B #1E6A8D #21759B;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px 3px 3px 3px;
    display: inline-block;
    padding: 4px 15px 7px 15px;
    margin: 2px 4px;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover, .btn:focus {
    background-color: #278AB7;
    background-image: linear-gradient(to bottom,#2E9FD2,#21759B);
    border-color: #1B607F;
    box-shadow: 0 1px 0 rgba(120,200,230,0.6) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3)
}

Bạn có thể xem thêm tại đây

39. Sử dụng CSS3 Animation

(chi tiết)

40. Multiline ellipsis

(chi tiết)

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!