Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 371762" data-attributes="member: 1872">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 <a href="https://dribbble.com/shots/2638271--Little-big-detail/attachments/528478" target="_blank">this Dribbble post</a>It's a nice effect and decided to recreate it in CSS, no JavaScript required to pull the faces back.<a href="http://codepen.io/Markshall/pen/vGpWrg" target="_blank">View it on CodePen</a>And if you want the full code:[HTML]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Faces List&lt;/title&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.faces-list {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.faces-list li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.faces-list li:nth-child(n-1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: -11px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.faces-list li img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid #ffffff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;faces-list&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.radfaces.com/images/avatars/little-pete-wrigley.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.radfaces.com/images/avatars/chris-chambers.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.radfaces.com/images/avatars/lori-beth-denberg.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.radfaces.com/images/avatars/sam-emerson.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.radfaces.com/images/avatars/david-bowie.jpg&quot; alt=&quot;&quot;&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]</blockquote>

[QUOTE="Markshall, post: 371762, member: 1872"] 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 [URL='https://dribbble.com/shots/2638271--Little-big-detail/attachments/528478']this Dribbble post[/URL] It's a nice effect and decided to recreate it in CSS, no JavaScript required to pull the faces back. [URL='http://codepen.io/Markshall/pen/vGpWrg']View it on CodePen[/URL] 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>[/HTML] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members