Cách chỉnh một vài hiệu ứng đơn giản cho hình ảnh

Table of Contents

CSS cung cấp nhiều hiệu ứng đơn giản nhưng ấn tượng để làm cho hình ảnh trở nên sinh động và chuyên nghiệp hơn. Bạn có thể sử dụng filter để tạo hiệu ứng như làm mờ (blur), chuyển sang trắng đen (grayscale), hay tăng độ sáng (brightness). Ngoài ra, thuộc tính transform giúp xoay (rotate), phóng to thu nhỏ (scale), hoặc nghiêng hình ảnh (skew). Những hiệu ứng này không chỉ giúp hình ảnh nổi bật hơn mà còn mang lại trải nghiệm trực quan hấp dẫn cho người dùng.

Cách chỉnh một vài hiệu ứng đơn giản cho hình ảnh

Trong bài viết này, các bạn sẽ được tìm hiểu cách sử dụng thuộc tính filter để chỉnh một vài hiệu ứng đơn giản cho hình ảnh, ví dụ như: đen trắng, mờ ảo, tương phản, trong suốt, . . . .

– Để sử dụng thuộc tính filter thì chúng ta dùng cú pháp như sau:

filter: value;

– Trong đó, value có thể được xác định dựa theo một trong mười hai loại giá trị.

(các bạn vui lòng bấm vào hình để tìm hiểu chi tiết cách sử dụng của từng loại giá trị)

none	– Không tạo bất kỳ một hiệu ứng gì cho hình ảnh.
blur()	– Chỉnh hiệu ứng mờ ảo cho hình ảnh.
brightness()	– Chỉnh độ sáng tối của hình ảnh.
contrast()	– Chỉnh độ tương phản của hình ảnh.
saturate()	– Chỉnh độ bão hòa của hình ảnh.
opacity()	– Chỉnh độ trong suốt của hình ảnh.
grayscale()	– Chuyển hình ảnh sang dạng ảnh trắng đen.
sepia()	– Chuyển hình ảnh sang dạng ảnh nâu đỏ.
hue-rotate()	– Chuyển đổi màu xoay vòng cho hình ảnh.
drop-shadow()	– Tạo một cái bóng cho hình ảnh.
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính filter có giá trị là none)
inherit	– Kế thừa giá trị thuộc tính filter từ phần tử cha của nó.

– Lưu ý: Nếu các bạn muốn tạo nhiều hiệu ứng cho hình ảnh thì các bạn chỉ cần gán nhiều giá trị cho thuộc tính filter là được.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        img{
            filter: saturate(900%) drop-shadow(6px 6px 7px black);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị blur() dùng để chỉnh hiệu ứng mờ ảo cho hình ảnh.

– Lưu ý: Khi giá trị blur() càng lớn thì hình ảnh sẽ càng mờ ảo.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:blur(0px);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị brightness() dùng để chỉnh độ sáng tối của hình ảnh.

– Mặc định thì độ sáng tối của hình ảnh là 100%.

– Khi giá trị brightness() càng lớn thì hình ảnh sẽ càng sáng.

– Khi giá trị brightness() càng nhỏ thì hình ảnh sẽ càng tối (nếu bằng 0% thì hình ảnh sẽ chuyển sang màu đen)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:brightness(100%);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị contrast() dùng để chỉnh độ tương phản của hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:contrast(100%);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị saturate() dùng để chỉnh độ bão hòa của hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:saturate(100%);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị opacity() dùng để chỉnh độ trong suốt của hình ảnh.

– Mặc định thì hình ảnh không có độ trong suốt (100%)

– Độ trong suốt sẽ tăng dần khi giá trị giảm dần từ 100% xuống 0%

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:opacity(100%);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị grayscale() dùng để chuyển hình ảnh sang dạng ảnh trắng đen.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:grayscale(0%);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị sepia() dùng để chuyển hình ảnh sang dạng ảnh nâu đỏ.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:sepia(0%);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị hue-rotate() dùng để chuyển đổi màu xoay vòng cho hình ảnh.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:hue-rotate(0deg);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

– Giá trị drop-shadow() dùng để tạo một cái bóng cho hình ảnh.

– Lưu ý: Cách xác định giá trị này cũng tương tự như cách xác định giá trị cho thuộc tính box-shadow

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        img{
            filter:drop-shadow(3px 3px 5px #333);
        }
    </style>
</head>
<body>
    <img src="../image/pineapple.jpg">
</body>
</html>

Cách chỉnh một vài hiệu ứng đơn giản cho hình ảnh

Related Posts