Skip to content

Commit 9661b69

Browse files
unaUNA A. KRAVETS
una
authored and
UNA A. KRAVETS
committed
Merge pull request #95 from una/cdn-link
added CDN link to docs
2 parents 90c778f + 826f629 commit 9661b69

6 files changed

Lines changed: 16 additions & 351 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,8 @@ For more information, check on [Can I Use](http://caniuse.com/).
2828

2929
When using CSS classes, you can simply add the class with the filter name to the element containing your image.
3030

31-
1. [Download the CSSgram Library](https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css)
32-
* Link to the CSSgram library within your project:
33-
`<link rel="stylesheet" href="css/vendor/cssgram.min.css">`
31+
1. Include the CDN link in your `<head>` tag: `<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">`
32+
* Alternatively, you can [download the CSSgram Library](https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css) locally and link to the it within your project: `<link rel="stylesheet" href="css/vendor/cssgram.min.css">`
3433
* Add a class to your image element with the name of the filter you would like to use
3534

3635
For example:

‎site/css/demo-site.css‎

Lines changed: 0 additions & 344 deletions
Original file line numberDiff line numberDiff line change
@@ -1,351 +1,7 @@
11
@charset "UTF-8";
2-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
3-
position: relative; }
4-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
5-
content: '';
6-
display: block;
7-
height: 100%;
8-
width: 100%;
9-
top: 0;
10-
left: 0;
11-
position: absolute;
12-
pointer-events: none; }
13-
14-
/*
15-
*
16-
* Aden
17-
*
18-
*/
19-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
20-
position: relative; }
21-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
22-
content: '';
23-
display: block;
24-
height: 100%;
25-
width: 100%;
26-
top: 0;
27-
left: 0;
28-
position: absolute;
29-
pointer-events: none; }
30-
31-
.aden {
32-
-webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2);
33-
filter: hue-rotate(-20deg) contrast(.9) saturate(0.85) brightness(1.2); }
34-
.aden:after {
35-
background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
36-
background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
37-
mix-blend-mode: darken; }
38-
39-
/*
40-
*
41-
* Inkwell
42-
*
43-
*/
44-
.inkwell {
45-
-webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
46-
filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); }
47-
48-
/*
49-
*
50-
* Perpetua
51-
*
52-
*/
53-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
54-
position: relative; }
55-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
56-
content: '';
57-
display: block;
58-
height: 100%;
59-
width: 100%;
60-
top: 0;
61-
left: 0;
62-
position: absolute;
63-
pointer-events: none; }
64-
65-
.perpetua:after {
66-
background: -webkit-linear-gradient(top, #005b9a, #e6c13d);
67-
background: linear-gradient(to bottom, #005b9a, #e6c13d);
68-
mix-blend-mode: soft-light;
69-
opacity: .5; }
70-
71-
/*
72-
*
73-
* Reyes
74-
*
75-
*/
76-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
77-
position: relative; }
78-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
79-
content: '';
80-
display: block;
81-
height: 100%;
82-
width: 100%;
83-
top: 0;
84-
left: 0;
85-
position: absolute;
86-
pointer-events: none; }
87-
88-
.reyes {
89-
-webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75);
90-
filter: sepia(.22) brightness(1.1) contrast(.85) saturate(0.75); }
91-
.reyes:after {
92-
background: #efcdad;
93-
mix-blend-mode: soft-light;
94-
opacity: .5; }
95-
96-
/*
97-
*
98-
* Gingham
99-
*
100-
*/
101-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
102-
position: relative; }
103-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
104-
content: '';
105-
display: block;
106-
height: 100%;
107-
width: 100%;
108-
top: 0;
109-
left: 0;
110-
position: absolute;
111-
pointer-events: none; }
112-
113-
.gingham {
114-
-webkit-filter: brightness(1.05) hue-rotate(-10deg);
115-
filter: brightness(1.05) hue-rotate(-10deg); }
116-
.gingham:after {
117-
background: -webkit-linear-gradient(left, rgba(66, 10, 14, 0.2), transparent);
118-
background: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
119-
mix-blend-mode: darken; }
120-
121-
/*
122-
*
123-
* Toaster
124-
*
125-
*/
126-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
127-
position: relative; }
128-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
129-
content: '';
130-
display: block;
131-
height: 100%;
132-
width: 100%;
133-
top: 0;
134-
left: 0;
135-
position: absolute;
136-
pointer-events: none; }
137-
138-
.toaster {
139-
-webkit-filter: contrast(1.5) brightness(.9);
140-
filter: contrast(1.5) brightness(.9); }
141-
.toaster:after {
142-
background: -webkit-radial-gradient(circle, #804e0f, #3b003b);
143-
background: radial-gradient(circle, #804e0f, #3b003b);
144-
mix-blend-mode: screen; }
145-
146-
/*
147-
*
148-
* Walden
149-
*
150-
*/
151-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
152-
position: relative; }
153-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
154-
content: '';
155-
display: block;
156-
height: 100%;
157-
width: 100%;
158-
top: 0;
159-
left: 0;
160-
position: absolute;
161-
pointer-events: none; }
162-
163-
.walden {
164-
-webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);
165-
filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); }
166-
.walden:after {
167-
background: #04c;
168-
mix-blend-mode: screen;
169-
opacity: .3; }
170-
171-
/*
172-
*
173-
* Hudson
174-
*
175-
*/
176-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
177-
position: relative; }
178-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
179-
content: '';
180-
display: block;
181-
height: 100%;
182-
width: 100%;
183-
top: 0;
184-
left: 0;
185-
position: absolute;
186-
pointer-events: none; }
187-
188-
.hudson {
189-
-webkit-filter: brightness(1.2) contrast(.9) saturate(1.1);
190-
filter: brightness(1.2) contrast(.9) saturate(1.1); }
191-
.hudson:after {
192-
background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134);
193-
background: radial-gradient(circle, #a6b1ff 50%, #342134);
194-
mix-blend-mode: multiply;
195-
opacity: .5; }
196-
197-
/*
198-
*
199-
* Earlybird
200-
*
201-
*/
202-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
203-
position: relative; }
204-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
205-
content: '';
206-
display: block;
207-
height: 100%;
208-
width: 100%;
209-
top: 0;
210-
left: 0;
211-
position: absolute;
212-
pointer-events: none; }
213-
214-
.earlybird {
215-
-webkit-filter: contrast(.9) sepia(.2);
216-
filter: contrast(.9) sepia(.2); }
217-
.earlybird:after {
218-
background: -webkit-radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
219-
background: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
220-
mix-blend-mode: overlay; }
221-
222-
/*
223-
*
224-
* Mayfair
225-
*
226-
*/
227-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
228-
position: relative; }
229-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
230-
content: '';
231-
display: block;
232-
height: 100%;
233-
width: 100%;
234-
top: 0;
235-
left: 0;
236-
position: absolute;
237-
pointer-events: none; }
238-
239-
.mayfair {
240-
-webkit-filter: contrast(1.1) saturate(1.1);
241-
filter: contrast(1.1) saturate(1.1); }
242-
.mayfair:after {
243-
background: -webkit-radial-gradient(40% 40%, circle, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111 60%);
244-
background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.8), rgba(255, 200, 200, 0.6), #111 60%);
245-
mix-blend-mode: overlay;
246-
opacity: .4; }
247-
248-
/*
249-
* Lo-fi
250-
*
251-
*/
252-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
253-
position: relative; }
254-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
255-
content: '';
256-
display: block;
257-
height: 100%;
258-
width: 100%;
259-
top: 0;
260-
left: 0;
261-
position: absolute;
262-
pointer-events: none; }
263-
264-
.lofi {
265-
-webkit-filter: saturate(1.1) contrast(1.5);
266-
filter: saturate(1.1) contrast(1.5); }
267-
.lofi:after {
268-
background: -webkit-radial-gradient(circle, transparent 70%, #222 150%);
269-
background: radial-gradient(circle, transparent 70%, #222 150%);
270-
mix-blend-mode: multiply; }
271-
272-
/*
273-
* 1977
274-
*
275-
*/
276-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
277-
position: relative; }
278-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
279-
content: '';
280-
display: block;
281-
height: 100%;
282-
width: 100%;
283-
top: 0;
284-
left: 0;
285-
position: absolute;
286-
pointer-events: none; }
287-
288-
._1977 {
289-
-webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
290-
filter: contrast(1.1) brightness(1.1) saturate(1.3); }
291-
._1977:after {
292-
background: rgba(243, 106, 188, 0.3);
293-
mix-blend-mode: screen; }
294-
295-
/*
296-
*
297-
* Brooklyn
298-
*
299-
*/
300-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
301-
position: relative; }
302-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
303-
content: '';
304-
display: block;
305-
height: 100%;
306-
width: 100%;
307-
top: 0;
308-
left: 0;
309-
position: absolute;
310-
pointer-events: none; }
311-
312-
.brooklyn {
313-
-webkit-filter: contrast(.9) brightness(1.1);
314-
filter: contrast(.9) brightness(1.1); }
315-
.brooklyn:after {
316-
background: -webkit-radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8);
317-
background: radial-gradient(circle, rgba(168, 223, 193, 0.4) 70%, #c4b7c8);
318-
mix-blend-mode: overlay; }
319-
320-
/*
321-
*
322-
* X-Pro II
323-
*
324-
*/
325-
.aden, .perpetua, .reyes, .gingham, .toaster, .walden, .hudson, .earlybird, .mayfair, .lofi, ._1977, .brooklyn, .xpro2 {
326-
position: relative; }
327-
.aden:after, .perpetua:after, .reyes:after, .gingham:after, .toaster:after, .walden:after, .hudson:after, .earlybird:after, .mayfair:after, .lofi:after, ._1977:after, .brooklyn:after, .xpro2:after {
328-
content: '';
329-
display: block;
330-
height: 100%;
331-
width: 100%;
332-
top: 0;
333-
left: 0;
334-
position: absolute;
335-
pointer-events: none; }
336-
337-
.xpro2 {
338-
-webkit-filter: sepia(.3);
339-
filter: sepia(.3); }
340-
.xpro2:after {
341-
background: -webkit-radial-gradient(circle, #E6E7E0 40%, rgba(43, 42, 161, 0.6) 110%);
342-
background: radial-gradient(circle, #E6E7E0 40%, rgba(43, 42, 161, 0.6) 110%);
343-
mix-blend-mode: color-burn; }
344-
3452
::-moz-selection {
3463
background: #9b1c9b;
3474
color: white; }
348-
3495
::selection {
3506
background: #9b1c9b;
3517
color: white; }

0 commit comments

Comments
 (0)