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.
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.
<!-- 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; | |
} |