Tạo kiểu cho hình ảnh của bạn và sử dụng hình ảnh theo kiểu
Nhiều người sử dụng CSS để điều chỉnh văn bản, thay đổi phông chữ, màu sắc, kích thước và nhiều thứ khác. Nhưng một điều mà nhiều người thường quên là bạn cũng có thể sử dụng CSS với hình ảnh.
Thay đổi hình ảnh
CSS cho phép bạn điều chỉnh cách hiển thị hình ảnh trên trang. Điều này có thể thực sự hữu ích để giữ cho các trang của bạn nhất quán. Bằng cách đặt kiểu trên tất cả hình ảnh, bạn tạo giao diện chuẩn cho hình ảnh của mình. Một số điều bạn có thể làm:
- Thêm đường viền hoặc đường viền xung quanh hình ảnh
- Xóa đường viền màu xung quanh hình ảnh được liên kết
- Điều chỉnh chiều rộng và / hoặc chiều cao của hình ảnh
- Thêm bóng đổ
- Xoay hình ảnh
- Thay đổi kiểu khi hình ảnh được di chuột qua
Cho hình ảnh của bạn một biên giới là một nơi tuyệt vời để bắt đầu. Nhưng bạn nên xem xét nhiều hơn chỉ là biên giới - suy nghĩ về toàn bộ cạnh của hình ảnh của bạn và điều chỉnh lề và đệm là tốt. Một hình ảnh có đường viền màu đen mỏng trông đẹp mắt, nhưng thêm một số phần đệm giữa đường viền và hình ảnh có thể trông đẹp hơn nữa.
img {
border: 1px màu đen;
đệm: 5px;
}
Bạn nên luôn liên kết hình ảnh không trang trí , khi có thể. Nhưng khi bạn làm điều đó, hãy nhớ rằng hầu hết các trình duyệt đều thêm đường viền màu xung quanh hình ảnh. Ngay cả khi bạn sử dụng mã trên để thay đổi đường viền, liên kết cũng sẽ ghi đè lên trừ khi bạn xóa hoặc thay đổi đường viền trên liên kết. Để thực hiện điều này, bạn nên sử dụng quy tắc con CSS để xóa hoặc thay đổi đường viền xung quanh hình ảnh được liên kết:
img> a {
border: none;
}
Bạn cũng có thể sử dụng CSS để thay đổi hoặc đặt chiều cao và chiều rộng của hình ảnh. Mặc dù không nên sử dụng trình duyệt để điều chỉnh kích thước hình ảnh vì tốc độ tải xuống, chúng sẽ cải thiện kích thước hình ảnh tốt hơn để chúng trông vẫn đẹp. Và với CSS, bạn có thể đặt hình ảnh của mình thành tất cả chiều rộng hoặc chiều cao chuẩn hoặc thậm chí đặt kích thước tương ứng với vùng chứa.
Hãy nhớ rằng, khi bạn thay đổi kích thước hình ảnh, để có kết quả tốt nhất, bạn chỉ nên thay đổi kích thước một chiều - chiều cao hoặc chiều rộng. Điều này sẽ enusre rằng hình ảnh giữ tỷ lệ khía cạnh của nó, và do đó, không nhìn lạ. Đặt giá trị khác thành tự động hoặc bỏ qua để cho trình duyệt biết tỷ lệ khung hình phù hợp.
img {
chiều rộng: 50%;
chiều cao: auto;
}
CSS3 cung cấp một giải pháp cho vấn đề này với các thuộc tính mới phù hợp với đối tượng và vị trí đối tượng. Với các thuộc tính này, bạn sẽ có thể xác định chiều cao và chiều rộng hình ảnh chính xác và cách xử lý tỷ lệ cỡ ảnh. Điều này có thể tạo hiệu ứng hộp thư xung quanh hình ảnh hoặc xén của bạn để có được hình ảnh vừa với kích thước yêu cầu.
Mặc dù các thuộc tính của đối tượng CSS3 phù hợp với đối tượng và vị trí đối tượng chưa được hỗ trợ rộng rãi, có các thuộc tính CSS3 khác được hỗ trợ tốt trong hầu hết các trình duyệt hiện đại mà bạn có thể sử dụng để sửa đổi hình ảnh của mình. Những thứ như đổ bóng, góc tròn và chuyển đổi để xoay, nghiêng hoặc di chuyển hình ảnh của bạn đều hoạt động ngay bây giờ trong hầu hết các trình duyệt hiện đại. Sau đó, bạn có thể sử dụng chuyển tiếp CSS để làm cho hình ảnh thay đổi khi được di chuột qua hoặc nhấp hoặc chỉ sau một khoảng thời gian.
Sử dụng hình ảnh làm hình nền
CSS làm cho nó dễ dàng để tạo ra hình nền ưa thích với hình ảnh của bạn.
Bạn có thể thêm hình nền cho toàn bộ trang hoặc chỉ một phần tử cụ thể. Thật dễ dàng để tạo hình nền trên trang có thuộc tính hình nền:
thân hình {
background-image: url (background.jpg);
}
Thay đổi bộ chọn cơ thể thành một phần tử cụ thể trên trang để đặt nền trên chỉ một phần tử.
Một điều thú vị khác mà bạn có thể làm với hình ảnh là tạo hình nền không cuộn với phần còn lại của trang - như hình mờ. Bạn chỉ cần sử dụng kiểu nền đính kèm: cố định; cùng với hình nền của bạn. Các tùy chọn khác cho nền của bạn bao gồm làm cho chúng xếp theo chiều ngang hoặc chiều dọc bằng thuộc tính lặp lại nền.
Viết lặp lại nền: lặp lại-x; để xếp hình ảnh theo chiều ngang và lặp lại nền: lặp lại-y; để xếp theo chiều dọc. Và bạn có thể định vị hình nền của mình với thuộc tính vị trí nền.
Và CSS3 cũng bổ sung thêm phong cách cho nền của bạn. Bạn có thể kéo giãn hình ảnh của mình để vừa với bất kỳ kích thước nền nào hoặc đặt hình nền để mở rộng với kích thước cửa sổ . Bạn có thể thay đổi vị trí và sau đó cắt hình nền. Nhưng một trong những điều tốt nhất về CSS3 là bạn có thể lớp nhiều hình ảnh nền để tạo ra các hiệu ứng phức tạp hơn.
HTML5 giúp hình ảnh kiểu
Phần tử HÌNH trong HTML5 nên được đặt xung quanh bất kỳ hình ảnh nào có thể đứng một mình trong tài liệu. Một cách để suy nghĩ về nó là nếu hình ảnh có thể xuất hiện trong phụ lục, thì nó phải ở trong phần tử FIGURE. Sau đó, bạn có thể sử dụng phần tử đó và phần tử FIGCAPTION để thêm kiểu cho hình ảnh của bạn.