LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
Two boxers fighting in a ring

The blows landed like a hammer…

CSS
@font-face {
  font-family: 'SequentialistBB';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/306FA6_1_0.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/306FA6_0_0.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}
body {
  margin: 0;
  font-family: SequentialistBB, script;
  background: #990000;
}

#comicbookpanels {
  position: relative;
  width: 80%;
  max-width: 1000px;
  margin: 1.6rem auto;
}

#comicbookpanels img {
  position: absolute;
}

#comicbookpanels img {
  top: 0;
  left: 0;
  width: 100%;
}

#comicbookpanels p {
  position: absolute;
  left: 50%;
  margin-top: 30%;
  font-size: 1.4rem;
}

#comicbookpanels span {
  background: #fff;
  border: 2px solid #000;
  padding: .5rem;
  display: block;
  position: relative;
  margin-top: 1rem;
}

#comicbookpanels p span:first-child {
  margin-left: 1rem;
}

#comicbookpanels p span:last-child {
  margin-left: -1rem;
}

#comicbookpanels img:first-of-type {
  -webkit-clip-path: url(#leftpanel);
          clip-path: url(#leftpanel);
  -webkit-clip-path: polygon(0 0, 61% 0, 49% 100%, 0 100%);
          clip-path: polygon(0 0, 61% 0, 49% 100%, 0 100%);
}

#comicbookpanels img:last-of-type {
  top: 2rem;
  left: 1rem;
  -webkit-clip-path: url(#rightpanel);
          clip-path: url(#rightpanel);
  -webkit-clip-path: polygon(100% 0, 61% 0, 49% 100%, 100% 100%);
          clip-path: polygon(100% 0, 61% 0, 49% 100%, 100% 100%);
}

#clippingpaths {
  height: 0;
}

Description

Creating responsive comic panels with dynamism using CSS clip-path, including SVG fallback. Full explanatory article on my site. Photograph by @mopictures, licensed under Creative Commons.
Term
Tue, 11/28/2017 - 13:42

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv