Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Comic Book UI

Comic Book UI

Inspired by the latest installment in the Spider-man movie-universe, create a couple elements themed around comic books.

A Pen by Gabriele Corti on CodePen.

License.

<!-- bubble introducing a scene -->
<div class="bubble">
Alright people, let's do <strong>this one last time.</strong>
</div>
<!-- bubble highlighting something -->
<div class="bubble bubble--highlight">
Play dumb
</div>
<!-- tag with the name of the main character -->
<div class="tag">
<strong>Hello</strong>
<br />
my name is
</div>
// no JavaScript this time either
@import url("https://fonts.googleapis.com/css?family=Dekko|Lato:900|Rock+Salt");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
width: 100%;
background: #eee;
/* center the content in the page (mainly horizontally) */
display: grid;
place-items: center;
/* include the same texture used for the .bubble containers, but with notably less opacity */
background: url('data:image/svg+xml;utf8,<svg width="100" height="100" transform="rotate(0)" opacity="0.2" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="%23250E17"><circle cx="25" cy="25" r="12.5"/><circle cx="75" cy="75" r="12.5"/><circle cx="75" cy="25" r="12.5"/><circle cx="25" cy="75" r="12.5"/></g></svg>'),
#c52754;
background-size: 10px, 100%;
}
/* .bubble containers: add the texture above a solid background */
.bubble {
/* cap the width */
max-width: 500px;
/* give ample whitespace around and inside of the container */
margin: 2rem 0;
padding: 0.2rem 1.25rem;
text-align: center;
font-family: "Dekko", cursive;
text-transform: uppercase;
font-size: 2rem;
letter-spacing: 0.2rem;
background: url('data:image/svg+xml;utf8,<svg width="100" height="100" transform="rotate(25)" opacity="0.3" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="%23250E17"><circle cx="25" cy="25" r="12.5"/><circle cx="75" cy="75" r="12.5"/><circle cx="75" cy="25" r="12.5"/><circle cx="25" cy="75" r="12.5"/></g></svg>'),
#fff;
background-size: 12px, 100%;
/* solid border */
border: 0.4rem solid #000;
/* position relative for the :before pseudo element */
position: relative;
}
/* for the highlight container change the solid backgorund to a yellow-ish hue */
.bubble--highlight {
background: url('data:image/svg+xml;utf8,<svg width="100" height="100" transform="rotate(25)" opacity="0.8" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="%23d68810"><circle cx="25" cy="25" r="12.5"/><circle cx="75" cy="75" r="12.5"/><circle cx="75" cy="25" r="12.5"/><circle cx="25" cy="75" r="12.5"/></g></svg>'),
#ffcd28;
background-size: 13px, 100%;
font-weight: 700;
}
/* for the highlight container always add an exclamation point */
.bubble--highlight:after {
content: "!";
}
/* for every .bubble container add a solid background behind the container itself, slightly offset */
.bubble:before {
content: "";
position: absolute;
left: -1rem;
top: 0.15rem;
width: 100%;
height: 100%;
/* with the same texture, but different color, for both the texture and the background */
background: url('data:image/svg+xml;utf8,<svg width="100" height="100" transform="rotate(35)" opacity="1" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="%23250E17"><circle cx="25" cy="25" r="12.5"/><circle cx="75" cy="75" r="12.5"/><circle cx="75" cy="25" r="12.5"/><circle cx="25" cy="75" r="12.5"/></g></svg>'),
#000;
background-size: 12px, 100%;
border: 0.4rem solid #000;
z-index: -5;
}
/* for the tag, add a lot of whitespace below the string, to include the name through the pseudo element */
.tag {
margin-bottom: 2rem;
padding: 1rem 7.5rem 11rem;
border-radius: 30px;
font-size: 2rem;
color: #fff;
background: #f8012d;
text-align: center;
font-family: "Lato", sans-serif;
box-shadow: 0 1px 15px -7.5px #000000;
/* position relative for the pseudo element(s) */
position: relative;
}
.tag strong {
text-transform: uppercase;
font-size: 3.5rem;
}
/* with the :before pseudo element include a solid white background */
.tag:before {
content: "";
position: absolute;
top: 9rem;
left: 2%;
width: 96%;
height: 9rem;
background: #fff;
/* border-radius mathing the .tag container */
border-radius: 0 0 30px 30px;
}
/* with the :after pseudo element add the name of the character */
.tag:after {
content: "Peter Parker";
position: absolute;
top: 11.25rem;
left: 0;
width: 100%;
text-align: center;
font-family: "Rock Salt", cursive;
font-size: 2rem;
letter-spacing: 0.25rem;
font-weight: 300;
font-weight: bold;
color: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment