Tạo hình trong HTML

Question

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)

Nội dung chính Show

Tạo hình ảnh trong suốt khi bị 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
Tạo phần tử trong suốt nằm trên hình nền
Hình Vuông và Hình Chữ Nhật
Hình Tròn
Hình Ô-van
Hình Tam Giác
CSS Shape Là Gì?
Xây Dựng Hình Tròn Bằng CSS
Xây Dựng Hình Vuông Bằng CSS
Xây Dựng Hình Chữ Nhật Bằng CSS
Xây Dựng Hình Thang Bằng CSS
Xây Dựng Hình Bình Hành Bằng CSS
Xây Dựng Hình Tam Giác CSS
Xây Dựng Hình Ngôi Sao CSS
Xây Dựng Hình Trái Tim CSS
Xây Dựng Hình Infinity Symbol(Biểu Tượng Vô Cực) CSS
Xây Dựng Hình 5 Cạnh(Pentagon ) CSS
Xây Dựng Hình 6 Cạnh(Hexagon) CSS
Xây Dựng Hình 8 Cạnh(Octagons) CSS
Xây Dựng Hình Quả Trứng CSS
Xây Dựng Hình Oval CSS
Xây Dựng Hình Dạnh Bằng Thuộc Tính .hinh_vuong{ width: 100px; height: 100px; background: #1E90FF; }6
Hình Tròn Trong .hinh_vuong{ width: 100px; height: 100px; background: #1E90FF; }6
Hình Elip Trong .hinh_vuong{ width: 100px; height: 100px; background: #1E90FF; }6
Sử Dụng Thuộc Tính Inset Trong .hinh_vuong{ width: 100px; height: 100px; background: #1E90FF; }6
Sử Dụng Thuộc Tính Polygon Trong .hinh_vuong{ width: 100px; height: 100px; background: #1E90FF; }6
Tổng kết:

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%
 }

0

CSS

.hinh_tron{
   width: 100px;
   height: 100px;
   background: #1E90FF;
   border-radius: 50%
 }

1

Và đâ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%
 }

2

CSS

.hinh_tron{
   width: 100px;
   height: 100px;
   background: #1E90FF;
   border-radius: 50%
 }

3

Và đâ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%
 }

4

CSS

.hinh_tron{
   width: 100px;
   height: 100px;
   background: #1E90FF;
   border-radius: 50%
 }

5

Và đâ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%
 }

6

CSS

.hinh_tron{
   width: 100px;
   height: 100px;
   background: #1E90FF;
   border-radius: 50%
 }

7

Và đâ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%
 }

8

CSS

.hinh_tron{
   width: 100px;
   height: 100px;
   background: #1E90FF;
   border-radius: 50%
 }

9

Và đâ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

0

CSS

 Hình Vuông CSS

1

Và đâ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

2

CSS

 Hình Vuông CSS

3

Và đâ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

4

CSS

 Hình Vuông CSS

5

Và đâ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

6

CSS

 Hình Vuông CSS

7

Và đâ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;
 }

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

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

8

CSS

 Hình Vuông CSS

9

Và 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

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;
 }

0

CSS

.hinh_vuong{
   width: 100px;
   height: 100px;
   background: #1E90FF;
 }

1

Và 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

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;
 }

2

CSS

.hinh_vuong{
   width: 100px;
   height: 100px;
   background: #1E90FF;
 }

3

Và 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

Đâ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;
 }

2

CSS

.hinh_vuong{
   width: 100px;
   height: 100px;
   background: #1E90FF;
 }

5

Và 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ẻ!

programming html