Roy Lichtenstein effect in CSS

In this example below you will see how to do a Roy Lichtenstein effect in CSS with some HTML / CSS and Javascript

requires blend modes (chrome://flags/#enable-experimental-web-platform-features)

Thumbnail
This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Roy Lichtenstein effect in CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<h1>Roy Lichtenstein effect in CSS</h1>
<div class="holder #{$person}">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on #{$person}" height="333"/></figure>
</div>
<div class="holder #{$person}">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on #{$person}" height="333"/></figure>
</div>
<div class="holder #{$person}">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on #{$person}" height="333"/></figure>
</div>
<h2>Originals</h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on {$person}" height="333"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on {$person}" height="333"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on {$person}" height="333"/>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pixelass/roy-lichtenstein-effect-in-css-Bsfwt */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body {
  font-family: 'Open Sans', sans-serif;
  background: #555;
  color: #fff;
  min-width: 1300px;
}

.holder {
  display: inline-block;
  vertical-align: top;
  height: 333px;
  width: 277px;
  -webkit-filter: contrast(1.5) saturate(0.4) contrast(3);
          filter: contrast(1.5) saturate(0.4) contrast(3);
  overflow: hidden;
  background-size: 100%;
  position: relative;
}
.holder.marilynmonroe, .holder.marilynmonroe figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/marilynmonroe.jpg);
}
.holder.diva1, .holder.diva1 figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/diva1.jpg);
}
.holder.marilynmonroe2, .holder.marilynmonroe2 figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/marilynmonroe2.jpg);
}

figure {
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  position: relative;
  mix-blend-mode: screen;
  -webkit-transform: scale(0.333);
          transform: scale(0.333);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-filter: brightness(3) contrast(0.15) saturate(0.5) contrast(5);
          filter: brightness(3) contrast(0.15) saturate(0.5) contrast(5);
}
figure img {
  height: 1000px;
}
figure:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  mix-blend-mode: multiply;
  background-color: white;
  background-image: radial-gradient(black 33.3333333333%, transparent 33.3333333333%), radial-gradient(black 33.3333333333%, transparent 33.3333333333%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
figure:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  -webkit-filter: contrast(10) blur(1px) brightness(3) contrast(1) grayscale(1) saturate(10);
          filter: contrast(10) blur(1px) brightness(3) contrast(1) grayscale(1) saturate(10);
  mix-blend-mode: multiply;
  background-size: 100%;
}

Comments