https://www.svensoltmann.de/test-cssgram.html

1<!doctype html>
2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6<head>
7   <meta charset="utf-8">
8   <!--meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"-->
9
10   <title>Instagram-Filter mit CSSGram</title>
11   <meta name="description" content="verschidene Instagram ähnliche Filter mit CSSGram in Webseiten einbinden.">
12   <meta name="keywords" content="CSSGram, Instagram, Filter, Effekte" />
13
14   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
15   <meta name="author" content="Sven Soltmann">
16   <meta name="viewport" content="width=device-width">
17   <!--link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'-->
18   <!--link href='https://fonts.googleapis.com/css?family=Roboto:100,400,700' rel='stylesheet' type='text/css' -->
19   <link rel="stylesheet" href="css/style.css">
20   <meta name="robots" content="index, follow">
21   <meta name="geo.region" content="DE-ST">
22   <meta name="geo.placename" content="Magdeburg">
23   <meta name="geo.position" content="52.0785;11.6500">
24   <meta name="theme-color" content="#263973">
25   <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
26   <link rel="apple-touch-icon" type="image/x-icon" href="img/apple-touch-icon.png">
27   <link rel="image_src" href="img/sven.gif">
28   <link type="text/plain" rel="author" href="humans.txt">
29   

29<script src="js/libs/modernizr-2.5.3.min.js"></script>

29
30
31   <!-- für CSSGram erforderlich -->
32   <link rel="stylesheet" href="css/cssgram.min.css">
33   <!-- für CSSGram erforderlich -Ende- -->
34
35   <style type="text/css">
36   .demo__item {list-style:none}
37
38   </style>
39
40
41
42
43
44<!-- erforderlich -->

45<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

45
46
47
48<!-- Ende -->
49
50</head>
51<body>
52<!--[if lt IE 7]><p class=chromeframe>Ihr Browser is <em>veraltet!</em> <a href="http://browsehappy.com/">Installieren Sie einen neuen Browser</a> oder <a href="http://www.google.com/chromeframe/?redirect=true">installieren Sie Google Chrome Frame</a> um diese Website zu sehen.</p><![endif]-->
53
54<div id="header-container">
55   <header class="wrapper clearfix">
56
57        <div class="vcard"><h1 id="title"><span class="fn n">
58          <span class="given-name">Sven</span> <span class="family-name">Soltmann</span></span>- Filter einbinden</h1>
59        </div>
60
61      <nav>
62         <ul>
63            <li><a href="https://www.svensoltmann.de" title="zur&uuml;ck zur Startseite">Home</a></li>
64            <li><a href="https://eastereggs.svensoltmann.de" target="_blank" rel="noopener" title="Sammlung von Eastereggs">Eastereggs</a></li>
65            <li><a href="kontakt.php" title="Kontaktformular">Kontakt</a></li>
66         </ul>
67      </nav>
68   </header>
69</div>
70
71<div id="main-container">
72   <div id="main" class="wrapper clearfix">
73
74   <article>
75                <header>
76                        <h2>Wirklich einfaches Einbinden von Instagram-Filter mit CSSGram</h2>
77                </header>
78                <!--section-->
79
80             <ul>
81             <li class="demo__item">
82                   <img src="img/magdeburg_salbker_see.jpg" alt="Magdeburg, Salbker See - ohne Filter" width="350px" >
83                Ohne Filter
84             <p></p>
85
86
87             <li class="demo__item">
88                   <img src="img/magdeburg_salbker_see.jpg" alt="Magdeburg, Salbker See - Filter: aden" class="aden" width="350px" >
89                Filter: aden
90             <p></p>
91             </li>
92
93             <li class="demo__item">
94                   <img src="img/magdeburg_salbker_see.jpg" alt="Magdeburg, Salbker See - Filter: earlybird"  class="earlybird"width="350px" >
95                Filter: earlybird
96             <p></p>
97             </li>
98
99             <li class="demo__item">
100                   <img src="img/magdeburg_salbker_see.jpg" alt="Magdeburg, Salbker See - Filter: toaster" class="toaster" width="350px" >
101                Filter: toaster
102             <p></p>
103             </li>
104             </ul>
105
106
107   Folgende Werte (class) sind m&ouml;glich:
108   <ul>
109       <li>aden
110       <li>reyes
111       <li>perpetua
112       <li>inkwell
113       <li>toaster
114       <li>walden
115       <li>hudson
116       <li>gingham
117       <li>mayfair
118       <li>lofi
119       <li>xpro2
120       <li>_1977
121       <li>brooklyn</li>
122   </ul>
123   Projektwebseite: <a href="http://una.im/CSSgram/" target="_blank" rel="noopener">http://una.im/CSSgram/</a>
124
125
126                <!--/section-->
127
128<!--  <footer>
129          <h3>Soziale Netze</h3>
130          <p></p>
131          </footer>
132-->
133
134
135   </article>
136
137<!--   <aside>
138      <h3>Bild</h3>
139      <p>&nbsp;</p>
140   </aside>
141-->
142   </div> <!-- #main -->
143</div> <!-- #main-container -->
144
145
146<div id="footer-container">
147  <footer class="wrapper">
148    <h3>folgen:
149        <!-- Twitter Profil -->&nbsp;
150        <a href="https://www.twitter.com/svensoltmann" target="_blank" rel="noopener" title="auf Twitter folgen"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVhJREFUeNpiZAAC4zP/+YHUBCBOYKAPWADEBWdNGD8yQi0/AMQGDPQFF4DYgQnqc3pbzgC1cwIoBP4zDCBgYhhgMOAOYCFGUb08A4OvCIR99jMDQ/FdBoYvf+kUAj7CCMvBWZaXgSFNko5RIMWGKabONdLSAD6gxsnAwMuM4J/9QgcHgNLBGWP8ag58YGAouTuAUeAgwMAQKTbAaQA5agbEAZ//DqADQAXW8lc0SoQ3vzEw9D3GY/kXGucCUDFManYbXrUhqPDhYaaOA1iIiW+M7AXUNVONgWHWM+y1Iij13/pOnAMItohAPt2sA7GU1ISafotwtc1ETIIjJjthqzF9hamUBmY9B4bCmwEuCRsfku6IZ7+okAYwakIeYCUjDqHxpYtlL4GF1RMaOABbIgUF9fNfNMqGxCRSShqog6IkXDCA9i8Y+M4pqIsMYtA5JEB2OYDsBggwAN6HZaSh6iPMAAAAAElFTkSuQmCC" alt="Twitter Logo" title="auf Twitter folgen" /><!--img src="/img/twitter.png" alt="Twitter Logo" width="32" height="32" style="border:0;width:32px;height:32px;"--></a>
151		<!-- mastodon --> &nbsp;
152        <a rel="me" href="https://social.tchncs.de/@svensoltmann" target="_blank" rel="noopener" title="auf Mastodon folgen"><img src="/img/Mastodon_Logo.png" alt="Mastodon Logo" width="32" height="34" style="border:0;width:32px;height:32px;"></a>
153        <a rel="me" href="https://svensoltmann.bsky.social" target="_blank" rel="noopener" title="auf Mastodon folgen"><img src="/img/logo_bluesky.png" alt="Bluesky Logo" width="36" height="32" style="border:0;width:32px;height:32px;"></a>
154        <!-- RSS Feed von https://eastereggs.svensoltmann.de -->&nbsp;
155        <a href="https://eastereggs.svensoltmann.de/feed" target="_blank" rel="noopener" title="den RSS-Feed von eastereggs.svensoltmann.de abonnieren"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFtJREFUeNq8V01sE0cUfmtvCA752ZCqqKRVkIqoCgevOLSlUhVTCSSEit320HKgOCekHsD8CTjFuVUiUrbiWsFaQkKVqjZcEDdshBBqUeMUQStoUUpLCYlJ7MhxfmzvMjNez87MztpGbVllPDtv3pvvm+/NzGYUYJ6FM3AQVTFUNJA9NvmT2qVN0V5rj6Ni9p6FAm4oDnCP0xFpCVAY3A+QARXHzGOs9aMwWScwgSr9fwT0BDskdHXhNBxEQfq/lNUfVCTutjUUa6ioHX9JgN62DTEVnNn/R7I2JiwhihXQZEGdh66BvZyH6j9ZUsp/pMFeKngBvbNqCCiSVImTZNbqm7UN0bYtRm2Vx1moICIrt02oPp5sHZBtC/7K/EmnSwjuHfXdD+Qp/46I/GTC8o+ppqmgoBKCytwJlwAbHNo9DEpIg+BGHYL9OgRC8rMJq1L8IQHlBxlpGlhwDzmswNxxx6dJHtWNYVA3R2DtO3FQ+727tpQ2oPj9Uc8sm6mhPDuGbE1Wrsg82B+G0GACQu/G+bT8nYX5ryNglQotyY/7lNxRgcAL5LFt8yB0fWpA2+s6R2JuDJHAO0ZQwJYsRmX2CGNnANd9PIa2XR4qaMDVB2k6oOirhHoIiY4drhrlv7KQG3OUsH0mUI+fOey0BRVePcfnZXlyHFZ+GYelWympGtoXFzgSizdNmDeHGoJjewD/2Fatwb6Lz9pwDHoOmNB3egLWIOlpjFUrGAyDUgXfj6OYKO33KwEZuIXqlftpUsSn7Q0d+o6loXPvMPGrx+H3ufNDsPoo635tPjNqPk6xBAyyCJ98iQRpsHVsMvsodH6YgPa3+H8X8IwxKOvfvmUQNpxyiee+iUPxRkqaBlwHKDPbhyUqSxOXYWZ0J8ycjUAlN8XJ3P3RsDtD7PtrBko/j1Ofrl0JXgWhDrB55NaDkGNcln/LwHRS52TuiSbRNgy7xFEpXDVof/uAjtIWJoCWhERAzKMnX4K9sliA6a/wFstTkN79BhdXupeB8qyrVMf2WHMFROmDvQPQvW+YlOD6AS4l1WIBnl1MUIDQ25GaCmwq7qW5fl8FxG2BjXiw10ayoCF5tViSvGMb67NwPcXNsuuDODd4iSGA0yBVoFpfhILsOK+BDvfrF1ynQffuhGcWi7fdxbYGgdQHxfXq0ykunoutStYAm2cWnA7yyibPLBbvurPs2Brh++5kuPjQ1kECXCdisQeRuE3Y/NFLS8b0KFAt5jkftg8X7gsrLmiHjEodmQMi990IUUXbU1to81cMyF9LeT4sSw+zMPttkrbVvgFYnfmTjvX0UpLGrExP1UixBxE+Ce9/DhO2cylhBye1zMYEt+QvnHxiLFYgS29FDT6dtg9wqzZKhrfn8TmQpLmxvXm0mC1j+eTRFlY4jasytWQBotogd8O7n5DrmdlMQqmszWL8fc330jCk1FfpnShE8V0NOW5qhcQL5Z63461j7LgOI9j2XIABACNWNOkxgA6KAAAAAElFTkSuQmCC" alt="RSS Logo" /><!--img src="/img/rss-icon.png" alt="RSS Logo" width="32" height="32" style="border:0;width:32px;height:32px;"/ --></a>
156		<!-- XING Profile -->&nbsp;
157        <!--a href="http://www.xing.com/profile/Sven_Soltmann" target="_blank" rel="noopener" title="XING-Profil"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i

15777u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RDZFOUVFNjJGMzMxMUUxOEYzQkUyREFEMzcxQjA1MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RDZFOUVFNzJGMzMxMUUxOEYzQkUyREFEMzcxQjA1MSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhENkU5RUU0MkYzMzExRTE4RjNCRTJEQUQzNzFCMDUxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhENkU5RUU1MkYzMzExRTE4RjNCRTJEQUQzNzFCMDUxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+JB8b3QAABLRJREFUeNq8V/tP21UU//RbXu14wxbeg/GSPaBSnCBIKY6iI9miU+ccy2IiKPq7/4Qx6k9kWWJclukWl80wdU5kTBjTUosIm+sIsA3QMR4Tx6MtLd+v597R2m8frCDsJCf99nzv957PPfecz7lXIUkSSkpKNACaSF8ljcfGygPSs6TNpL0KrVa7WxIE41xaOuyxsRBDQjbUu+B0InxmBpFjo1CI4jbmrWk2PQO2hAQ8CWELtCYmQrG0hMg/x5oYgIM2WjnbivWQMHLQULMHjQYDIkJDYXc4Ea1WIfOdd2XjFggEByAplSpRoQDWCUBJdjaO6vWIj4zk/9Xh4XBQ2L0XKDGfQKSwnuGNI6eHnq9AclyczN5iMgX8hmfceoRfQSsqy8vDC4WFMvvM/DzOdHUF9BEi+QEQIghIiIqCisLnpGRR0v9FCuN9yl4xwERs1Uer9YhSqWT2Uz91wDw4FBiAvwhEq9VorDWgcGsmHEtOCAwAJdPpq524aO7xASHQ6g2aIuzOyZHZh8bHcd5oxILdvrotsC0u8t/ygqdk9swtm9F35y5GJidl9qykJBzW6RDqwSHOJZGv/sbIyIpbLIDeSaIk09kFK45fasVvw8OywTnJyXijogJKheAeG0LPr5SWYntammyseWgQF7pNEAmI9/wufQRgOQLeOjY1heM/tPK995QjVTrszEh3j9uVuRWvlT/Hk9AlD2kBpzuu4u7EhN+5XboMIPCAb02/4utfjDIAm2Ni8N7el6AKC+PJ+np5OdKJVDzlmuUmvjObV3TuAsA3TZREv/szZ7Pi5uioj72A+oZSUECTl4v9pc/K3rFKOdl+BVMP/wmqfFfkgdyUFNQ9U+Jj/7ytjVfC24YaN+O5pLW3F5f7+oLmloAAWGkdKCuDlqjVU4y3BvAVEYtuxw7UFBXJ3g2P3+erd1VR8ABEXwDavBwc0VfJkosl5KctF2CzL+L9ujpEUB64S9fhwFkCZrTcWhWD+o3ApogI1FNDSY6Xn01aiFSu9PejgUhKsy3rv8ZC33dTZL6kul8trfsFUJqfj0O6SpltenYWxy5+zzvbHo2Gt1036Ygieokzhu7dW/0BxVUFnvrBgZcRqlTKBp7p6MTvt2/DumjHN6ZuHnKXsLHl2wuQn5bqM9dKGpCIclNScYdIhCmj3c4bf+AEZf68zcbfMzCmgQEZwMKsLNRXVfHG9bj69+EB7y1465OPOZczO5uQARmmxuKSCar1z4gli7NzKF/C3VHYT5TM8uRniyX4HJD8VEFrT+9jP7xEXbGNan6fBxFlULM6TFHoGRykUnQEnwPBhsxTH1BSnvixDX/Pzcm4Yy8Rl27nrqC3YM0AmHZev44Wr16RRAeTN/U6fjAJDoC0dgDsuHWqvR1/TU/LQNQWa3kkNjwCLgI613VNBiBmkxoHKyspGrHBAfg/wkrz5OV2WLy6pqH4adRXV/MqWrEKlJJopSvSo7vBGqWfCOqjc+fR8GItP5bZiaTYuSGcnll5soOtj2ORE9EkuxseG42KbpxSqfEkZcvCPFLnZj9k8WmmByRaFxAqihvumPlgzlPmefk2K7yu5/tYJW0wBkapXyxfzwf/FWAAKLC+O293tTcAAAAASUVORK5CYII=" /></a>
158        -->
159    </h3>
160
161        <address>
162    <span class="vcard" id="profile" itemscope itemtype="http://schema.org/Person">
163        <span class="fn" itemprop="name" lang="de" style="text-decoration:none; color: #FFF;" ><span class="given-name">Sven</span> <span class="family-name">Soltmann</span></span>,
164    <span class="adr home" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
165       <span class="street-address" itemprop="streetAddress">Pr&auml;sident Friese Weg 50</span>,
166       <span class="postal-code" itemprop="postalCode">39122</span> <span class="locality" itemprop="addressLocality">Magdeburg</span>
167    </span>
168    </span>
169        </address>
170
171  </footer>
172</div>
173
174<!--  Einbindung von JQuery und Analytics, wird beides gerade nicht gebraucht.

175<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

175

176<script>window.jQuery || document.write('

176<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

176
177

178<script src="js/script.js"></script>

178

179<script>
180        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
181        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
182        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
183        s.parentNode.insertBefore(g,s)}(document,'script'));
184</script>

184
185-->
186</body>
187</html>