Skip to content

Commit 769c56f

Browse files
astearnsastearns
committed
[css-shapes] change divs to imgs in first example
1 parent 7af0f3d commit 769c56f

7 files changed

Lines changed: 114 additions & 92 deletions

File tree

‎css-shapes/Overview.html‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
</p>
6464
<h1 class="p-name no-ref" id=title>CSS Shapes Module Level 1</h1>
6565
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
66-
<span class=dt-updated><span class=value-title title=20140304>4 March 2014</span></span></span></h2>
66+
<span class=dt-updated><span class=value-title title=20140305>5 March 2014</span></span></span></h2>
6767
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-shapes/>http://www.w3.org/TR/css-shapes/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-shapes/>http://dev.w3.org/csswg/css-shapes/</a>
6868
<dt>Feedback:</dt>
6969
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-shapes%5D%20feedback">www-style@w3.org</a>
@@ -296,35 +296,38 @@ <h2 class="heading settled heading" data-level=2 id=relation-to-box-model-and-fl
296296
using the <a class=property data-link-type=propdesc href=#propdef-shape-outside title=shape-outside>shape-outside</a> property.
297297

298298
<pre><code class=css>
299-
&lt;div style="text-align:center;"&gt;
300-
&lt;div id="float-left"&gt;&lt;/div&gt;
301-
&lt;div id="float-right"&gt;&lt;/div&gt;
302-
&lt;div&gt;
303-
Sometimes a web page’s text content appears to be
304-
funneling your attention towards a spot on the page
305-
to drive you to follow a particular link. Sometimes
306-
you don’t notice.
307-
&lt;/div&gt;
308-
&lt;/div&gt;
299+
&lt;img class="left" src="hand.svg"&gt;&lt;/img&gt;
300+
&lt;img class="right" src="hand.svg"&gt;&lt;/img&gt;
301+
&lt;p&gt;
302+
Sometimes a web page’s text content appears to be
303+
funneling your attention towards a spot on the page
304+
to drive you to follow a particular link. Sometimes
305+
you don’t notice.
306+
&lt;/p&gt;
309307

310308
&lt;style type="text/css"&gt;
311-
#float-left {
309+
.left {
312310
shape-outside: polygon(0 0, 100% 100%, 0 100%);
313311
float: left;
314312
width: 40%;
315313
height: 12ex;
314+
transform: scaleX(-1);
316315
}
317316

318-
#float-right {
317+
.right {
319318
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
320319
float: right;
321320
width: 40%;
322321
height: 12ex;
323322
}
323+
324+
p {
325+
text-align: center;
326+
}
324327
&lt;/style&gt;
325328
</code>
326329
</pre>
327-
<p> <img alt="Using the shape-outside property with a float" class=singleImgExample src=images/float-shape-outside.png>
330+
<p> <img alt="Using the shape-outside property with floats" class=singleImgExample src=images/hand-funnel.png>
328331
</div>
329332

330333
<div class=example>
@@ -1126,6 +1129,7 @@ <h2 class="no-num heading settled heading" id=change-log><span class=content>
11261129
<h3 class="no-num heading settled heading" id=20140211><span class=content>
11271130
Since <a href=http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/>February 11th 2014</a></span><a class=self-link href=#20140211></a></h3>
11281131
<ul>
1132+
<li>Replaced divs with images in the first example</li>
11291133
<li>Add 0px to last serialization example</li>
11301134
</ul>
11311135

‎css-shapes/Overview.src.html‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -158,36 +158,39 @@ <h2 id="relation-to-box-model-and-float-behavior">
158158
using the 'shape-outside' property.
159159

160160
<pre><code class="css">
161-
&lt;div style="text-align:center;"&gt;
162-
&lt;div id="float-left"&gt;&lt;/div&gt;
163-
&lt;div id="float-right"&gt;&lt;/div&gt;
164-
&lt;div&gt;
165-
Sometimes a web page's text content appears to be
166-
funneling your attention towards a spot on the page
167-
to drive you to follow a particular link. Sometimes
168-
you don't notice.
169-
&lt;/div&gt;
170-
&lt;/div&gt;
161+
&lt;img class="left" src="hand.svg"&gt;&lt;/img&gt;
162+
&lt;img class="right" src="hand.svg"&gt;&lt;/img&gt;
163+
&lt;p&gt;
164+
Sometimes a web page's text content appears to be
165+
funneling your attention towards a spot on the page
166+
to drive you to follow a particular link. Sometimes
167+
you don't notice.
168+
&lt;/p&gt;
171169

172170
&lt;style type="text/css"&gt;
173-
#float-left {
171+
.left {
174172
shape-outside: polygon(0 0, 100% 100%, 0 100%);
175173
float: left;
176174
width: 40%;
177175
height: 12ex;
176+
transform: scaleX(-1);
178177
}
179178

180-
#float-right {
179+
.right {
181180
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
182181
float: right;
183182
width: 40%;
184183
height: 12ex;
185184
}
185+
186+
p {
187+
text-align: center;
188+
}
186189
&lt;/style&gt;
187190
</code>
188191
</pre>
189192

190-
<img class="singleImgExample" src="images/float-shape-outside.png" alt="Using the shape-outside property with a float"/>
193+
<img class="singleImgExample" src="images/hand-funnel.png" alt="Using the shape-outside property with floats"/>
191194
</div>
192195

193196
<div class="example">
@@ -1043,6 +1046,7 @@ <h2 class="no-num" id="change-log">
10431046
<h3 class="no-num" id="20140211">
10441047
Since <a href="http://www.w3.org/TR/2014/WD-css-shapes-1-20140211/">February 11th 2014</a></h3>
10451048
<ul>
1049+
<li>Replaced divs with images in the first example</li>
10461050
<li>Add 0px to last serialization example</li>
10471051
</ul>
10481052

‎css-shapes/examples/example-6.html‎

Lines changed: 22 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,43 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title>CSS Regions - Simple Template Demo</title>
5+
<title>CSS Shapes - left and right float example</title>
66
<style type="text/css">
7-
87

9-
10-
body,
11-
html {
12-
height:100%;
13-
width:100%;
14-
overflow:hidden;
15-
}
16-
178
body {
189
margin:0;
1910
font-family: Helvetica, Arial, sans-serif;
2011
color:#222;
2112
font-size:16px;
2213
line-height:20px;
23-
}
24-
25-
#workspace {
26-
width: 500px;
27-
margin-left: auto;
28-
margin-right: auto;
29-
position: relative;
30-
-x-border-left: 1px solid #a0a0a0;
31-
-x-border-right: 1px solid #a0a0a0;
32-
}
33-
34-
#container {
35-
margin-top: 20px;
36-
-webkit-wrap-shape-mode: content;
3714
text-align: center;
3815
}
3916

40-
#float-left, #float-right {
41-
position: absolute;
42-
-webkit-wrap-shape-mode: around;
43-
}
44-
45-
#float-left {
46-
-webkit-wrap-shape: polygon(0,0 100%,100% 0,100%);
47-
-webkit-render-wrap-shape: auto;
48-
top: 0px;
49-
left: 0px;
50-
width: 40%;
51-
height: 12ex;
52-
}
17+
.left {
18+
shape-outside: polygon(0 0, 100% 100%, 0 100%);
19+
width: 40%;
20+
height: 12ex;
21+
float: left;
22+
-webkit-transform: scaleX(-1);;
23+
}
5324

54-
#float-right {
55-
top: 0px;
56-
right: 0px;
57-
-webkit-wrap-shape: polygon(100%,0 100%,100% 0,100%);
58-
-webkit-render-wrap-shape: auto;
59-
width: 40%;
60-
height: 12ex;
61-
}
25+
.right {
26+
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
27+
width: 40%;
28+
height: 12ex;
29+
float: right;
30+
}
6231

6332
</style>
6433
</head>
6534
<body>
66-
67-
<div id="workspace">
68-
<div id="float-left"></div>
69-
<div id="float-right"></div>
70-
<div id="container">
71-
<div>
72-
Sometimes a web page's text content appears to be
73-
funneling your attention towards a spot on the page
74-
to drive you to follow a particular link. Sometimes
75-
you don't notice.
76-
</div>
77-
</div>
78-
</div>
79-
35+
<img class="left" src="hand.svg"></img>
36+
<img class="right" src="hand.svg"></img>
37+
<p class="focus">
38+
Sometimes a web page's text content appears to be
39+
funneling your attention towards a spot on the page
40+
to drive you to follow a particular link. Sometimes
41+
you don't notice.
42+
</p>
8043
</body>
8144
</html>

‎css-shapes/examples/hand.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎css-shapes/images/hand-funnel.png‎

20.5 KB
Loading

‎css-shapes/issues-lc-20140211.html‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2-
<title>CSS Shapes Module Level 1 Disposition of Comments for 2013-12-03 LCWD</title>
2+
<title>CSS Shapes Module Level 1 Disposition of Comments for 2014-02-11 LCWD</title>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
34
<style type="text/css">
45
.a { background: lightgreen }
56
.d { background: lightblue }
@@ -9,9 +10,9 @@
910
:target { box-shadow: 0.25em 0.25em 0.25em; }
1011
</style>
1112

12-
<h1>CSS Shapes Module Level 1 Disposition of Comments for 2013-12-03 LCWD</h1>
13+
<h1>CSS Shapes Module Level 1 Disposition of Comments for 2014-02-11 LCWD</h1>
1314

14-
<p>Last call document: <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/">http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/</a>
15+
<p>Last call document: <a href="http://www.w3.org/TR/2013/WD-css-shapes-1-20140211/">http://www.w3.org/TR/2013/WD-css-shapes-1-20140211/</a>
1516

1617
<p>Editor's draft: <a href="http://dev.w3.org/csswg/css-shapes-1/">http://dev.w3.org/csswg/css-shapes-1/</a>
1718

@@ -36,4 +37,28 @@ <h1>CSS Shapes Module Level 1 Disposition of Comments for 2013-12-03 LCWD</h1>
3637
From: Dirk Schulze
3738
Comment: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0047.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0047.html</a>
3839
Response: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0047.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0047.html</a>
39-
Closed: Accepted</pre>
40+
Closed: Accepted
41+
</pre>
42+
<pre class='r' id='issue-2'>
43+
Issue 2. <a href="#issue-2">#</a>
44+
Summary: Questioning whether shapes should be in CSS
45+
From: Håkon Wium Lie
46+
Comment: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html</a>
47+
Response: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html</a>
48+
Closed: Rejected
49+
</pre>
50+
<pre class='a' id='issue-3'>
51+
Issue 3. <a href="#issue-3">#</a>
52+
Summary: Change example divs
53+
From: Håkon Wium Lie
54+
Comment: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html</a>
55+
Response: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html</a>
56+
Closed: Accepted
57+
</pre>
58+
<pre class='d' id='issue-1'>
59+
Issue 1. <a href="#issue-1">#</a>
60+
Summary: Include shapes-from-image-luminance
61+
From: Håkon Wium Lie
62+
Comment: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html</a>
63+
Response: <a href="http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html">http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html</a>
64+
Closed: Deferred</pre>

‎css-shapes/issues-lc-20140211.txt‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Draft: http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/
1+
Draft: http://www.w3.org/TR/2013/WD-css-shapes-1-20140211/
22
Title: CSS Shapes Module Level 1
33

44
----
@@ -7,4 +7,25 @@ Summary: Tweak last serialization example
77
From: Dirk Schulze
88
Comment: http://lists.w3.org/Archives/Public/www-style/2014Mar/0047.html
99
Response: http://lists.w3.org/Archives/Public/www-style/2014Mar/0047.html
10-
Closed: Accepted
10+
Closed: Accepted
11+
----
12+
Issue 2.
13+
Summary: Questioning whether shapes should be in CSS
14+
From: Håkon Wium Lie
15+
Comment: http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html
16+
Response: http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html
17+
Closed: Rejected
18+
----
19+
Issue 3.
20+
Summary: Change example divs
21+
From: Håkon Wium Lie
22+
Comment: http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html
23+
Response: http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html
24+
Closed: Accepted
25+
----
26+
Issue 1.
27+
Summary: Include shapes-from-image-luminance
28+
From: Håkon Wium Lie
29+
Comment: http://lists.w3.org/Archives/Public/www-style/2014Mar/0101.html
30+
Response: http://lists.w3.org/Archives/Public/www-style/2014Mar/0103.html
31+
Closed: Deferred

0 commit comments

Comments
 (0)