CSSInstaglam

CSSInstaglam is a CSS library that creates a simple API for using and animating CSS filter effects in your projects. It has no dependencies (CSS only), and should work for all non-IE browsers (for now).

CSSInstaglam works by providing classes that correlate to CSS filters, as well as some syntactic sugar for handling hover states, intensity of effect and animation of the effect.

Effects Classes

Effects are added with effects classes (default to medium-intensity in absence of specific intensity classes):

m. monroe

Source Markup/Image (No Effect):


<div class="">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Blur:


<div class="insta-blur">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Brighten:


<div class="insta-brighten">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Darken (inverse of brighten):


<div class="insta-darken">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Contrast:


<div class="insta-contrast">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Decontrast (inverse of contrast):


<div class="insta-decontrast">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Grayscale (shown full strength for example):


<div class="insta-grayscale insta-mega">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Invert (shown full strength for example):


<div class="insta-invert insta-mega">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Opacity:


<div class="insta-opacity">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Saturate:


<div class="insta-saturate">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Desaturate (inverse of saturate):


<div class="insta-desaturate">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Sepia:


<div class="insta-sepia">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

Intensity Classes

Relative filter intensity/strength of applied effect can be controlled with intensity classes:


<div class="insta-blur insta-none">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
</div>
<div class="insta-blur insta-small">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
</div>
<div class="insta-blur insta-medium">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
</div>
<div class="insta-blur insta-large">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
</div>
<div class="insta-blur insta-mega">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
</div>

As you can see above, the code utilizes the intensity classes: insta-none, insta-small, insta-medium, insta-large and insta-mega. For most filters, these classes correlate roughly to the continuum between 0% effect intensity (insta-none) and 100% effect intensity (insta-mega). It is worth noting that the opacity filter is inverted, with none meaning fully opaque and mega meaning fully transparent.

Hover/Unhover Classes

To apply affects on/off hover, you can use the hover/unhover classes. insta-hover can be used to apply the desired affect only on hover; insta-unhover can be used to apply the desired affect until the target is hovered over.

m. monroe

Hover: effect applied only on hover


<div class="insta-invert insta-mega insta-hover">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Unhover: effect un-applied on hover


<div class="insta-invert insta-mega insta-unhover">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

Animation Classes

Animation classes can be added to add animation and determine the speed at which the animation will occur: insta-reallyfast, insta-fast, insta-slow, insta-lazy. These will generally be used in conjunction with the hover/unhover clases, as those are the only source of dynamic state-change currently built into the library-- however, they would still animate effect intensity when that is changed via Javascript.

m. monroe

Blur really fast on hover:


<div class="insta-blur insta-mega insta-hover insta-reallyfast">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Blur fast on hover:


<div class="insta-blur insta-mega insta-hover insta-fast">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Blur slow on hover:


<div class="insta-blur insta-mega insta-hover insta-slow">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

m. monroe

Blur really slow on hover:


<div class="insta-blur insta-mega insta-hover insta-lazy">
	<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	<p><i>m. monroe</i></p>
</div>

Multiple Effects

While the insta- classes can be used directly on a target element, it is best practice of the library to use "wrapper-elements"-- divs or spans whose sole purpose is to wrap target HTML and apply CSSInstaglam filter effects to the target. When using this approach, applying multiple effects to an element is a simple matter of adding additional wrappers. PLEASE NOTE: Using multiple FX classes on a single element will not work. Because additional filter property values replace instead of behaving in an additive manor, generating a CSS file to account for every possible combination of classes would have become prohibitively large.

Blur and grayscale unhover, brighten hover, different rates


<div class="insta-brighten insta-hover insta-lazy">
	<div class="insta-grayscale insta-mega insta-unhover insta-fast">
		<div class="insta-blur insta-mega insta-unhover insta-slow">
			<img src="img/marilyn.jpg" alt="Marilyn Monroe">
		</div>
	</div>
</div>

Invert and opacity hover same rate


<div class="insta-invert insta-mega insta-unhover insta-reallyfast">
	<div class="insta-opacity insta-large insta-unhover insta-reallyfast">
		<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	</div>
</div>

From mega-sepia to medium-sepia on hover


<div class="insta-sepia insta-mega insta-unhover insta-lazy">
	<div class="insta-sepia insta-medium insta-hover insta-lazy">
		<img src="img/marilyn.jpg" alt="Marilyn Monroe">
	</div>
</div>

Development and Download

If you just want to download the code straight away, you can grab the unminified or minified code below:

cssinstaglam.css cssinstaglam.min.css

If you want to get involved in development, or read more about the lack of Internet Explorer support, make suggestions, log defects or just peek under the hood of the library, you can visit the project repo.

Some features slated for research (and hopefully implementation) are:

Internet Explorer support
Implementation of `hue` filter
Implementation of `drop-shadow` filter
Sass version of the library
More nuanced intensity controls
Class-controlled timing functions

Credits

CSSInstaglam was partially undertaken as a chance to become more acquainted with Less, and was partially inspired by the delightful CSS Library CSShake. The example image is provided by 1950sUnlimited on Flickr under the Attribution 2.0 Generic (CC BY 2.0) License. Syntax highlighting in the code was achieved using PrismJS. Fork me on Github. Thanks!