Skip to content

Instantly share code, notes, and snippets.

@tpryan

tpryan/1.css

Last active December 16, 2015 19:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tpryan/5486052 to your computer and use it in GitHub Desktop.
Save tpryan/5486052 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1.css
.chathead{
width: 150px;
height: 150px;
border-radius: 75px;
border: 4px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
position: absolute;
right: -10px;
}
Raw
1.html
<!DOCTYPE html>
<html>
<head>
<title>Practical CSS - Single Chathead</title>
<link rel="stylesheet" href="css/single.css" type="text/css" media="screen" />
</head>
<body>
<img src="img/tpryan.png" class="chathead">
<div class="content">
<h2>The Main Thing</h2>
<p>DIY ea nulla photo booth tempor occaecat, velit nihil mixtape scenester.
Irony laboris echo park, wolf officia vice cupidatat labore butcher freegan
farm-to-table nisi velit aliqua gluten-free. Aliquip nesciunt assumenda,
wayfarers seitan wolf reprehenderit nulla twee sartorial dolore food truck
voluptate ex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur
fap pariatur dolor. Lo-fi nulla whatever mlkshk, banksy american apparel carles
adipisicing incididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater,
adipisicing sartorial non cardigan craft beer cillum reprehenderit terry richardson
3 wolf moon mollit. Ethical ut labore beard, 3 wolf moon duis readymade assumenda
hipster tofu mcsweeney's master cleanse.</p>
<p>Irony mixtape cupidatat 3 wolf moon, id cardigan retro cillum exercitation
biodiesel wes anderson locavore. Voluptate vinyl lo-fi, ethical sunt et irure nihil
fugiat. Terry richardson tumblr art party, artisan quis est cillum messenger bag
officia duis. Elit cliche letterpress est, single-origin coffee wayfarers mustache
aesthetic esse echo park dolor synth yr viral artisan. Do vinyl terry richardson
officia food truck. Veniam cupidatat et aliquip. Sartorial tattooed tofu odio eu
culpa ex, irony PBR.</p>
</div>
</body>
</html>
Raw
2.css
.chathead-multiple{
width: 150px;
height: 150px;
border-radius: 75px;
border: 4px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
right: -10px;
overflow: hidden;
position: absolute;
margin-right: -10px;
z-index: 10;
}
.chathead-multiple img{
display: none;
margin: 0;
z-index: 1;
}
.chathead-multiple img:nth-child(-n+3) {
width: 75px;
height: 75px;
display: inline-block;
position: absolute;
}
.chathead-multiple img:first-child {
width: 150px;
height: 150px;
left: -75px;
border-right: 1px solid #FFFFFF;
}
.chathead-multiple img:nth-child(2) {
left: 75px;
top:0;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-radius: 0 75px 0 0;
}
.chathead-multiple img:nth-child(3) {
left: 75px;
bottom:0;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-radius: 0 0 75px 0;
}
Raw
2.html
<div class="chathead-multiple">
<img src="img/tpryan.png">
<img src="img/jonesbey.png">
<img src="img/mcorlan.png">
<img src="img/khoyt.png">
</div>
Raw
3.html
.chathead-holder{
width: 150px;
height: auto;
right: -10px;
position: absolute;
}
.chathead-multiple{
width: 150px;
height: 150px;
border-radius: 75px;
border: 4px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
overflow: hidden;
right: -10px;
position: absolute;
z-index: 10;
}
.chathead-multiple img{
display: none;
margin: 0;
z-index: 1;
}
.chathead-multiple img:nth-child(-n+3) {
display: block;
width: 75px;
height: 75px;
display: inline-block;
position: absolute;
}
.chathead-multiple img:first-child {
width: 150px;
height: 150px;
left: -75px;
border-right: 1px solid #FFFFFF;
}
.chathead-multiple img:nth-child(2) {
left: 75px;
top:0;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-radius: 0 75px 0 0;
}
.chathead-multiple img:nth-child(3) {
left: 75px;
bottom:0;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-radius: 0 0 75px 0;
}
.chathead-single{
width: 150px;
height: 150px;
border-radius: 75px;
border: 4px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
position: relative;
margin-left: 0;
}
Raw
4.css
h2{
clear: both;
}
.content{
text-align: right;
}
.chathead-multiple{
float: right;
width: 150px;
height: 150px;
border-radius: 75px;
border: 4px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
overflow: hidden;
position: relative;
z-index: 10;
-webkit-shape-outside: circle(50%, 50%, 60%);
}
.chathead-multiple img{
display: none;
margin: 0;
z-index: 1;
}
.chathead-multiple img:nth-child(-n+3) {
display: block;
width: 75px;
height: 75px;
display: inline-block;
position: absolute;
}
.chathead-multiple img:first-child {
width: 150px;
height: 150px;
left: -75px;
border-right: 1px solid #FFFFFF;
}
.chathead-multiple img:nth-child(2) {
left: 75px;
top:0;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-radius: 0 75px 0 0;
}
.chathead-multiple img:nth-child(3) {
left: 75px;
bottom:0;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-radius: 0 0 75px 0;
}
.chathead-single{
width: 150px;
height: 150px;
border-radius: 75px;
border: 4px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
position: relative;
float: right;
clear: right;
margin-left: 65px;
margin-bottom: 25px;
right: 50px;
/* CANARY ONLY FEATURE NOW */
-webkit-shape-outside: circle(50%, 50%, 60%);
}
Raw
5.css
/* CANARY ONLY FEATURE NOW */
-webkit-shape-outside: circle(50%, 50%, 60%);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment