- Dec 18, 2010
- 2,637
- 2,389
There's a fairly popular trend going around on the web at the minute where websites will display faces of people but they will overlap each other.
I've seen this on a few designs, and saw it most recently on
It's a nice effect and decided to recreate it in CSS, no JavaScript required to pull the faces back.
And if you want the full code:
I've seen this on a few designs, and saw it most recently on
You must be registered for see links
It's a nice effect and decided to recreate it in CSS, no JavaScript required to pull the faces back.
You must be registered for see links
And if you want the full code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Faces List</title>
<style>
body {
padding: 100px;
}
ul.faces-list {
list-style: none;
}
ul.faces-list li {
display: inline-block;
}
ul.faces-list li:nth-child(n-1) {
margin-left: -11px;
}
ul.faces-list li img {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #ffffff;
}
</style>
</head>
<body>
<ul class="faces-list">
<li><img src="http://www.radfaces.com/images/avatars/little-pete-wrigley.jpg" alt=""></li>
<li><img src="http://www.radfaces.com/images/avatars/chris-chambers.jpg" alt=""></li>
<li><img src="http://www.radfaces.com/images/avatars/lori-beth-denberg.jpg" alt=""></li>
<li><img src="http://www.radfaces.com/images/avatars/sam-emerson.jpg" alt=""></li>
<li><img src="http://www.radfaces.com/images/avatars/david-bowie.jpg" alt=""></li>
</ul>
</body>
</html>
