A responsive layout using flexbox with narrative text and speech bubbles styled in CSS. Background patterns also in CSS. The only acceptable use of Comic Sans font. :)
A Pen by Chris Smith on CodePen.
-
-
Save joereddington/9eee5c8e4a980871286d9ffd8ab428a3 to your computer and use it in GitHub Desktop.
Responsive Comic Book Layout
This file contains hidden or 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
| <html> | |
| <!-- this might be useful https://codemyui.com/hand-drawn-border-buttons-css/ --> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="style.css" media="screen"/><!-- could be "print"--> | |
| </head> | |
| <body> | |
| <img src="test.png" class="panel"> | |
| <div class="panel"> | |
| <img src="test.png"> | |
| <p class="text top-left">Suddenly...</p> | |
| <p class="text bottom-right">...something amazing happened</p> | |
| </div> | |
| <div class="panel"> | |
| <p class="text top-left">Try resizing...</p> | |
| <p class="text bottom-right">...it's responsive</p> | |
| <p class="speech">Anoth speech bubble</p> | |
| </div> | |
| <div class="panel"> | |
| <p class="speech">A speech bubble</p> | |
| </div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"></div> | |
| <div class="panel"> | |
| <p class="text bottom-right">THE END</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| html, body { | |
| margin:0; | |
| padding:0; | |
| } | |
| .comic { | |
| display:flex; | |
| flex-wrap:wrap; | |
| font-family:'Comic Sans', cursive; | |
| padding:1vmin; | |
| } | |
| .panel { | |
| background-color:#fff; | |
| border:solid 2px #000; | |
| box-shadow:0 6px 6px -6px #000; | |
| display:inline-block; | |
| flex:1 1; | |
| height:200px; | |
| margin:1vmin; | |
| overflow:hidden; | |
| position:relative; | |
| min-width:100px; | |
| } | |
| .text { | |
| background-color:#fff; | |
| border:solid 2px #000; | |
| margin:0; | |
| padding:3px 10px; | |
| } | |
| .top-left { | |
| left:-6px; | |
| position:absolute; | |
| top:-2px; | |
| transform:skew(-15deg); | |
| } | |
| .bottom-right { | |
| bottom:-2px; | |
| position:absolute; | |
| right:-6px; | |
| transform:skew(-15deg); | |
| } | |
| .speech { | |
| background-color:#fff; | |
| border:solid 2px #000; | |
| border-radius:12px; | |
| display:inline-block; | |
| margin:.5em; | |
| padding:.5em 1em; | |
| position:relative; | |
| } | |
| .speech:before { | |
| border:solid 12px transparent; | |
| border-left:solid 12px #000; | |
| border-top:solid 12px #000; | |
| bottom:-24px; | |
| content:""; | |
| height:0; | |
| left:24px; | |
| position:absolute; | |
| transform:skew(-15deg); | |
| width:0; | |
| } | |
| .speech:after { | |
| border:solid 10px transparent; | |
| border-left:solid 10px #fff; | |
| border-top:solid 10px #fff; | |
| bottom:-19px; | |
| content:""; | |
| height:0; | |
| left:27px; | |
| position:absolute; | |
| transform:skew(-15deg); | |
| width:0; | |
| } | |
| .panel:nth-child(1) { | |
| flex-basis: 400px; | |
| } | |
| .panel:nth-child(2) { | |
| flex-basis: 200px; | |
| } | |
| .panel:nth-child(3) { | |
| flex-basis: 200px; | |
| } | |
| .panel:nth-child(4) { | |
| flex-basis: 200px; | |
| } | |
| .panel:nth-child(5) { | |
| flex-basis: 200px; | |
| } | |
| .panel:nth-child(6) { | |
| flex-basis: 200px; | |
| } | |
| .panel:nth-child(7) { | |
| flex-basis: 400px; | |
| } | |
| .panel:nth-child(8) { | |
| flex-basis: 200px; | |
| } | |
| .panel:nth-child(9) { | |
| flex-basis: 200px; | |
| } | |
| /* background colours */ | |
| .panel:nth-child(4n+1) { | |
| background-image:radial-gradient(circle, yellow, orange); | |
| } | |
| .panel:nth-child(4n+2) { | |
| background-image:radial-gradient(circle, lightblue, deepskyblue); | |
| } | |
| .panel:nth-child(4n+3) { | |
| background-image:radial-gradient(circle, palegreen, yellowgreen); | |
| } | |
| .panel:nth-child(4n+4) { | |
| background-image:radial-gradient(circle, lightcoral, tomato); | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Might also find this useful: https://stackoverflow.com/questions/10721884/render-html-to-an-image/56194265#56194265 for taking screenshots