Giá trị của thuộc tính opacity nằm trong khoảng từ 0.0 đến 1.0 [giá trị càng thấp thì độ trong suốt càng cao]
img {
opacity: 0.5;
}
div {
width:200px;
height: 200px;
background-color: green;
opacity: 0.8;
}
Xem ví dụTạo hình ảnh trong suốt khi bị dí chuột vào
Thử dí chuột vàoThử dí chuột vàoĐể tạo hình ảnh trong suốt khi bị dí chuột vào, ta thiết lập thuộc tính opacity cho hình ảnh đó khi nó ở trang thái hover
img:hover{
opacity: 0.5;
}
div:hover{
opacity: 0.8;
}
Xem ví dụLoại bỏ hiệu ứng trong suốt của hình ảnh khi nó bị dí chuột vào
Thử dí chuột vàoThử dí chuột vàoĐể loại bỏ hiệu ứng trong suốt của hình ảnh khi nó bị dí chuột vào, ta thiết lập thuộc tính opacity với giá trị 1 cho hình ảnh đó khi nó ở trạng thái hover
img:hover{
opacity: 1.0;
}
div:hover{
opacity: 1.0;
}
Xem ví dụTạo phần tử trong suốt nằm trên hình nền
HƯỚNG DẪN HỌC LẬP TRÌNH WEB
.background{
background-image:url['../image/background01.jpg'];
padding:50px;
}
.transbox{
font-size:25px;
text-align:center;
padding:20px;
background-color:#ddd;
opacity:0.7;
}
Xem ví dụLưu ý: Nếu một phần tử được thiết lập thuộc tính opacity thì các phần tử nằm bên trong nó cũng bị ảnh hưởng bởi thuộc tính opacity
CSS cung cấp nhiều tính năng cho phép các lập trình viên có thể vẽ được nhiều hình khác nhau. Bài viết này sẽ hướng dẫn bạn cách tạo các hình thông qua các ví dụ cụ thể:
Hình Vuông và Hình Chữ Nhật
Việc tạo ra 2 loại hình này không quá khó, tuy nhiên tôi vẫn muốn liệt kê ra đây để các bạn tham khảo:
div#my-div {
width: 50px;
height: 50px;
background: orange;
}
Kết quả:
Hình Tròn
Thông thường khi phải tạo ra hình tròn trên trang bạn sẽ nghĩ tới việc phải sử dụng hình ảnh thay vì có thể dùng CSS. Điều này chỉ đúng với CSS2 với CSS3 chúng ta có thể sử dụng thuộc tính border-radius
để có thể tạo hình tròn mà hoàn toàn không cần phải dùng tới hình ảnh. Hãy xem ví dụ sau:
div#my-div {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
--border-radius: 25px;
border-radius: 25px;
}
Khi sử dụng thuộc tính border-radius
chúng ta cần thêm vào các tiền tố tương ứng với các trình duyệt khác nhau. Ở đây chúng ta cần tạo một hình vuông và sau đó sử dụng border-radius
để uốn cong thành hình tròn. Giá trị của thuộc tính này cần phải bằng 1/2 giá trị của chiều dài và chiều rộng của thẻ div
tức là bằng 50px/2 = 25px.
Kết quả như sau:
Hình Ô-van
Hình ô-van cũng được tạo ra tương tự như hình tròn tuy nhiên thẻ div
ở ngoài sẽ là hình chữ nhật thay vì là hình vuông.
div#my-div {
width: 150px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Kết quả như sau:
Hình Tam Giác
Hình tam giác được tạo ra khi chúng ta sử dụng kết hợp 3 thuộc tính
div#my-div {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
--border-radius: 25px;
border-radius: 25px;
}
1, div#my-div {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
--border-radius: 25px;
border-radius: 25px;
}
2 và div#my-div {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
--border-radius: 25px;
border-radius: 25px;
}
3 để tạo đường bao viền trái, phải và đáy qua đó tạo nên hình tam giác. Ngày hôm nay chúng ta sẽ đi vào tìm hiểu các cách tạo shape thông qua việc sử dụng HTML CSS ở trong trang web nhé!
CSS Shape Là Gì?
CSS Shape là những dạng khối hình học được xây dựng bằng CSS và nó cũng rất gần gũi với chúng ta ví dụ như là hình chữ nhật, hình vuông, hình tròn, hình oval... Đối với hình vuông và hình chữ nhật thì chúng ta có thể dễ dàng tạo ra được vì hai hình học này được xem là mặc định trong trang web truyền thống[thiết kế chỉ xây dựng bằng lưới, box và những đường thẳng]. Còn với các hình có độ phức tạp cao hơn như hình tròn, elip... thì chúng ta cần thêm một số thuộc tính CSS khác như là bán kính đường viền, độ bo góc của hình...
Theo mình thấy, hiện nay các trang web ngày càng được thiết kế hiện đại với các bố cục tự do nhằm thỏa mãn tính sáng tạo của designer cũng như tăng tính trải nghiệm của người dùng khi sử dụng trang web.
Do đó bài viết hôm nay chúng ta sẽ đi vào tìm hiểu các shape CSS từ cơ bản đến nâng cao nhé!
Xây Dựng Hình Tròn Bằng CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình tròn bằng CSS nhé!
HTML
Hình Tròn CSS
CSS
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
Và đây là dự án vẽ hình tròn trên Codepen nha:
See the Pen Hình Tròn CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Vuông Bằng CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình vuông bằng CSS nhé!
HTML
Hình Vuông CSS
CSS
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
Và đây là dự án vẽ hình vuông trên Codepen nha:
See the Pen Hình Vuông CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Chữ Nhật Bằng CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình chữ nhật bằng CSS nhé!
HTML
Hình Chữ Nhật CSS
CSS
.hinh_chu_nhat{
width: 200px;
height: 100px;
background: #1E90FF;
}
Và đây là dự án vẽ hình chữ nhật trên Codepen nha:
See the Pen Hình Chữ Nhật CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Thang Bằng CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình thang bằng CSS nhé!
HTML
Hình Thang CSS
CSS
.hinh_thang{
border-bottom: 50px solid #1E90FF;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
Và đây là dự án vẽ hình thang trên Codepen nha:
See the Pen Hình Thang CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Bình Hành Bằng CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình bình hành bằng CSS nhé!
HTML
Hình Bình Hành CSS
CSS
.hinh_binh_hanh{
width: 150px;
height: 100px;
transform: skew[20deg];
background: #1E90FF;
}
Và đây là dự án vẽ hình bình hành trên Codepen nha:
See the Pen abZZWMV by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Tam Giác CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình tam giác bằng CSS nhé!
HTML
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
0CSS
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
1Và đây là dự án vẽ hình tam giác trên Codepen nha:
See the Pen Hình Tam Giác CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Ngôi Sao CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình ngôi sao bằng CSS nhé!
HTML
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
2CSS
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
3Và đây là dự án vẽ hình ngôi sao trên Codepen nha:
See the Pen Hình Ngôi Sao CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Trái Tim CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình trái tim bằng CSS nhé!
HTML
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
4CSS
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
5Và đây là dự án vẽ hình trái tim trên Codepen nha:
See the Pen Hình Trái Tim CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Infinity Symbol[Biểu Tượng Vô Cực] CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng biểu tượng vô cực bằng CSS nhé!
HTML
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
6CSS
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
7Và đây là dự án vẽ biểu tượng vô cực trên Codepen nha:
See the Pen WNxxObr by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình 5 Cạnh[Pentagon ] CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình 5 cạnh bằng CSS nhé!
HTML
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
8CSS
.hinh_tron{
width: 100px;
height: 100px;
background: #1E90FF;
border-radius: 50%
}
9Và đây là dự án vẽ hình 5 cạnh trên Codepen nha:
See the Pen Hình 5 Cạnh CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình 6 Cạnh[Hexagon] CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình 6 cạnh bằng CSS nhé!
HTML
Hình Vuông CSS
0CSS
Hình Vuông CSS
1Và đây là dự án vẽ hình 6 cạnh trên Codepen nha:
See the Pen Hình 6 Cạnh CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình 8 Cạnh[Octagons] CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình 8 cạnh bằng CSS nhé!
HTML
Hình Vuông CSS
2CSS
Hình Vuông CSS
3Và đây là dự án vẽ hình 8 cạnh trên Codepen nha:
See the Pen Hình 8 Cạnh CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Quả Trứng CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình quả trứng bằng CSS nhé!
HTML
Hình Vuông CSS
4CSS
Hình Vuông CSS
5Và đây là dự án vẽ hình quả trứng trên Codepen nha:
See the Pen Hình Quả Trứng CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Oval CSS
Bây giờ chúng ta sẽ đi vào đoạn mã xây dựng hình oval bằng CSS nhé!
HTML
Hình Vuông CSS
6CSS
Hình Vuông CSS
7Và đây là dự án vẽ hình quả trứng trên Codepen nha:
See the Pen Hình Oval CSS by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Xây Dựng Hình Dạnh Bằng Thuộc Tính .hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6 là một thuộc tính CSS giúp bạn có thể dễ dàng xây dựng hình dạng của một đối tượng bằng các hàm được cung cấp sẵn như là:- circle[]
- ellipse[]
- inset[]
- polygon[]
Ngoài ra nó cũng cho phép xác định cách hiển thị nội dung theo hình dạng của đối tượng mà chúng ta muốn thiết lập[hình tròn, elip...]. Để hiểu rõ hơn bạn và mình hãy đi vào từng ví dụ cụ thể nhé!
Hình Tròn Trong .hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
Bây giờ chúng ta sẽ đi vào tìm hiểu cách tạo hình tròn bằng
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6 và thiết lập nội dung hiển thị xung quanh hình tròn thông qua đoạn mã dưới đây nhé!HTML
Hình Vuông CSS
8CSS
Hình Vuông CSS
9Và kết quả cuối cùng bạn xem bên dưới nhé:
See the Pen Xây Dựng Circle bằng shape-outside by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Hình Elip Trong .hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
Tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo hình elip bằng
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6 và thiết lập nội dung hiển thị xung quanh hình elip thông qua đoạn mã dưới đây nhé!HTML
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
0CSS
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
1Và kết quả cuối cùng bạn xem bên dưới nhé:
See the Pen Xây Dựng Elip bằng shape-outside by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Sử Dụng Thuộc Tính Inset Trong .hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
Trong phần này chúng ta sẽ đi vào sử dụng
Hình Chữ Nhật CSS
3 trong thuộc tính .hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6 CSS để xem hình dạng cũng như cách hiển thị của nó với nội dung trên trang web nhé!HTML
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
2CSS
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
3Và kết quả cuối cùng bạn xem bên dưới nhé:
See the Pen Xây Dựng inset bằng shape-outside by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Sử Dụng Thuộc Tính Polygon Trong .hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
6
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
Đây là một thuộc tính giúp bạn có thể vẽ ra được nhiều hình dạng phức tạp như hình tam giác, hình 5 cạnh, hình 6 cạnh... Và để hiểu rõ hơn bạn xem đoạn mã sau nhé:
HTML
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
2CSS
.hinh_vuong{
width: 100px;
height: 100px;
background: #1E90FF;
}
5Và kết quả bạn xem Codepen bên dưới nhé:
See the Pen Xây Dựng polygon bằng shape-outside by haycuoilennao19 [@haycuoilennao19] on CodePen.
Nguồn
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo CSS Shape hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!