299 lines
11 KiB
Twig
299 lines
11 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CSSGram</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="css/demo-site.min.css">
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-36758177-8', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<section class="title-section">
|
|
<img class="title--logo" src="img/cssgram-logo.svg" alt="CSSgram">
|
|
<h2 class="title--top-sub">A tiny (<1kb gzipped!) library for recreating <a href="http://instagram.com">Instagram</a> filters with CSS filters and blend modes.</h2>
|
|
</section>
|
|
|
|
{% set images = ['atx', 'bike', 'cacti', 'lakegeneva', 'tahoe'] %}
|
|
|
|
<section class="demo__section">
|
|
<div class="demo__input-area">
|
|
<fieldset class="demo__option-field">
|
|
<legend>Choose a sample image:</legend>
|
|
{% for i in images %}
|
|
<img class="demo__option-img" src="img/{{i}}.jpg" alt="{{i}} image">
|
|
{% endfor %}
|
|
<br>
|
|
<label class="demo__input-label">
|
|
Or paste in a link to your own photo:
|
|
<input class="demo__input-img" type="text">
|
|
</label>
|
|
</fieldset>
|
|
|
|
<small class="demo__note">Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.</small>
|
|
</div>
|
|
<ul class="demo__list">
|
|
<li class="demo__item">
|
|
<figure>
|
|
<img>
|
|
<figcaption>#nofilter</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="aden">
|
|
<img>
|
|
<figcaption>Aden</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="reyes">
|
|
<img>
|
|
<figcaption>Reyes</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="perpetua">
|
|
<img>
|
|
<figcaption>Perpetua</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="inkwell">
|
|
<img>
|
|
<figcaption>Inkwell</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="earlybird">
|
|
<img>
|
|
<figcaption>Earlybird</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="toaster">
|
|
<img>
|
|
<figcaption>Toaster</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="walden">
|
|
<img>
|
|
<figcaption>Walden</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="hudson">
|
|
<img>
|
|
<figcaption>Hudson</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="gingham">
|
|
<img>
|
|
<figcaption>Gingham</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="mayfair">
|
|
<img>
|
|
<figcaption>Mayfair</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="lofi">
|
|
<img>
|
|
<figcaption>Lo-fi</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="xpro2">
|
|
<img>
|
|
<figcaption>X-Pro II</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="_1977">
|
|
<img>
|
|
<figcaption>1977</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="brooklyn">
|
|
<img>
|
|
<figcaption>Brooklyn</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="demo__item">
|
|
<figure class="nashville">
|
|
<img>
|
|
<figcaption>Nashville</figcaption>
|
|
</figure>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="explanation-section">
|
|
<h2>What is This?</h2>
|
|
|
|
<p><strong class="callout">For more background on CSS Image Effects, you can check out my blog series <a href="http://una.im">here</a>, or watch my <a href="https://www.youtube.com/watch?v=LY65F2e4B5w">video</a> from CSS Conf EU, which gives a baseline on blend modes and filters.</strong></p>
|
|
|
|
<p>Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means <em>less manual image processing</em> and more fun filter effects on the web!</p>
|
|
|
|
<p>We are using pseudo-elements (i.e. <code>:before</code> and <code>:after</code>) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <code><img></code>. The recommendation is to wrap your images in a <code><figure></code> tag. More about the tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">here.</a></p>
|
|
|
|
<h3>Browser Support</h3>
|
|
|
|
<p>This library uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">CSS Filters</a> and <a href="https://css-tricks.com/basics-css-blend-modes/">CSS Blend Modes</a>. This features are supported in the following browsers:</p>
|
|
|
|
<ul class="supported-browsers">
|
|
<li class="supported">Google Chrome: 43+</li>
|
|
<li class="supported">Mozilla Firefox: 38+</li>
|
|
<li class="not-supported">Internet Explorer: Nope</li>
|
|
<li class="supported">Opera: 32+</li>
|
|
<li class="supported">Safari: 8+</li>
|
|
</ul>
|
|
|
|
<p>For more information, check on <a href="http://caniuse.com/">Can I Use</a>.</p>
|
|
<hr>
|
|
</section>
|
|
|
|
<section class="how-to-section">
|
|
<h2>Usage</h2>
|
|
|
|
<p><strong>There are currently 2 ways to consume this library:</strong></p>
|
|
|
|
<h3 id="use-css-classes">Use CSS classes</h3>
|
|
|
|
<p>When using CSS classes, you can simply add the class with the filter name to the element containing your image.</p>
|
|
|
|
<p><strong>The quickest way to do this is to link to our CDN</strong> in your <code><head></code> tag: <code><link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"></code>. Then, add a class to your figure element with the name of the filter you would like to use (shown below)</p>
|
|
|
|
<p>If you want to work locally, do the following:</p>
|
|
|
|
<ol>
|
|
<li><a href="https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css" download>Download the CSSgram Library</a></li>
|
|
<li>Link to the CSSgram library within your project: <br><code><link rel="stylesheet" href="css/vendor/cssgram.min.css"></code></li>
|
|
<li>Add a class to your figure element with the name of the filter you would like to use</li>
|
|
</ol>
|
|
|
|
<p>For example:</p>
|
|
|
|
<pre><code>
|
|
<span class="comment"><!-- HTML --></span>
|
|
<figure <span class="highlight">class="aden"</span>>
|
|
<img src="../img.png">
|
|
</figure>
|
|
</code></pre>
|
|
|
|
<small>Alternatively, you can just download and link to any individual css file: <br> <code><link rel="stylesheet" href="css/vendor/aden.min.css"></code>, if you're just using one of the styles.</li></small>
|
|
|
|
<h3>Available Classes</h3>
|
|
<small><em>For use in HTML markup:</em></small>
|
|
<ul class="available-classes">
|
|
<li>Aden: <code>class="aden"</code></li>
|
|
<li>Reyes: <code>class="reyes"</code></li>
|
|
<li>Perpetua: <code>class="perpetua"</code></li>
|
|
<li>Inkwell: <code>class="inkwell"</code></li>
|
|
<li>Toaster: <code>class="toaster"</code></li>
|
|
<li>Walden: <code>class="walden"</code></li>
|
|
<li>Hudson: <code>class="hudson"</code></li>
|
|
<li>Gingham: <code>class="gingham"</code></li>
|
|
<li>Mayfair: <code>class="mayfair"</code></li>
|
|
<li>Lo-fi: <code>class="lofi"</code></li>
|
|
<li>X-Pro II: <code>class="xpro2"</code></li>
|
|
<li>1977: <code>class="_1977"</code></li>
|
|
<li>Brooklyn: <code>class="brooklyn"</code></li>
|
|
<li>Nashville: <code>class="nashville"</code></li>
|
|
</ul>
|
|
|
|
<hr>
|
|
|
|
<h3>Use Sass <code>@extends</code></h3>
|
|
|
|
<p>If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then <code>@extend</code> the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.</p>
|
|
|
|
<ol>
|
|
<li><a href="https://github.com/una/CSSgram/tree/master/source/scss" download>Download the /scss folder contents</a></li>
|
|
<li>Include a link to <code>scss/cssgram.scss</code> via an import statement in your Sass manifest file (i.e. <code>main.scss</code>). It may look like: <code>@import 'vendor/cssgram';</code></li>
|
|
<li>Extend the silent placeholder selector <code>@extend %aden;</code> in your element.</li>
|
|
</ol>
|
|
|
|
<p>For example:</p>
|
|
|
|
<pre><code>
|
|
<span class="comment"><!-- HTML --></span>
|
|
<figure class=<span class="highlight">"viz--beautiful"</span>>
|
|
<img src="../img.png">
|
|
</figure>
|
|
</code></pre>
|
|
|
|
<pre><code>
|
|
<span class="comment">// Sass</span>
|
|
<span class="highlight">.viz--beautiful</span> {
|
|
@extend %aden;
|
|
}
|
|
</code></pre>
|
|
|
|
<small>Alternatively, you can just download and link any individual .scss file in your Sass manifest: <br> (i.e. <code>scss/aden.scss</code>), if you're just using one of the styles.</li></small>
|
|
|
|
<h3>Available Extends</h3>
|
|
<small><em>For use in Sass elements:</em></small>
|
|
<ul class="available-classes">
|
|
<li>Aden: <code>@extend %aden;</code></li>
|
|
<li>Reyes: <code>@extend %reyes;</code></li>
|
|
<li>Perpetua: <code>@extend %perpetua;</code></li>
|
|
<li>Inkwell: <code>@extend %inkwell;</code></li>
|
|
<li>Toaster: <code>@extend %toaster;</code></li>
|
|
<li>Walden: <code>@extend %walden;</code></li>
|
|
<li>Hudson: <code>@extend %hudson;</code></li>
|
|
<li>Gingham: <code>@extend %gingham;</code></li>
|
|
<li>Mayfair: <code>@extend %mayfair;</code></li>
|
|
<li>Lo-fi: <code>@extend %lofi;</code></li>
|
|
<li>X-Pro II: <code>@extend %xpro2;</code></li>
|
|
<li>1977: <code>@extend %_1977;</code></li>
|
|
<li>Brooklyn: <code>@extend %brooklyn;</code></li>
|
|
<li>Nashville: <code>@extend %nashville;</code></li>
|
|
</ul>
|
|
<hr>
|
|
</section>
|
|
<footer class="attribution">Made with love by <a href="http://twitter.com/una">Una</a> | <a href="http://github.com/una/CSSgram">View Source</a></footer>
|
|
|
|
<script>
|
|
var inputField = document.querySelector(".demo__input-img")
|
|
|
|
function pickSample(img) {
|
|
updateImages(img.src)
|
|
inputField.value = img.getAttribute("src")
|
|
}
|
|
|
|
function updateImages(src) {
|
|
var imgs = document.querySelectorAll(".demo__item img")
|
|
for (var i = 0; i < imgs.length; i++) imgs[i].src = src
|
|
}
|
|
|
|
document.addEventListener("click", function(event) {
|
|
if (/demo__option-img/.test(event.target.className)) pickSample(event.target)
|
|
}, false)
|
|
|
|
inputField.addEventListener("input", function() {
|
|
updateImages(this.value)
|
|
}, false)
|
|
|
|
inputField.addEventListener("focus", function() {
|
|
this.select()
|
|
}, false)
|
|
|
|
pickSample(document.querySelector(".demo__option-img"))
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|