|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/junsu/plugin/gray-gh-pages/ |
Upload File : |
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gray</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="css/gray.min.css">
</head>
<body>
<div class="container">
<h1>Gray <small>by Karl Horky</small></h1>
<p>Make an image gray in all browsers.</p>
<iframe class="github-iframe" src="https://ghbtns.com/github-btn.html?user=karlhorky&repo=gray&type=star&count=true&size=large" frameborder="0" scrolling="0" width="130" height="30"></iframe>
<a class="tweet" href="https://twitter.com/intent/tweet/?text=Make%20an%20image%20grayscale%20in%20all%20browsers&url=https%3A%2F%2Fwork.karlhorky.com%2Fgray%2F&via=karlhorky" target="_blank" aria-label="Twitter">
<div>
<div aria-hidden="true">
<svg version="1.1" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 22 22" enable-background="new 0 0 22 22" xml:space="preserve">
<g>
<path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/>
</g>
</svg>
</div> Tweet
</div>
</a>
<div class="row">
<div class="col-half">
<h2>Color</h2>
</div>
<div class="col-half">
<h2>Gray</h2>
</div>
</div>
<div class="row">
<h3 id="img">
<a href="#img">
<img> tag
</a>
</h3>
<div class="col-half" data-label="Color">
<img src="img/color.jpg">
</div>
<div class="col-half" data-label="Gray">
<img src="img/color.jpg" class="grayscale">
</div>
</div>
<div class="row">
<div>
<pre><code><img src="img/color.jpg" class="grayscale"></code></pre>
</div>
</div>
<div class="row">
<h3 id="img-transition">
<a href="#img-transition">
<img> tag with transition
</a>
</h3>
<div class="col-half" data-label="Color">
<img src="img/color.jpg">
</div>
<div class="col-half" data-label="Gray">
<img src="img/color.jpg" class="grayscale grayscale-fade">
</div>
</div>
<div class="row">
<div>
<pre><code><img src="img/color.jpg" class="grayscale grayscale-fade"></code></pre>
</div>
</div>
<div class="row">
<h3 id="img-alt">
<a href="#img-alt">
<img> tag with alt
</a>
</h3>
<div class="col-half" data-label="Color">
<img src="img/color.jpg" alt="Decorative lights">
</div>
<div class="col-half" data-label="Gray">
<img src="img/color.jpg" class="grayscale" alt="Decorative lights">
</div>
</div>
<div class="row">
<div>
<pre><code><img src="img/color.jpg" class="grayscale" alt="Decorative lights"></code></pre>
</div>
</div>
<div class="row">
<h3 id="img-styles">
<a href="#img-styles">
<img> tag with styles
</a>
</h3>
<div class="col-half" data-label="Color">
<img src="img/color.jpg" style="
position : absolute;
top : 0;
left : 50%;
margin : 0 0 0 -90px;
padding : 5px;
border : 1px solid #ddd;
">
</div>
<div class="col-half" data-label="Gray">
<img src="img/color.jpg" class="grayscale" style="
position : absolute;
top : 0;
left : 50%;
margin : 0 0 0 -90px;
padding : 5px;
border : 1px solid #ddd;
">
</div>
</div>
<div class="row">
<div>
<pre><code><img src="img/color.jpg" class="grayscale" style="
position : absolute;
top : 0;
left : 50%;
margin : 0 0 0 -90px;
padding : 5px;
border : 1px solid #ddd;
"></code></pre>
</div>
</div>
<div class="row">
<h3 id="css-background">
<a href="#css-background">
CSS background
</a>
</h3>
<div class="col-half" data-label="Color">
<div style="
background-image: url(img/color.jpg);
display : inline-block;
width : 180px;
height : 72px;
"></div>
</div>
<div class="col-half" data-label="Gray">
<div style="
background-image: url(img/color.jpg);
display : inline-block;
width : 180px;
height : 72px;
" class="grayscale"></div>
</div>
</div>
<div class="row">
<div>
<pre><code><div style="
background-image: url(img/color.jpg);
display : inline-block;
width : 180px;
height : 72px;
" class="grayscale"></div></code></pre>
</div>
</div>
<div class="row">
<h3 id="css-sprite-background">
<a href="#css-sprite-background">
CSS sprite background
</a>
</h3>
<div class="col-half" data-label="Color">
<div style="
background-image : url(img/color-sprite.jpg);
background-position: -180px 0;
display : inline-block;
width : 180px;
height : 72px;
"></div>
</div>
<div class="col-half" data-label="Gray">
<div style="
background-image : url(img/color-sprite.jpg);
background-position: -180px 0;
display : inline-block;
width : 180px;
height : 72px;
" class="grayscale"></div>
</div>
</div>
<div class="row">
<div>
<pre><code><div style="
background-image : url(img/color-sprite.jpg);
background-position: -180px 0;
display : inline-block;
width : 180px;
height : 72px;
" class="grayscale"></div></code></pre>
</div>
</div>
<div class="row">
<h3 id="css-sprite-background-with-background-size">
<a href="#css-sprite-background-with-background-size">
CSS sprite background with background-size
</a>
</h3>
<div class="col-half" data-label="Color">
<div style="
background-image : url(img/color-sprite-lg.jpg);
background-size : auto 72px;
background-position: -180px 0;
display : inline-block;
width : 180px;
height : 72px;
"></div>
</div>
<div class="col-half" data-label="Gray">
<div style="
background-image : url(img/color-sprite-lg.jpg);
background-size : auto 72px;
background-position: -180px 0;
display : inline-block;
width : 180px;
height : 72px;
" class="grayscale"></div>
</div>
</div>
<div class="row">
<div>
<pre><code><div style="
background-image : url(img/color-sprite-lg.jpg);
background-size : auto 72px;
background-position: -180px 0;
display : inline-block;
width : 180px;
height : 72px;
" class="grayscale"></div></code></pre>
</div>
</div>
<div class="row">
<h3 id="toggle">
<a href="#toggle">
Toggling Grayscale
</a>
</h3>
<button onclick="$('.grayscale').toggleClass('grayscale-off')">Toggle Grayscale</button>
</div>
<div class="row">
<div>
<pre><code>$('.grayscale').toggleClass('grayscale-off');</code></pre>
</div>
</div>
</div>
<a href="https://github.com/karlhorky/gray"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!--[if lt IE 9]>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<![endif]-->
<!--[if !(IE)|(gte IE 9)]><!-->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<!--<![endif]-->
<script src="js/jquery.gray.min.js"></script>
</body>
</html>