Skip to content

Instantly share code, notes, and snippets.

@yratof
Created January 18, 2016 10:43
Show Gist options
  • Save yratof/d29dfa5ce5bb47126997 to your computer and use it in GitHub Desktop.
Save yratof/d29dfa5ce5bb47126997 to your computer and use it in GitHub Desktop.
Change the colours of an iframe when you don't have access to any css
<!--[if IE]>
<style>
.iframe--blend{
background-color: #fffdf3;
}
</style>
<![endif]-->
<style>
#iframe {
opacity: 0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
width: 100%;
height: 600px;
margin: 0 auto;
display: block;
max-width: 1000px;
}
/* Blending the iFrame into the website */
.iframe--blend{
padding: 30px 0 60px;
/* Really blend it in. Might break though...*/
/*filter: url(#redcoat) grayscale(6%) brightness(91%) contrast(99%);*/
-webkit-filter: grayscale(100%) brightness(96%); /* SVG Filter doesnt work with safari */
-moz-filter: url("#redcoat") brightness(96%);
filter: url("#redcoat") brightness(96%);
}
/* Chrome Only fix for colouring webkit */
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
.iframe--blend { -webkit-filter: url("#redcoat") brightness(96%); }
}
</style>
<!-- Svg for colour correction, remove all yellow -->
<svg height="0">
<defs>
<filter id="redcoat" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic" result="BigRed" type="matrix" values="
0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
4 0 -4 0 -0.5">
<!-- R G B A (?) -->
</feColorMatrix>
<feColorMatrix type="saturate" values="0" in="SourceGraphic" result="GreySource"/>
<feComposite operator="in" in="SourceGraphic" in2="BigRed" result="RedOriginal"/>
<feComposite operator="atop" in="RedOriginal" in2="GreySource" result="final"/>
</filter>
</defs>
</svg>
<div class="iframe--blend">
<iframe id="iframe" src="https://drivdigital.no" frameborder="0" onload="this.style.opacity = 1"></iframe>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment