<header class="header">
<h1 class="title">Image Effects <span class="tag-line">are implemented by <a href="http://bennettfeely.com/image-effects">@bennettfeely</a></span></h1>
<div class="icon-menu">
<button class="label download-btn fa fa-download js-download" title="Download you pretty photo"></button>
<button class="label reset-btn fa fa-trash js-reset" title="Reset"></button>
<input class="input" type="file" id="imageInput" />
<label class="fa fa-upload label image-icon" for="imageInput" title="Upload your photo"></label>
<a class="fa fa-github label image-icon" href="https://github.com/seyedi/image-effects"></a>
</div>
</header>
<main class="main">
<div class="effects">
<figure class="effects__item selected" data-name="none-effect">
<div class="effects__img none-effect"></div>
<figcaption class="effects__name">none</figcaption>
</figure>
<figure class="effects__item" data-name="pencil-effect">
<div class="effects__img pencil-effect"></div>
<figcaption class="effects__name">pencil</figcaption>
</figure>
<figure class="effects__item" data-name="watercolor-effect">
<div class="effects__img watercolor-effect"></div>
<figcaption class="effects__name">watercolor</figcaption>
</figure>
<figure class="effects__item" data-name="emboss-effect">
<div class="effects__img emboss-effect"></div>
<figcaption class="effects__name">emboss</figcaption>
</figure>
<figure class="effects__item" data-name="colored-pencil-effect">
<div class="effects__img colored-pencil-effect"></div>
<figcaption class="effects__name">colored pencil</figcaption>
</figure>
<figure class="effects__item" data-name="chalkboard-effect">
<div class="effects__img chalkboard-effect"></div>
<figcaption class="effects__name">chalkboard</figcaption>
</figure>
<figure class="effects__item" data-name="colored-chalkboard-effect">
<div class="effects__img colored-chalkboard-effect"></div>
<figcaption class="effects__name">colored chalkboard</figcaption>
</figure>
<figure class="effects__item" data-name="airbrush-effect">
<div class="effects__img airbrush-effect"></div>
<figcaption class="effects__name">airbrush</figcaption>
</figure>
<figure class="effects__item" data-name="hallucination-effect">
<div class="effects__img hallucination-effect"></div>
<figcaption class="effects__name">hallucination</figcaption>
</figure>
<figure class="effects__item" data-name="flannel-effect">
<div class="effects__img flannel-effect"></div>
<figcaption class="effects__name">flannel</figcaption>
</figure>
<figure class="effects__item" data-name="low-ink-x-effect">
<div class="effects__img low-ink-x-effect"></div>
<figcaption class="effects__name">Low Ink (horizontal)</figcaption>
</figure>
<figure class="effects__item" data-name="low-ink-y-effect">
<div class="effects__img low-ink-y-effect"></div>
<figcaption class="effects__name">Low Ink (vertical)</figcaption>
</figure>
<figure class="effects__item" data-name="collage-effect">
<div class="effects__img collage-effect"></div>
<figcaption class="effects__name">collage</figcaption>
</figure>
<figure class="effects__item" data-name="mosaic-effect">
<div class="effects__img mosaic-effect"></div>
<figcaption class="effects__name">mosaic</figcaption>
</figure>
<figure class="effects__item" data-name="photo-border-effect">
<div class="effects__img photo-border-effect"></div>
<figcaption class="effects__name">photo border</figcaption>
</figure>
<figure class="effects__item" data-name="infrared-effect">
<div class="effects__img infrared-effect"></div>
<figcaption class="effects__name">infrared</figcaption>
</figure>
<figure class="effects__item" data-name="night-vision-effect">
<div class="effects__img night-vision-effect"></div>
<figcaption class="effects__name">night vision</figcaption>
</figure>
<figure class="effects__item" data-name="warhol-effect">
<div class="effects__img warhol-effect"></div>
<figcaption class="effects__name">warhol</figcaption>
</figure>
<figure class="effects__item" data-name="selective-color-effect">
<div class="effects__img selective-color-effect"></div>
<figcaption class="effects__name">selective color</figcaption>
</figure>
<figure class="effects__item" data-name="mirror-x-effect">
<div class="effects__img mirror-x-effect"></div>
<figcaption class="effects__name">Mirror (horizontal)</figcaption>
</figure>
<figure class="effects__item" data-name="mirror-y-effect">
<div class="effects__img mirror-y-effect"></div>
<figcaption class="effects__name">Mirror (vertical)</figcaption>
</figure>
</div>
<figure class="preview">
<div class="photo none-effect">
<img src="http://tools.css-tricks.ir/image-effects/img/bg.jpg" class="placeholder" alt="">
</div>
<figcaption class="code">
<menu class="code__menu">
<button class="code__btn js-css is-selected">CSS</button>
<button class="code__btn js-scss">SCSS</button>
<button class="code__btn js-copy" data-clipboard-target=""><i class="fa fa-files-o" aria-hidden="true"></i> <span class="js-copy-text">Copy</span></button>
</menu>
<div class="effect-code-wrapper">
<div class="effect-code" id="none">
</div>
<div class="effect-code" id="pencil">
<pre class="css" id="pencil_css"><code class="language-css">.pencil-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: invert(1)) and (background-blend-mode: difference) {
.pencil-effect {
background-image: url(photo.jpg), url(photo.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
}
</code></pre>
<pre class="scss" id="pencil_scss"><code class="language-scss">.pencil-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: invert(1)) and (background-blend-mode: difference) {
background-image: $url, $url;
background-blend-mode: difference;
background-position:
calc(50% - 1px) calc(50% - 1px),
calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
}</code></pre>
</div>
<div class="effect-code" id="watercolor">
<pre class="css" id="watercolor_css"><code class="language-css">.watercolor-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
.watercolor-effect {
position: relative;
overflow: hidden;
}
.watercolor-effect:before, .watercolor-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
.watercolor-effect:before {
background-image: url(photo.jpg), url(photo.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
.watercolor-effect:after {
background-image: url(photo.jpg);
background-position: center;
mix-blend-mode: multiply;
filter: brightness(1.3) blur(2px) contrast(2);
}
}
</code></pre>
<pre class="scss" id="watercolor_scss"><code class="language-scss">.watercolor-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
position: relative;
overflow: hidden;
&:before, &:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
&:before {
background-image: $url, $url;
background-blend-mode: difference;
background-position:
calc(50% - 1px) calc(50% - 1px),
calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
&:after {
background-image: $url;
background-position: center;
mix-blend-mode: multiply;
filter: brightness(1.3) blur(2px) contrast(2);
}
}
}</code></pre>
</div>
<div class="effect-code" id="emboss">
<pre class="css" id="emboss_css"><code class="language-css">.emboss-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
.emboss-effect {
background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
background-blend-mode: difference, screen;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
filter: brightness(2) invert(1) grayscale(1);
}
}
</code></pre>
<pre class="scss" id="emboss_scss"><code class="language-scss">.emboss-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
background-image: $url, $url, $url;
background-blend-mode: difference, screen;
background-position:
calc(50% - 1px) calc(50% - 1px),
calc(50% + 1px) calc(50% + 1px),
center;
filter: brightness(2) invert(1) grayscale(1);
}
}</code></pre>
</div>
<div class="effect-code" id="colored-pencil">
<pre class="css" id="colored-pencil_css"><code class="language-css">.colored-pencil-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: invert(1)) and (mix-blend-mode: color) {
.colored-pencil-effect {
position: relative;
}
.colored-pencil-effect:before, .colored-pencil-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
box-shadow: inset 0 0 0 1px black;
}
.colored-pencil-effect:before {
background-image: url(photo.jpg), url(photo.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
}
.colored-pencil-effect:after {
background: inherit;
mix-blend-mode: color;
}
}
</code></pre>
<pre class="scss" id="colored-pencil_scss"><code class="language-scss">.colored-pencil-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: invert(1)) and (mix-blend-mode: color) {
position: relative;
&:before,
&:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
box-shadow: inset 0 0 0 1px black;
}
&:before {
background-image: $url, $url;
background-blend-mode: difference;
background-position:
calc(50% - 1px) calc(50% - 1px),
calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
}
&:after {
background: inherit;
mix-blend-mode: color;
}
}
}</code></pre>
</div>
<div class="effect-code" id="chalkboard">
<pre class="css" id="chalkboard_css"><code class="language-css">.chalkboard-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
.chalkboard-effect {
background-image: url(photo.jpg), url(photo.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(1.5) grayscale(1);
}
}
</code></pre>
<pre class="scss" id="chalkboard_scss"><code class="language-scss">.chalkboard-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
background-image: $url, $url;
background-blend-mode: difference;
background-position:
calc(50% - 1px) calc(50% - 1px),
calc(50% + 1px) calc(50% + 1px);
filter: brightness(1.5) grayscale(1);
}
}</code></pre>
</div>
<div class="effect-code" id="colored-chalkboard">
<pre class="css" id="colored-chalkboard_css"><code class="language-css">.colored-chalkboard-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
.colored-chalkboard-effect {
background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
background-size: cover;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
background-blend-mode: color, difference;
filter: brightness(2);
}
}
</code></pre>
<pre class="scss" id="colored-chalkboard_scss"><code class="language-scss">.colored-chalkboard-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
background-image: $url, $url, $url;
background-size: cover;
background-position:
calc(50% - 1px) calc(50% - 1px),
calc(50% + 1px) calc(50% + 1px),
center;
background-blend-mode: color, difference;
filter: brightness(2);
}
}</code></pre>
</div>
<div class="effect-code" id="airbrush">
<pre class="css" id="airbrush_css"><code class="language-css">.airbrush-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
.airbrush-effect {
position: relative;
overflow: hidden;
}
.airbrush-effect:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
mix-blend-mode: multiply;
}
}
</code></pre>
<pre class="scss" id="airbrush_scss"><code class="language-scss">.airbrush-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
position: relative;
overflow: hidden;
&:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
mix-blend-mode: multiply;
}
}
}</code></pre>
</div>
<div class="effect-code" id="hallucination">
<pre class="css" id="hallucination_css"><code class="language-css">.hallucination-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (mix-blend-mode: multiply) {
.hallucination-effect {
position: relative;
overflow: hidden;
background-color: magenta;
background-blend-mode: screen;
}
.hallucination-effect:before, .hallucination-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
mix-blend-mode: multiply;
transform: scale(1.05);
}
.hallucination-effect:before {
background-color: yellow;
background-blend-mode: screen;
transform-origin: top left;
}
.hallucination-effect:after {
background-color: cyan;
background-blend-mode: screen;
transform-origin: bottom right;
}
}
</code></pre>
<pre class="scss" id="hallucination_scss"><code class="language-scss">.hallucination-effect {
$url : url(photo.jpg);
$offset : 5px;
background-image: $url;
background-size: cover;
background-position: center;
@supports (mix-blend-mode: multiply) {
position: relative;
overflow: hidden;
background-color: magenta;
background-blend-mode: screen;
&:before, &:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
mix-blend-mode: multiply;
transform: scale(1.05);
}
&:before {
background-color: yellow;
background-blend-mode: screen;
transform-origin: top left;
}
&:after {
background-color: cyan;
background-blend-mode: screen;
transform-origin: bottom right;
}
}
}</code></pre>
</div>
<div class="effect-code" id="flannel">
<pre class="css" id="flannel_css"><code class="language-css">.flannel-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: overlay) {
.flannel-effect {
background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
background-position: center;
background-size: 100%, 100000% 100%, 100% 100000%;
background-blend-mode: overlay;
}
}
</code></pre>
<pre class="scss" id="flannel_scss"><code class="language-scss">.flannel-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (background-blend-mode: overlay) {
background-image: $url, $url, $url;
background-position: center;
background-size: 100%, 100000% 100%, 100% 100000%;
background-blend-mode: overlay;
}
}</code></pre>
</div>
<div class="effect-code" id="low-ink-x">
<pre class="css" id="low-ink-x_css"><code class="language-css">.low-ink-x-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: screen, overlay) {
.low-ink-x-effect {
background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
background-size: 100% 100%, 10000% 100%;
background-blend-mode: screen, overlay;
}
}
</code></pre>
<pre class="scss" id="low-ink-x_scss"><code class="language-scss">.low-ink-x-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (background-blend-mode: screen, overlay) {
background-image: $url, $url, $url;
background-size: 100% 100%, 10000% 100%;
background-blend-mode: screen, overlay;
}
}</code></pre>
</div>
<div class="effect-code" id="low-ink-y">
<pre class="css" id="low-ink-y_css"><code class="language-css">.low-ink-y-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: screen, overlay) {
.low-ink-y-effect {
background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
background-size: 100% 100%, 100% 1000%;
background-blend-mode: screen, overlay;
}
}
</code></pre>
<pre class="scss" id="low-ink-y_scss"><code class="language-scss">.low-ink-y-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (background-blend-mode: screen, overlay) {
background-image: $url, $url, $url;
background-size: 100% 100%, 100% 1000%;
background-blend-mode: screen, overlay;
}
}</code></pre>
</div>
<div class="effect-code" id="collage">
<pre class="css" id="collage_css"><code class="language-css">.collage-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: overlay) {
.collage-effect {
background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg);
background-size: 200%, 80%, 60%, 50%, 40%, 100%;
background-position: 50%, 80%, 30%, 0;
background-blend-mode: overlay;
background-repeat: no-repeat;
}
}
</code></pre>
<pre class="scss" id="collage_scss"><code class="language-scss">.collage-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (background-blend-mode: overlay) {
background-image: $url, $url, $url, $url, $url, $url;
background-size: 200%, 80%, 60%, 50%, 40%, 100%;
background-position: 50%, 80%, 30%, 0;
background-blend-mode: overlay;
background-repeat: no-repeat;
}
}</code></pre>
</div>
<div class="effect-code" id="mosaic">
<pre class="css" id="mosaic_css"><code class="language-css">.mosaic-effect {
background-image: url(photo.jpg), url(photo.jpg);
background-size: cover, 5% 5%;
background-position: center;
background-blend-mode: overlay;
}
</code></pre>
<pre class="scss" id="mosaic_scss"><code class="language-scss">.mosaic-effect {
$url : url(photo.jpg);
background-image: $url, $url;
background-size: cover, 5% 5%;
background-position: center;
background-blend-mode: overlay;
}</code></pre>
</div>
<div class="effect-code" id="photo-border">
<pre class="css" id="photo-border_css"><code class="language-css">.photo-border-effect {
background-image: url(photo.jpg), url(photo.jpg);
background-position: center;
background-size: 60%, 20%;
background-repeat: no-repeat, repeat;
}
</code></pre>
<pre class="scss" id="photo-border_scss"><code class="language-scss">.photo-border-effect {
$url : url(photo.jpg);
background-image: $url, $url;
background-position: center;
background-size: 60%, 20%;
background-repeat: no-repeat, repeat;
}</code></pre>
</div>
<div class="effect-code" id="infrared">
<pre class="css" id="infrared_css"><code class="language-css">.infrared-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
filter: hue-rotate(180deg) saturate(2);
}
</code></pre>
<pre class="scss" id="infrared_scss"><code class="language-scss">.infrared-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
filter: hue-rotate(180deg) saturate(2);
}</code></pre>
</div>
<div class="effect-code" id="night-vision">
<pre class="css" id="night-vision_css"><code class="language-css">.night-vision-effect {
background-image: url(photo.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}
</code></pre>
<pre class="scss" id="night-vision_scss"><code class="language-scss">.night-vision-effect {
$url : url(photo.jpg);
$line-width: 5px;
background-image:
$url,
radial-gradient(
#0F0,
#000
),
repeating-linear-gradient(
transparent 0,
rgba(0,0,0,0.1) $line-width/2,
transparent $line-width
);
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}</code></pre>
</div>
<div class="effect-code" id="warhol">
<pre class="css" id="warhol_css"><code class="language-css">.warhol-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: color) {
.warhol-effect {
background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(photo.jpg);
background-size: 50% 100%, 50% 100%, 50% 50%;
background-position: top left, top right;
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: color;
}
}
</code></pre>
<pre class="scss" id="warhol_scss"><code class="language-scss">.warhol-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (background-blend-mode: color) {
background-image:
linear-gradient(
#14EBFF 0,
#14EBFF 50%,
#FFFF70 50%,
#FFFF70 100%
),
linear-gradient(
#FF85DA 0,
#FF85DA 50%,
#AAA 50%,
#AAA 100%
),
$url;
background-size: 50% 100%, 50% 100%, 50% 50%;
background-position: top left, top right;
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: color;
}
}</code></pre>
</div>
<div class="effect-code" id="selective-color">
<pre class="css" id="selective-color_css"><code class="language-css">.selective-color-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: brightness(3)) and (mix-blend-mode: color) {
.selective-color-effect {
position: relative;
}
.selective-color-effect:before, .selective-color-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-color: red;
background-blend-mode: screen;
mix-blend-mode: color;
filter: brightness(3);
}
}
</code></pre>
<pre class="scss" id="selective-color_scss"><code class="language-scss">.selective-color-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (filter: brightness(3)) and (mix-blend-mode: color) {
position: relative;
&:before, &:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-color: red;
background-blend-mode: screen;
mix-blend-mode: color;
filter: brightness(3);
}
}
}</code></pre>
</div>
<div class="effect-code" id="mirror-x">
<pre class="css" id="mirror-x_css"><code class="language-css">.mirror-x-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (transform: scaleX(-1)) {
.mirror-x-effect {
position: relative;
}
.mirror-x-effect:before, .mirror-x-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
background: inherit;
}
.mirror-x-effect:before {
left: 0;
right: 50%;
transform: scaleX(-1);
}
.mirror-x-effect:after {
left: 50%;
right: 0;
}
}
</code></pre>
<pre class="scss" id="mirror-x_scss"><code class="language-scss">.mirror-x-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (transform: scaleX(-1)) {
position: relative;
&:before, &:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
background: inherit;
}
&:before {
left: 0;
right: 50%;
transform: scaleX(-1);
}
&:after {
left: 50%;
right: 0;
}
}
}</code></pre>
</div>
<div class="effect-code" id="mirror-y">
<pre class="css" id="mirror-y_css"><code class="language-css">.mirror-y-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (transform: scaleY(-1)) {
.mirror-y-effect {
position: relative;
}
.mirror-y-effect:before, .mirror-y-effect:after {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
background: inherit;
}
.mirror-y-effect:before {
top: 0;
bottom: 50%;
transform: scaleY(-1);
}
.mirror-y-effect:after {
top: 50%;
bottom: 0;
}
}
</code></pre>
<pre class="scss" id="mirror-y_scss"><code class="language-scss">.mirror-y-effect {
$url : url(photo.jpg);
background-image: $url;
background-size: cover;
background-position: center;
@supports (transform: scaleY(-1)) {
position: relative;
&:before, &:after {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
background: inherit;
}
&:before {
top: 0;
bottom: 50%;
transform: scaleY(-1);
}
&:after {
top: 50%;
bottom: 0;
}
}
}</code></pre>
</div>
</div>
</figcaption>
</figure>
</main>
<div class="tutorials">
<a href="https://s.juejin.cn/ds/idkRes2Y/" target="_blank">
<svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200"><path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path></svg>
</a>
</div>
html {
box-sizing: border-box;
}
*,*::after,*::before {
box-sizing: inherit;
}
body, button, input, textarea, select {
text-rendering: optimizelegibility;
font-size: 100%;
}
body {
margin: 0;
font-family: cursive;
background: #1c1e22;
min-height: 100vh;
}
.main {
display: flex;
flex-direction: column;
min-height: calc(100vh - 4.2em);
}
@media (min-width: 40em) {
.main {
min-height: 0;
height: calc(100vh - 4.2em);
}
}
.header {
display: flex;
background: linear-gradient(to bottom,#2a3139,#292d34);
padding: 0 1em;
overflow: hidden;
height: 4.2em;
}
.title {
flex: 1 auto;
font-size: 1em;
padding: .5em 0;
color: #c4ccdf;
user-select: none;
}
@media (min-width: 40em) {
.title {
font-size: 1.1em;
}
}
.tag-line {
font-size: .8em;
font-weight: normal;
color: #aab2c5;
display: block;
white-space: nowrap;
}
@media (min-width: 40em) {
.tag-line {
display: inline;
}
}
.tag-line a {
text-decoration: none;
color: inherit;
}
.effects {
display: flex;
flex-flow: row nowrap;
overflow: auto;
padding: 1em 0;
background: #0f1010;
flex: 0 0 9em;
}
.effects__item {
display: flex;
flex-direction: column;
flex: 1 0 6.3em;
margin: 0 .5em;
border: 1px solid #35373a;
border-radius: 2px;
cursor: pointer;
overflow: hidden;
padding-bottom: 0;
transition: .3s border;
}
.effects__item.selected ,
.effects__item:hover {
border-color: #c4ccdf;
}
.effects__img {
display: block;
max-width: 100%;
height: 4.6em;
object-fit: cover;
}
.effects__name {
flex-grow: 1;
color: #7e8792;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: .8em;
padding: .3em;
text-transform: capitalize;
transition: .3s color;
user-select: none;
}
.effects__item.selected .effects__name,
.effects__item:hover .effects__name {
color: #c4ccdf;
}
.icon-menu {
width: 100px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.input {
position: absolute;
min-width: 0;
width: 0;
height: 0;
opacity: 0;
border: 0;
clip:rect(0 0 0 0);
overflow: hidden;
}
.label {
padding: .5em;
font-size: 1.1em;
cursor: pointer;
margin-right: .3em;
color: #c4ccdf;
background: none;
border: none;
outline: none;
text-decoration: none;
}
@media (min-width: 40em) {
.label {
font-size: 1.4em;
}
}
.reset-btn,
.download-btn {
display: none;
}
.preview {
display: flex;
margin: 0;
flex-direction: column;
flex: 1;
}
@media (min-width: 40em) {
.preview {
flex-direction: row;
}
}
.code__menu {
flex: 0 0 3.23em;
display: flex;
margin: 0;
padding: .3em;
font-size: smaller;
text-align: left;
white-space: nowrap;
}
.code__btn {
border: none;
outline: 0;
display: inline-block;
flex: 1 0 auto;
text-align: center;
padding: 10px 8px;
background: #403b3a;
margin: 0 0 0 5px;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
cursor: pointer;
white-space: normal;
color: #fff;
text-decoration: none;
transition: background .4s;
user-select: none;
}
.code__btn:hover,
.code__btn.is-selected {
background: #706c6b;
transition-duration: .2s;
}
.code {
position: relative;
flex: 1 0 50%;
display: flex;
flex-direction: column;
overflow: hidden;
background: hsl(0, 0%, 8%);
}
.effect-code-wrapper {
flex: 1 1 calc(100% - 3.23em);
overflow: auto;
position: relative;
z-index: 2;
}
.effect-code {
padding: 0 1em;
display: none;
}
.scss {
display: none;
}
.photo {
flex: 0 0 50%;
margin: 0;
background-image: url('http://tools.css-tricks.ir/image-effects/img/bg.jpg');
background-size: cover;
overflow: hidden;
}
.placeholder {
max-width: 100%;
opacity: 0;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: hsla(222, 30%, 82%, 0.28);
}
/* None effect ================================================================== */
.none-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
#none {
display: block;
}
#none::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 2em;
right: 2em;
text-align: center;
font-size: 1em;
color: #fff;
padding: 2em 4em;
background-color: #292f37;
content: 'Choose an effect from above :)';
}
/* Pencil effect ================================================================== */
.pencil-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (background-blend-mode: difference) {
.pencil-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
-webkit-filter: brightness(2) invert(1) grayscale(1);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
}
/* Watercolor effect ============================================================== */
.watercolor-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: blur(2px)) or (filter: blur(2px))) and (mix-blend-mode: multiply) {
.watercolor-effect {
position: relative;
overflow: hidden;
}
.watercolor-effect:before, .watercolor-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
.watercolor-effect:before {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
-webkit-filter: brightness(2) invert(1) grayscale(1);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
.watercolor-effect:after {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-position: center;
mix-blend-mode: multiply;
-webkit-filter: brightness(1.3) blur(2px) contrast(2);
filter: brightness(1.3) blur(2px) contrast(2);
}
}
/* Emboss effect ================================================================== */
.emboss-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (background-blend-mode: difference, screen) {
.emboss-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-blend-mode: difference, screen;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
-webkit-filter: brightness(2) invert(1) grayscale(1);
filter: brightness(2) invert(1) grayscale(1);
}
}
/* Colored Pencil effect ========================================================== */
.colored-pencil-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (mix-blend-mode: color) {
.colored-pencil-effect {
position: relative;
}
.colored-pencil-effect:before, .colored-pencil-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
box-shadow: inset 0 0 0 1px black;
}
.colored-pencil-effect:before {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
-webkit-filter: brightness(2) invert(1) grayscale(1);
filter: brightness(2) invert(1) grayscale(1);
}
.colored-pencil-effect:after {
background: inherit;
mix-blend-mode: color;
}
}
/* Chalkboard effect ============================================================== */
.chalkboard-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: grayscale(1)) or (filter: grayscale(1))) and (background-blend-mode: difference) {
.chalkboard-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
-webkit-filter: brightness(1.5) grayscale(1);
filter: brightness(1.5) grayscale(1);
}
}
/* Colored chalkboard effect ====================================================== */
.colored-chalkboard-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: brightness(2)) or (filter: brightness(2))) and (background-blend-mode: color, difference) {
.colored-chalkboard-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
background-blend-mode: color, difference;
-webkit-filter: brightness(2);
filter: brightness(2);
}
}
/* Airbrush effect ================================================================ */
.airbrush-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: blur(5px) contrast(5)) or (filter: blur(5px) contrast(5))) and (mix-blend-mode: multiply) {
.airbrush-effect {
position: relative;
overflow: hidden;
}
.airbrush-effect:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
-webkit-filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
mix-blend-mode: multiply;
}
}
/* Hallucination effect =========================================================== */
.hallucination-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (mix-blend-mode: multiply) {
.hallucination-effect {
position: relative;
overflow: hidden;
background-color: magenta;
background-blend-mode: screen;
}
.hallucination-effect:before, .hallucination-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
mix-blend-mode: multiply;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.hallucination-effect:before {
background-color: yellow;
background-blend-mode: screen;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.hallucination-effect:after {
background-color: cyan;
background-blend-mode: screen;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
}
/* Flannel effect ================================================================= */
.flannel-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: overlay) {
.flannel-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-position: center;
background-size: 100%, 100000% 100%, 100% 100000%;
background-blend-mode: overlay;
}
}
/* Low ink (horizontal) effect ==================================================== */
.low-ink-x-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: screen, overlay) {
.low-ink-x-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: 100% 100%, 10000% 100%;
background-blend-mode: screen, overlay;
}
}
/* Low ink (vertical) effect ====================================================== */
.low-ink-y-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: screen, overlay) {
.low-ink-y-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: 100% 100%, 100% 1000%;
background-blend-mode: screen, overlay;
}
}
/* Collage effect ================================================================= */
.collage-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: overlay) {
.collage-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: 200%, 80%, 60%, 50%, 40%, 100%;
background-position: 50%, 80%, 30%, 0;
background-blend-mode: overlay;
background-repeat: no-repeat;
}
}
/* Mosaic effect ================================================================== */
.mosaic-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover, 5% 5%;
background-position: center;
background-blend-mode: overlay;
}
/* Photo border effect ============================================================ */
.photo-border-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-position: center;
background-size: 60%, 20%;
background-repeat: no-repeat, repeat;
}
/* Infrared effect ================================================================ */
.infrared-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
-webkit-filter: hue-rotate(180deg) saturate(2);
filter: hue-rotate(180deg) saturate(2);
}
/* Night vision effect ============================================================ */
.night-vision-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}
/* Warhol effect ================================================================== */
.warhol-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (background-blend-mode: color) {
.warhol-effect {
background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: 50% 100%, 50% 100%, 50% 50%;
background-position: top left, top right;
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: color;
}
}
/* Selective color effect ========================================================= */
.selective-color-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: brightness(3)) or (filter: brightness(3))) and (mix-blend-mode: color) {
.selective-color-effect {
position: relative;
}
.selective-color-effect:before, .selective-color-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-color: red;
background-blend-mode: screen;
mix-blend-mode: color;
-webkit-filter: brightness(3);
filter: brightness(3);
}
}
/* Horizontal mirror effect ======================================================= */
.mirror-x-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (transform: scaleX(-1)) {
.mirror-x-effect {
position: relative;
}
.mirror-x-effect:before, .mirror-x-effect:after {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
background: inherit;
}
.mirror-x-effect:before {
left: 0;
right: 50%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.mirror-x-effect:after {
left: 50%;
right: 0;
}
}
/* Vertical mirror effect ========================================================= */
.mirror-y-effect {
background-image: url(http://tools.css-tricks.ir/image-effects/img/bg.jpg);
background-size: cover;
background-position: center;
}
@supports (transform: scaleY(-1)) {
.mirror-y-effect {
position: relative;
}
.mirror-y-effect:before, .mirror-y-effect:after {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
background: inherit;
}
.mirror-y-effect:before {
top: 0;
bottom: 50%;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
.mirror-y-effect:after {
top: 50%;
bottom: 0;
}
}
/**
* Code style
*/
pre[class*="language-"] {
padding: 0;
box-shadow: none;
border: 0;
overflow: visible;
font-size: .9em;
}
pre::selection,
code::selection,
code span::selection {
background: #E91E63 !important;
color: #FFF !important;
}
.token.punctuation {
opacity: 1;
}
.tutorials {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 9999;
width: 64px;
aspect-ratio: 1;
border-radius: 50%;
background: #3f517e;
padding: .5rem;
display: grid;
place-content: center;
transition: all .28s linear;
&:hover {
background:#4161b2;
}
& svg {
display: block;
width: 100%;
height: 100%;
filter: invert(1);
}
}
(function($) {
var $image = $('#imageInput'),
$reset = $('.js-reset'),
$download = $('.js-download'),
$photo = $('.photo'),
$placeholder = $('.placeholder'),
$effectCode = $('.effect-code'),
$effect = $('.effects__item'),
$effectImg = $('.effects__img'),
$codeBtn = $('.code__btn'),
$copy = $('.js-copy'),
$css = $('.js-css'),
$scss = $('.js-scss'),
$copyText = $('.js-copy-text'),
currentEffect = null,
imageData = 'http://tools.css-tricks.ir/image-effects/img/bg.jpg';
imageWidth = null;
imageHeight = null;
var sheet = (function() {
var style = document.createElement("style");
// WebKit hack :(
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
var cleanRules = function() {
var i = sheet.cssRules.length - 1 ;
while(i >= 0){
if("deleteRule" in sheet) { sheet.deleteRule(i); }
else if("removeRule" in sheet) { sheet.removeRule(i); }
i--;
}
}
var setImageSrc = function(imageData) {
$placeholder.attr('src', imageData);
imageWidth = $placeholder.get(0).naturalWidth;
imageHeight = $placeholder.get(0).naturalHeight;
}
$image.change(function(){
var im = document.querySelector("input[type=file]").files[0];
var file = new FileReader;
if (im) {
file.readAsDataURL(im);
} else {
alert("pick a photo");
}
file.onloadend = function() {
imageData = file.result;
cleanRules();
insertRules(imageData);
$reset.show();
$download.show();
setImageSrc(imageData);
}
var insertRules = function(image) {
sheet.insertRule('.photo.none-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.none-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.pencil-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.pencil-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.watercolor-effect { background-image: url(' + image + ')}', 0);
sheet.insertRule('.effects__img.watercolor-effect { background-image: url(' + image + ')}', 0);
sheet.insertRule('.photo.watercolor-effect::before { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.watercolor-effect::before { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.watercolor-effect::after { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.watercolor-effect::after { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.emboss-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.emboss-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.colored-pencil-effect { background-image: url(' + image + ')}', 0);
sheet.insertRule('.effects__img.colored-pencil-effect { background-image: url(' + image + ')}', 0);
sheet.insertRule('.photo.colored-pencil-effect::before { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.colored-pencil-effect::before { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.chalkboard-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.chalkboard-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.colored-chalkboard-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.colored-chalkboard-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.airbrush-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.airbrush-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.hallucination-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.hallucination-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.flannel-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.flannel-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.low-ink-x-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.low-ink-x-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.low-ink-y-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.low-ink-y-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.collage-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.collage-effect { background-image: url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.mosaic-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.mosaic-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.photo-border-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.photo-border-effect { background-image: url(' + image + '), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.infrared-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.infrared-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.night-vision-effect { background-image: url(' + image + '), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px) !important}', 0);
sheet.insertRule('.effects__img.night-vision-effect { background-image: url(' + image + '), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px) !important}', 0);
sheet.insertRule('.photo.warhol-effect { background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.warhol-effect { background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(' + image + ') !important}', 0);
sheet.insertRule('.photo.selective-color-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.selective-color-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.mirror-x-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.mirror-x-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.photo.mirror-y-effect { background-image: url(' + image + ') !important}', 0);
sheet.insertRule('.effects__img.mirror-y-effect { background-image: url(' + image + ') !important}', 0);
}
});
$reset.on('click', function(){
cleanRules();
$(this).hide();
$download.hide();
setImageSrc('http://tools.css-tricks.ir/image-effects/img/bg.jpg');
});
$effect.on('click', function(){
$effect.removeClass('selected');
$(this).addClass('selected');
ef = this.getAttribute("data-name");
currentEffect = ef.replace("-effect", "");
$effectCode.hide();
$('#'+currentEffect).show();
$('#'+currentEffect+' .css').addClass('is-selected');
$copy.attr( "data-clipboard-target", "#"+currentEffect+"_css" );
$scss.removeClass('is-selected');
$css.addClass('is-selected');
$photo.removeClass();
$photo.addClass('photo ' + ef);
});
$css.on('click', function(e){
e.preventDefault();
$codeBtn.removeClass('is-selected');
$css.addClass('is-selected');
$('#'+currentEffect+' .scss').hide();
$('#'+currentEffect+' .scss').removeClass('is-selected');
$('#'+currentEffect+' .css').show();
$('#'+currentEffect+' .css').addClass('is-selected');
$copy.attr( "data-clipboard-target", "#"+currentEffect+"_css" );
});
$scss.on('click', function(e){
e.preventDefault();
$codeBtn.removeClass('is-selected');
$scss.addClass('is-selected');
$('#'+currentEffect+' .css').hide();
$('#'+currentEffect+' .css').removeClass('is-selected');
$('#'+currentEffect+' .scss').show();
$('#'+currentEffect+' .scss').addClass('is-selected');
$copy.attr( "data-clipboard-target", "#"+currentEffect+"_scss" );
});
/**
* Copy to clipboard
*/
var clipboard = new Clipboard('.js-copy');
clipboard.on('success', function(e) {
$copyText.text('Copied!');
setTimeout(function() {
$copyText.text('Copy');
e.clearSelection();
}, 2000)
});
var getEffectStyle = function () {
switch (currentEffect) {
case 'pencil': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;position:relative;background-size: cover;background-position: center;background-image: url('+imageData+'), url('+imageData+');background-blend-mode: difference;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);filter: brightness(2) invert(1) grayscale(1);box-shadow: inset 0 0 0 1px black;}';
break;
case 'watercolor': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;position: relative;overflow: hidden;background-image:url('+imageData+');background-size:cover;background-position:center}.final:after,.final:before{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover}.final:before{background-image:url('+imageData+'),url('+imageData+');background-blend-mode:difference;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);filter:brightness(2) invert(1) grayscale(1);box-shadow:inset 0 0 0 1px #000}.final:after{background-image:url('+imageData+');background-position:center;mix-blend-mode:multiply;filter:brightness(1.3) blur(2px) contrast(2);}';
break;
case 'emboss': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-size: cover;background-position: center;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-blend-mode: difference, screen;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;filter: brightness(2) invert(1) grayscale(1);}';
break;
case 'colored-pencil': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final:after {display: block;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-size: cover;box-shadow: inset 0 0 0 1px black;}.final:before {background-image: url('+imageData+'), url('+imageData+');background-blend-mode: difference;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);filter: brightness(2) invert(1) grayscale(1);}.final:after {background: inherit;mix-blend-mode: color;}';
break;
case 'chalkboard': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-size: cover;background-image: url('+imageData+'), url('+imageData+');background-blend-mode: difference;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);filter: brightness(1.5) grayscale(1);}';
break;
case 'colored-chalkboard': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: cover;background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;background-blend-mode: color, difference;filter: brightness(2);}';
break;
case 'airbrush': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;overflow: hidden;}.final:after {display: block;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: inherit;filter: brightness(1.5) saturate(100) blur(5px) contrast(5);mix-blend-mode: multiply;}';
break;
case 'hallucination': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;overflow: hidden;background-color: magenta;background-blend-mode: screen;}.final:before, .final:after {display: block;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: inherit;mix-blend-mode: multiply;transform: scale(1.05);}.final:before {background-color: yellow;background-blend-mode: screen;transform-origin: top left;}.final:after {background-color: cyan;background-blend-mode: screen;transform-origin: bottom right;}';
break;
case 'flannel': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-position: center;background-size: 100%, 100000% 100%, 100% 100000%;background-blend-mode: overlay;}';
break;
case 'low-ink-x': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-position: center;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: 100% 100%, 10000% 100%;background-blend-mode: screen, overlay;}';
break;
case 'low-ink-y': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-position: center;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: 100% 100%, 100% 1000%;background-blend-mode: screen, overlay;}';
break;
case 'collage': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+'), url('+imageData+'), url('+imageData+'), url('+imageData+'), url('+imageData+');background-size: 200%, 80%, 60%, 50%, 40%, 100%;background-position: 50%, 80%, 30%, 0;background-blend-mode: overlay;background-repeat: no-repeat;}';
break;
case 'mosaic': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+');background-size: cover, 5% 5%;background-position: center;background-blend-mode: overlay;}';
break;
case 'photo-border': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), url('+imageData+');background-position: center;background-size: 60%, 20%;background-repeat: no-repeat, repeat;}';
break;
case 'infrared': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;filter: hue-rotate(180deg) saturate(2);}';
break;
case 'night-vision': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+'), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);background-size: cover;background-position: center;background-blend-mode: overlay;}';
break;
case 'warhol': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url('+imageData+');background-size: 50% 100%, 50% 100%, 50% 50%;background-position: top left, top right;background-repeat: no-repeat, no-repeat, repeat;background-blend-mode: color;}';
break;
case 'selective-color': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final:after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; background-color: red; background-blend-mode: screen; mix-blend-mode: color;filter: brightness(3);}';
break;
case 'mirror-x': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final:after { display: block; content: ""; position: absolute; top: 0; bottom: 0; background: inherit;}.final:before { left: 0; right: 50%; transform: scaleX(-1);}.final:after { left: 50%; right: 0;}';
break;
case 'mirror-y': return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');background-size: cover;background-position: center;position: relative;}.final:before, .final:after {display: block;content: "";position: absolute;left: 0;right: 0;background: inherit;}.final:before {top: 0;bottom: 50%;transform: scaleY(-1);}.final:after {top: 50%;bottom: 0;}';
break;
default: return '.final{ height:'+imageHeight+'px; width:'+imageWidth+'px;background-image: url('+imageData+');}';
}
}
$download.on('click', function() {
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = imageWidth;
canvas.height = imageHeight;
// document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="'+imageWidth+'" height="'+imageHeight+'">' +
'<foreignObject width="'+imageWidth+'" height="'+imageHeight+'px">' +
'<div style="width: '+imageWidth+'px; height:'+imageHeight+'px" xmlns="http://www.w3.org/1999/xhtml">' +
'<style>'+getEffectStyle()+'</style>' +
'<div class="final"></div>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
DOMURL.revokeObjectURL(url);
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
var link = document.createElement('a');
link.download = 'ciao-'+currentEffect+'.png';
link.href = dataURL;
link.click();
};
toDataUrl(url, function(base64Img) {
img.src = base64Img;
});
});
})(jQuery);