Hình ảnh hồ sơ HTML CSS

Nếu bạn cần hiển thị danh sách người dùng, thành viên hoặc bất kỳ thứ gì tương tự, hãy thử hiển thị ảnh hồ sơ chồng lên nhau để tiết kiệm dung lượng. Điều này cũng tạo ra cảm giác kết nối giữa những người dùng đó

Khi bạn có danh sách những người trên trang web của mình, đôi khi việc hiển thị ảnh hồ sơ của họ có thể không vừa với không gian bạn có sẵn. Với thủ thuật xếp lớp CSS đơn giản, bạn có thể sắp xếp những hình ảnh này theo cách tiết kiệm ít không gian hơn. Xếp lớp ảnh hồ sơ lên ​​nhau cũng sẽ tăng cường cảm giác nhóm [?]  trong không gian nhóm thành viên. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách xây dựng danh sách ảnh hồ sơ và xếp chúng lên nhau

Bắt đầu

Chúng tôi đang sử dụng Bootstrap để xây dựng cấu trúc của mình, vì vậy chúng tôi sẽ bắt đầu bằng cách thêm Bootstrap vào dự án của mình. Sao chép và dán Bootstrap CDN bên dưới vào dự án của bạn

HTML

Dưới đây chúng tôi có một cột Bootstrap và bên trong một

Ngoài ra, lưu ý rằng chúng tôi đã thêm một lớp hình tròn cho mỗi div hình ảnh để làm cho hình ảnh tròn. Trong Bootstrap, lớp được làm tròn làm cho các góc của phần tử được tròn và lớp được làm tròn sẽ tự động làm cho hình ảnh có hình tròn. Nếu bạn không muốn hình ảnh của mình tròn, bạn có thể bỏ tên lớp này trong dự án của mình
CSS
Bây giờ chúng ta xây dựng cấu trúc HTML, đã đến lúc tạo các hình ảnh xếp chồng lên nhau. Chúng tôi đã tạo một tên lớp đặc biệt là 
#1 – CSS 
.css-shadow {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid #cddc39;
  filter: drop-shadow[0 0 8px #ff5722];
}

  

Code language: CSS [css]
0 có thể được sử dụng để mang lại vẻ ngoài giống như phát sáng
 
   
 
Code language: HTML, XML [xml]
.css-after {
  position: relative;
}
.css-after img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid #cddc39;
}
.css-after::after {
  content: "";
  width: 85px;
  height: 91px;
  border-radius: 50%;
  background-color: #ff5722;
  display: block;
  position: absolute;
  top: -6px;
  left: -3px;
  z-index: -1;
}
Code language: CSS [css]
#4 – Một ví dụ khác sử dụng phần tử giả 
.css-shadow {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid #cddc39;
  filter: drop-shadow[0 0 8px #ff5722];
}

  

Code language: CSS [css]
1, lần này một gradient được áp dụng cho nền
Code language: JavaScript [javascript]
2____13
Nếu bạn có một số CSS mà bạn đã sử dụng cho hình ảnh hồ sơ, vui lòng liên hệ và chúng tôi sẽ xem xét chia sẻ nó trong bài đăng này. Cũng xin cảm ơn Pravatar đã cung cấp dịch vụ giữ chỗ miễn phí cho người dùng được sử dụng cho tất cả các hình ảnh
 

			
Làm cách nào để tạo hình đại diện trong CSS?
			
Khi Sử dụng Html và CSS, Bạn có thể tạo một hình đại diện đơn giản.  . 
 
Add your Html code.   Avatar Creation .. .
 
Thêm kiểu vào tệp HTML của bạn. Đây là nơi nó xảy ra. tạo avatar. Chúng ta phải thêm các giá trị chiều cao và chiều rộng vào hình ảnh và cả hai giá trị phải giống nhau để tạo hình vuông
 
		
			
Ảnh đại diện là gì?
			
Hình đại diện là  đại diện trực quan của một người để sử dụng trong ngữ cảnh kỹ thuật số . Đó thường là hình ảnh do máy tính tạo ra, chẳng hạn như bitmoji. Trên mạng xã hội, thuật ngữ “hình đại diện” cũng đề cập đến ảnh đại diện của bạn—hình ảnh đại diện cho bạn trên nền tảng. 
		
			
Làm cách nào để đưa hình ảnh vào HTML?
			
Đây là cách nó được thực hiện trong ba bước đơn giản.  . 
 
Sao chép URL của hình ảnh bạn muốn chèn
 
Next, open your index. html file and insert it into the img code. Example: .
 
Lưu tệp HTML. Lần sau khi bạn mở nó, bạn sẽ thấy trang web có hình ảnh mới được thêm vào của bạn