Last active
December 16, 2015 19:38
-
-
Save tpryan/5486052 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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%); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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