Cách tạo hình trái tim bằng CSS
CSS3 nâng cao tính khả thi của những gì chúng ta có thể xây dựng trên các trang web chỉ bằng HTML và CSS. Bạn có thể tìm thấy những ví dụ tuyệt vời mà chúng tôi đã đề cập trước đó. Nhưng chúng ta đừng đi quá xa so với chính mình, một thiết kế phức tạp sẽ cần các mã có thể khiến bạn đau đầu.
Thay vào đó, chúng tôi sẽ tạo ra một cái gì đó đơn giản để giúp bạn hiểu hình dạng và định vị bằng CSS trước, trước khi mạo hiểm để thiết kế cao cấp hơn. Vì ngày lễ tình nhân chỉ gần kề, hãy tạo hình trái tim bằng HTML và CSS.
Những thứ cơ bản
Về cơ bản, chúng ta có thể tạo một hình dạng mới bằng cách nối một hoặc nhiều hình dạng cơ bản, như hình chữ nhật và hình tròn. Nếu chúng ta kiểm tra một hình trái tim, chúng ta có thể thấy rằng nó được tạo thành từ hai hình tròn và hình chữ nhật kết hợp. Các phần tử HTML về cơ bản là một hình vuông hoặc hình chữ nhật. Nhờ bán kính đường viền CSS3, chúng ta có thể dễ dàng chuyển đổi hình chữ nhật thành hình tròn.
Bắt đầu bằng cách thêm một Sau đó, chúng tôi làm cho nó một hình vuông bằng cách chỉ định chiều rộng và chiều cao bằng nhau. Chọn màu nền bạn thích. Tiếp theo, chúng tôi sẽ thực hiện các vòng tròn. Thay vì thêm các phần tử mới, chúng tôi sẽ sử dụng các phần tử giả, Cùng với hình vuông, chúng ta sẽ có một kết quả như thế này: Sau đó, chúng ta tạo vòng tròn thứ hai với phần tử giả Kết quả như sau: Chúng ta có thể kết hợp hai kiểu giống nhau này bằng cách nhóm các bộ chọn phần tử giả như sau: Ta-da! Chúng ta có hình trái tim, mặc dù nó chưa đi đúng hướng. Để làm thẳng nó lên, chúng tôi sẽ sử dụng Chuyển đổi CSS3. Chuyển đổi có thể được trao cho các yếu tố chính của hình dạng; ở đây, có nghĩa là hình vuông. Khi được chuyển đổi, phần tử giả sẽ tự động thay đổi vị trí của nó theo phần tử chính. Ở đây chúng ta sẽ xoay trái tim để nó được nhìn thấy “đứng”. Và đây là trái tim của chúng ta bây giờ. Mã hoàn chỉnh của hình trái tim ở trên như sau, trong HTML: Và trên CSS của chúng tôi, nó sẽ như thế này: Lưu ý rằng bây giờ chúng ta đặt kênh alpha của Bây giờ chúng ta có một hình trái tim hoàn hảo, chúng ta có thể thay nền sang màu khác (ví dụ: màu hồng hoặc màu đỏ) một cách dễ dàng. Nhược điểm duy nhất ở đây là chúng tôi không thể thêm đường viền đến hình dạng do các yếu tố xếp chồng lên nhau. Thêm một đường viền sẽ làm cho trái tim trông kỳ lạ. Với CSS3, việc tạo một hình dạng giống như hình trái tim giờ đây có thể dễ dàng thực hiện. Thuộc tính bán kính biên giới cho phép chúng ta biến các phần tử hoặc thậm chí thành phần tử giả thành một vòng tròn. Với chuyển đổi CSS3, chúng ta có thể xoay hoặc di chuyển tọa độ của đối tượng dễ dàng. Bạn chỉ bị giới hạn bởi sự sáng tạo và trí tưởng tượng của bạn!
.hình trái tim vị trí: tương đối; chiều rộng: 200px; chiều cao: 200px; màu nền: rgba (250.184,66, 0,8);
:trước và :sau. Trước tiên chúng tôi đặt :trước yếu tố giả như vòng tròn đầu tiên của chúng tôi. Chúng tôi làm cho nó một hình vuông với kích thước bằng nhau về chiều rộng và chiều cao giống như chúng tôi đã làm với div. Sau đó, chúng tôi biến đổi nó thành một vòng tròn bằng cách cho nó bán kính đường viền 50% và đặt nó ở bên trái của hình vuông. .hình trái tim: trước vị trí: tuyệt đối; dưới cùng: 0px; bên trái: -100px; chiều rộng: 200px; chiều cao: 200px; nội dung: "; -webkit-Border-radius: 50%; -moz-Border-radius: 50%; -o-Border-radius: 50%; Border-radius: 50%; màu nền: rgba (250.184,66 , 0,8);
:sau với các kiểu giống như vòng tròn đầu tiên chúng tôi tạo ra. Sau đó, chúng tôi cũng đặt nó trên đỉnh của hình vuông. .hình trái tim: sau vị trí: tuyệt đối; đầu trang: -100px; phải: 0px; chiều rộng: 200px; chiều cao: 200px; nội dung: "; -webkit-Border-radius: 50%; -moz-Border-radius: 50%; -o-Border-radius: 50%; Border-radius: 50%; màu nền: rgba (250.184,66 , 0,8);
.hình trái tim: trước,. yêu-hình: sau vị trí: tuyệt đối; chiều rộng: 200px; chiều cao: 200px; nội dung: "; -webkit-Border-radius: 50%; -moz-Border-radius: 50%; -o-Border-radius: 50%; Border-radius: 50%; màu nền: rgba (250.184,66 , 0.8); .love-shape: before bottom: 0px; left: -100px; .love-shape: after top: -100px; right: 0px;
.hình trái tim -webkit-Transform: xoay (45deg); -moz-Transform: xoay (45deg); -ms-Transform: xoay (45deg); -o-Transform: xoay (45deg); biến đổi: xoay (45deg);
Kết quả:
.hình trái tim vị trí: tương đối; chiều rộng: 200px; chiều cao: 200px; -webkit-Transform: xoay (45deg); -moz-Transform: xoay (45deg); -ms-Transform: xoay (45deg); -o-Transform: xoay (45deg); biến đổi: xoay (45deg); màu nền: rgba (250,184,66, 1); . yêu-hình: trước,. yêu-hình: sau vị trí: tuyệt đối; chiều rộng: 200px; chiều cao: 200px; nội dung: "; -webkit-Border-radius: 50%; -moz-Border-radius: 50%; -o-Border-radius: 50%; Border-radius: 50%; màu nền: rgba (250.184,66 , 1); .love-shape: before bottom: 0px; left: -100px; .love-shape: after top: -100px; right: 0px;
rgba (250.184,66, 1) trong nền để 1 để loại bỏ tính minh bạch. Bây giờ đây là những gì trái tim của chúng tôi trông.
Phần kết luận
