Created
January 18, 2016 10:43
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--[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