Skip to content

Instantly share code, notes, and snippets.

@ayapi

ayapi/invert.css

Last active December 29, 2015 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ayapi/7644528 to your computer and use it in GitHub Desktop.
Save ayapi/7644528 to your computer and use it in GitHub Desktop.
Download ZIP
任意のHTML要素に階調反転フィルターを適用するCSS
Raw
invert.css
.invert{
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="invert"><feColorMatrix color-interpolation-filters="sRGB" in="SourceGraphic" type="matrix" values="-1,0,0,0,1,0,-1,0,0,1,0,0,-1,0,1,0,0,0,1,0"/></filter></svg>#invert');
filter: invert(1);
-ms-filter: invert(1);
-webkit-filter: invert(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
overflow: hidden;
}
@media screen and (min-width:0\0) {
_::-ms-reveal,
.invert:before{
content: "";
width: 0; height: 0;
position: absolute;
top: 50%; left: 50%;
z-index: 9999;
outline: 2000px solid invert;
}
}
Raw
invert.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>色調反転CSS</title>
<style type="text/css">
body{
background:white;
color:hotpink;
}
div{
background: white;
border: 2px solid cornflowerblue;
white-space: pre;
margin: 5px;
display: inline-block;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div:after{
display:inline-block;
background:cornflowerblue;
content:attr(class)':';
color:white;
}
</style>
<link rel="stylesheet" href="invert.css"/>
</head>
<body>
<div class="default">
ぁぃぅぇぉ
ぁゃぴぁゃぴ
ギャルでもゎかるｃｓｓ
<img src="sample.png">
</div>
<div class="invert">
ぁぃぅぇぉ
ぁゃぴぁゃぴ
ギャルでもゎかるｃｓｓ
<img src="sample.png">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment