-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout.htm
executable file
·162 lines (152 loc) · 7.38 KB
/
about.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/CreativeWork">
<head>
<meta charset="utf-8" />
<!-- schema.org -->
<meta itemprop="name" content="CSSpatternz">
<meta itemprop="description" content="A CSS3 Pattern Generator. Create endless combos of CSS3 patterns and get the code to back it up.">
<!-- schema.org -->
<link href='http://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
<title>CSS Patternz</title>
<link rel="stylesheet" href="css/base.css" />
<!-- <link rel="stylesheet" href="css/shCore.css" /> -->
<script src="js/libs/modernizr.custom.js"></script>
<style type="text/css" id="render"></style>
</head>
<body>
<!-- <div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '251397934904082', // App ID
channelURL : '//www.csspatternz.com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script> -->
<header>
<h1><a href="index.htm" title="Back to Pattern Generator"><span>CSS</span>patternz</a></h1>
<nav>
<a href="index.htm">Generator</a>
<a href="about.htm" class="current">About</a>
<a href="presets.htm">Presets</a>
</nav>
<a id="github" href="https://github.com/ahendy/css3patternz">Visit on GitHub</a>
<!-- <div id="social">
<div class="facebook-button">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false"></div>
</div>
<div class="twitter-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="CSSpatternz">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="googleplus-button">
<g:plusone size="tall" annotation="inline"></g:plusone>
</div>
</div> -->
</header>
<div id="content" class="page">
<h1>About the tool</h1>
<p>
The original idea of making patters with CSS <code>gradient</code> function came from a presentation by <a href="http://leaverou.me" target="_blank">Lea Verou</a> and her CSS patterns gallery. We found this very interesting and wanted to make a tool that allow
web developers make patterns more easy. There is endless possibilities for creating creative patterns using CSS. We are trying to make the tool as flexible as we can to give developers more possibilities.
</p>
<h1>How it works?</h1>
<p>developing...</p>
<h1>Browser Support</h1>
<p>This tool is for generating code for modern websites. So we just support modern browsers. With that we chose not to even try to support older versions of IE!
CSS <code>background-size</code> property is something new (As now Nov 2011) and not even all modern browsers supporting that properly. <a href="http://caniuse.com" target="_blank">Caniuse.com</a> have an up to date
<a href="http://caniuse.com/#search=background-size" >browser support table</a> for that. <code>background-image:-prefix-linear-gradient()</code> have wider browser support.
But <code>background-image:-prefix-radial-gradient()</code> supported in less browsers.
</p>
<p>We always test generated code and update this browser support table:</p>
<table>
<tr>
<td>Browser</td>
<td>Confirmed support status</td>
</tr>
<tr>
<td>Chrome</td>
<td>Version 6+</td>
</tr>
<tr>
<td>Safari Desktop</td>
<td>Version 4+</td>
</tr>
<tr>
<td>Safari Mobile</td>
<td>iOS 4+</td>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>Version 4+</td>
</tr>
<tr>
<td>Microsoft IE</td>
<td>Version 10+</td>
</tr>
<tr>
<td>Opera</td>
<td>??</td>
</tr>
<tr>
<td>Android Browser</td>
<td>??</td>
</tr>
<tr>
<td>Google TV</td>
<td>?? / GTV 2.0 (Honeycomb) Support</td>
</tr>
</table>
<h1>Authors</h1>
<div class="vcard clearfix">
<img src="https://secure.gravatar.com/avatar/9c0fb33d64d8514f1c6a0e9dfa39dfab?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" class="alignLeft" />
<h2>Mohsen Nabiloo-Azimi</h2>
<p>I'm a front end web developer who interested in HTML5 and new web development technologies. My main skill is client side JavaScript programming. I wrote this tool's API and designed code generator algorithm.</p>
<p>Follow me at <a href="http://twitter.com/mohsen____" target="_blank">@mohsen____</a></p>
</div>
<div class="vcard clearfix">
<img src="https://secure.gravatar.com/avatar/f1fdb65f1d1487dd87658bd536a6b742?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" class="alignLeft" />
<h2>Andrew Henderson</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae odio a purus fermentum adipiscing eu cursus nibh. In vitae accumsan nibh. Aenean feugiat libero nec sapien ultricies in aliquam nibh placerat. Maecenas sollicitudin, ligula ut mattis tincidunt, diam est congue mi, in hendrerit nibh sapien non dolor. Integer tellus nisl, mattis quis blandit egestas, viverra at ipsum. Aliquam orci metus, porta eu ullamcorper a, rutrum tempor justo. Proin eget risus ut elit venenatis porttitor sed et justo.</p>
<p>Praesent lorem nibh, varius a malesuada quis, venenatis ut arcu. In risus mauris, consequat vel commodo at, vulputate vel nibh. Duis varius vehicula lacinia. Pellentesque et mauris metus, a faucibus tortor. Duis auctor, libero id aliquam luctus, sem odio convallis enim, non pulvinar mauris libero sed nunc. Morbi dictum sagittis orci. Pellentesque at justo neque, vitae dignissim felis. Nulla in libero quam. Aliquam vitae eros felis, quis porta metus.</p>
</div>
</div>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.4.min.js"><\/script>')</script> -->
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/plugins.js"></script>
<!--[if lt IE 9 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
<!-- Begin Facebook Like -->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=251397934904082";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- End Facebook Like -->
<!-- Google+ render call -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<body>
</html>