Skip to content

Instantly share code, notes, and snippets.

@joereddington

joereddington/index.html

Forked from CodeMyUI/index.html
Last active February 1, 2021 08:04
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 joereddington/9eee5c8e4a980871286d9ffd8ab428a3 to your computer and use it in GitHub Desktop.
Save joereddington/9eee5c8e4a980871286d9ffd8ab428a3 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Comic Book Layout
Raw
index.html
<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>
Raw
responsive-comic-book-layout.markdown

Responsive Comic Book Layout

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.

License.

Raw
style.css
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);
}
@joereddington
Copy link
Author

Might also find this useful: https://stackoverflow.com/questions/10721884/render-html-to-an-image/56194265#56194265 for taking screenshots

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment