-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
140 lines (127 loc) · 5.28 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Repeating patterns as borders with CSS3 border-image</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
<link href="assets/css/style.css" rel="stylesheet">
<link rel="author" href="https://plus.google.com/+BramdeHaan/posts">
<!-- <script>if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
document.documentElement.className += 'js';
}</script> -->
<!-- <script src="js/modernizr.custom.58687.js"></script> -->
<script src="assets/js/modernizr.custom.38621.js"></script>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
</head>
<body class="dv-01">
<div id="headerWrap" class="header-wrap">
<header id="header" class="header">
<h1>Frame Patterns</h1>
<p><span>repeating patterns as </span> <code>border-image</code></p>
</header>
</div>
<main class="main" role="main">
<section class="section section--code">
<div class="width-1v2 divider section--code__example">
<pre class="language-css shape--01"><code class="language-css">
.divider {
border: 32px solid transparent;
border-image:url(../svg/zigzag_96x96_border-image.svg) 32 round round;
background-color: #f33;
}</code></pre>
<pre class="language-css shape--02"><code class="language-css">
.divider {
border: 32px solid transparent;
border-image:url(../svg/wave_96x96_border-image.svg) 32 round round;
background-color: #3c93c9;
}</code></pre>
<pre class="language-css shape--03"><code class="language-css">
.divider {
border: 32px solid transparent;
border-image:url(../svg/trapeze_96x96_border-image.svg) 32 round round;
background-color: #c9743c;
}</code></pre>
<pre class="language-css shape--04"><code class="language-css">
.divider {
border: 32px solid transparent;
border-image:url(../svg/asterisk_96x96_border-image.svg) 32 round round;
background-color: grey;
}</code></pre>
<pre class="language-css shape--05"><code class="language-css">
.divider {
border: 16px solid transparent;
border-image:url(../svg/diagonal-block_48x48_border-image.svg) 16 round round;
background-color: grey;
}</code></pre>
<pre class="language-css shape--06"><code class="language-css">
.divider {
border: 16px solid transparent;
border-image: url(../svg/blocks_48x48_border-image.svg) 16 round round;
background-color: grey;
}</code></pre>
<pre class="language-css shape--07"><code class="language-css">
.divider {
border: 50px solid transparent;
border-image:url(../svg/meander_152x152_border-image.svg) 50 round round;
background-color: #5d5db1;
}</code></pre>
<pre class="language-css shape--08"><code class="language-css">
.divider {
border: 12px solid transparent;
border-image:url(../svg/stamp_36x36_border-image.svg) 12 round round;
background-color: grey;
}</code></pre>
</div>
<div class="width-1v2 divider section--code__visual">
<div class="fig"></div>
<div class="figcaption">
<pre class="shape--01">Zigzag shape
img size:
96px square</pre>
<pre class="shape--02">Wave shape
img size:
96px square
</pre>
<pre class="shape--03">Trapeze shape
img size:
96px square
</pre>
<pre class="shape--04">Asterisk shape
img size:
96px square
</pre>
<pre class="shape--05">Diagonal Block shape
img size:
48px square
</pre>
<pre class="shape--06">Block shape
img size:
48px square
</pre>
<pre class="shape--07">Meander shape
img size:
152px square
</pre>
<pre class="shape--08">Stamp shape
img size:
40x square
</pre>
</div>
</div>
</section>
<section id="about" class="section section--about">
<div class="disclaimer divider width-1v2"><small class="divider">This demo will only work with browsers that support <code>border-image</code>, and only reliable so if the <code>round</code> value is correctly implemented.</small>
</div>
<div class="blockquote divider width-1v2"><blockquote>“For a certain kind of temperament, there is a certain kind of satisfaction in doing something that cannot be perfect, but can still be done to the best of your ability.” <cite><b>Matthew Carter</b> talking about <b>designing within constrains</b> in: <a href="http://t.co/tTijhPoeWz">My life in typefaces</a></cite></blockquote></div>
</section>
</main>
<footer class="footer footer--page"><small><a href="https://github.com/atelierbram/frame-patterns">Github</a> · <a href="http://codepen.io/atelierbram/pen/vrdKB">Codepen</a></small></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-2.1.0.min.js"><\/script>')</script>
<!-- <script src="assets/js/button.js"></script> -->
<!-- <script src="assets/js/toggle.js"></script> -->
<script>$(function(){$("#headerWrap").append($("<button>toggle border-images</button>").attr("id","btnToggle").addClass("btn"))});$(function(){$("#btnToggle").click(function(){$("body").each(function(){var classes=["dv-01","dv-02","dv-03","dv-04","dv-05","dv-06","dv-07","dv-08"];this.className=classes[($.inArray(this.className,classes)+1)%classes.length]})})});</script>
<script src="assets/js/prism-comp-scss.min.js"></script>
</body>
</html>