Skip to content

Commit 462cf17

Browse files
author
jessicarush
committed
Initial commiit
1 parent 686b8ec commit 462cf17

File tree

6 files changed

+314
-0
lines changed

6 files changed

+314
-0
lines changed

‎css_shapes/base.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
line-height: 1.7em;
27+
}
28+
29+
code {
30+
line-height: 1.5em;
31+
background: lightcyan;
32+
}
33+
34+
/* TYPOGRAPHY ------------------------------------------------------------- */
35+
36+
.primary-heading {
37+
color: var(--heading-color);
38+
font-family: var(--heading-font);
39+
font-size: 2rem;
40+
font-weight: 400;
41+
line-height: 1.5em;
42+
}
43+
44+
.filler {
45+
color: var(--minor-color);
46+
}
47+
48+
49+
/* LINKS & BUTTONS -------------------------------------------------------- */
50+
51+
/* LAYOUT ----------------------------------------------------------------- */
52+
53+
.centered-container {
54+
width: 500px;
55+
margin: 0 auto;
56+
}
57+
58+
.box {
59+
box-sizing: border-box;
60+
background: aquamarine;
61+
border: solid 12px lightcyan;
62+
width: 200px;
63+
height: 200px;
64+
margin-right: 15px;
65+
padding: 15px;
66+
}
67+
68+
.shape-1 {
69+
display: flex;
70+
align-items: center;
71+
border-radius: 50%;
72+
float: left;
73+
shape-outside: margin-box;
74+
}
75+
76+
.shape-2 {
77+
float: left;
78+
shape-outside: url('button.png');
79+
margin-right: 15px;
80+
shape-margin: 10px;
81+
}
82+
83+
.shape-2b {
84+
float: right;
85+
shape-outside: url('hand.png');
86+
shape-image-threshold: .1;
87+
}
88+
89+
.shape-2c {
90+
float: left;
91+
shape-outside: url('blend.png');
92+
shape-image-threshold: .9;
93+
}
94+
95+
.shape-3 {
96+
border-radius: 0 0 100% 0;
97+
float: left;
98+
shape-outside: margin-box;
99+
}
100+
101+
.shape-4 {
102+
border-radius: 0 0 100% 0;
103+
float: left;
104+
shape-outside: border-box;
105+
}
106+
107+
.shape-5 {
108+
border-radius: 0 0 100% 0;
109+
float: left;
110+
shape-outside: padding-box;
111+
}
112+
113+
.shape-6 {
114+
border-radius: 0 0 100% 0;
115+
float: left;
116+
shape-outside: content-box;
117+
}
118+
119+
.shape-7 {
120+
width: 200px;
121+
height: 200px;
122+
border: solid 1px black;
123+
float: left;
124+
shape-outside: inset(0 100px 100px 50px round 0);
125+
}
126+
127+
.shape-8 {
128+
width: 200px;
129+
height: 200px;
130+
border: solid 1px black;
131+
border-radius: 50%;
132+
margin-right: 15px;
133+
float: left;
134+
shape-outside: circle(50%);
135+
}
136+
137+
.shape-9 {
138+
width: 100px;
139+
height: 300px;
140+
float: left;
141+
shape-outside: ellipse(30% 50% at left);
142+
}
143+
144+
.shape-10 {
145+
width: 300px;
146+
height: 300px;
147+
float: left;
148+
shape-outside: polygon(0 27px, 0 225px, 106px 121px);
149+
}
150+
151+
.shape-11::before {
152+
content: '';
153+
display: block;
154+
height: 200px;
155+
width: 200px;
156+
border-radius: 0 0 100% 0;
157+
float: left;
158+
shape-outside: polygon(0 0, 200px 200px, 0 200px);
159+
}
160+
161+
.shape-12 {
162+
width: 250px;
163+
float: left;
164+
shape-outside: polygon(154px 9px, 215px 250px, 3px 184px);
165+
clip-path: polygon(154px 9px, 215px 250px, 3px 184px);
166+
shape-margin: 10px;
167+
}
168+
169+
/* COMPONENTS ------------------------------------------------------------- */
170+
171+
/* COSMETIC --------------------------------------------------------------- */
172+
173+
/* UTILITY ---------------------------------------------------------------- */
174+
175+
/* STATE ------------------------------------------------------------------ */

‎css_shapes/blend.png‎

20.6 KB
Loading

‎css_shapes/button.png‎

29.2 KB
Loading

‎css_shapes/clouds.jpg‎

106 KB
Loading

‎css_shapes/hand.png‎

64.6 KB
Loading

‎css_shapes/index.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Shapes</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header class="centered-container">
14+
<h1 class="primary-heading">
15+
CSS Shapes
16+
</h1>
17+
<nav></nav>
18+
</header>
19+
20+
<main class="centered-container">
21+
22+
23+
<section>
24+
<div class="box shape-1">
25+
<code>
26+
float: left;<br>
27+
shape-outside: margin-box;
28+
</code>
29+
</div>
30+
<p>CSS Shapes are applied to floating elements. The specification defines a number of different ways to define a shape on a floated element but the end result is that it causes wrapping lines to wrap round the shape rather than following the rectangle of the element's box. The current specification states the element has to be floated in order to apply a basic-shape to it. This has the side-effect of creating a simple fallback for cases where the browser doesn't support CSS Shapes.</p>
31+
</section>
32+
33+
34+
<section>
35+
<h2 class="primary-heading">properties</h2>
36+
<ul>
37+
<li><code>shape-outside</code> — defines the shape. the value can be one of four basic shapes, or, it can be set to the element's box model values: <code>border-box, padding-box, content-box, margin-box</code>, or, it can use a image that has transparancy.</li>
38+
<li><code>shape-image-threshold</code> — used with <code>shape-outside: url()</code> to set the threshold of image transparency used to define the shape area. If the value of shape-image-threshold is 0.0 (which is the initial value) then the area must be fully transparent. If the value is 1.0 then it is fully opaque.</li>
39+
<li><code>shape-margin</code> — sets a margin around the defined shape. Usually this works in tandem with a regular margin because the shape may get clipped by reference box's margin box.</li>
40+
</ul>
41+
</section>
42+
43+
44+
<section>
45+
<h2 class="primary-heading">shapes from images</h2>
46+
<img src="button.png" class="shape-2">
47+
<p>You can use an image that has transparency to define the shape. Here, I've placed and floated and image, then added the property <code>shape-outside: url('button.png')</code>. In order for this to work though, the image has to be <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">CORS compatible</a>, which basically means that the shape-outside image must be on the same server as the web page. Unfortunately though, this doesn't translate when you're testing locally (CORS doesn't seem to like <code>file:///</code>). To work around this do one of the following:</p>
48+
49+
<ul>
50+
<li>use Safari and from the Develop menu, choose "Disable Local File Restrictions". </li>
51+
<li>use python to run a simple local server from your testing directory with <code>python -m SimpleHTTPServer</code> OR <code>python3 -m http.server</code>, then access your files through <code>http://localhost:8000/</code>.
52+
</ul>
53+
54+
<img src="hand.png" class="shape-2b">
55+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id.</p>
56+
57+
<h2 class="primary-heading">...with shape-image-threshold</h2>
58+
59+
<img src="blend.png" class="shape-2c">
60+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id.</p>
61+
</section>
62+
63+
64+
<section>
65+
<h2 class="primary-heading">shapes from box model values</h2>
66+
<p>A shape can be defined using a value from the CSS Box Model. When doing so, if an element has a <code>border-radius</code>, the shape will follow that radius.</p>
67+
68+
<div class="box shape-3">
69+
<code>shape-outside: margin-box</code>
70+
</div>
71+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales.</p>
72+
73+
<div class="box shape-4">
74+
<code>shape-outside: border-box</code>
75+
</div>
76+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales.</p>
77+
78+
<div class="box shape-5">
79+
<code>shape-outside: padding-box</code>
80+
</div>
81+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales.</p>
82+
83+
<div class="box shape-6">
84+
<code>shape-outside: content-box</code>
85+
</div>
86+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales.</p>
87+
</section>
88+
89+
90+
<section>
91+
<h2 class="primary-heading">basic shapes</h2>
92+
<ul>
93+
<li><code>inset()</code> - same as a default rectangle but allows you to inset (offset) the values, thus pulling the content in over the shape</li>
94+
<li><code>circle()</code> - creates a circle</li>
95+
<li><code>ellipse()</code> - creates an oval</li>
96+
<li><code>polygon()</code> - creates a polygon</li>
97+
</ul>
98+
99+
<p>Note: Firefox has an <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes" target="_blank">awesome feature</a> in the developer tools that lets you edit a shape (or clip-path) in the browser so you can copy the new values to your css. Don't know if the other browsers have this too, but will look into it.</p>
100+
101+
<h2 class="primary-heading">inset()</h2>
102+
<div class="shape-7"></div>
103+
<p>inset() takes values for top, right, bottom and left, plus a final value optional value for border-radius. For example, <code>shape-outside: inset(0 50px 100px 50px round 0);</code>.</p>
104+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales.</p>
105+
106+
<h2 class="primary-heading">circle()</h2>
107+
<div class="shape-8"></div>
108+
<p>circle() can accept two possible arguments. The first is the shape-radius and the second is the optional position. Radius can be a length or percentage but can also be one of the keywords <code>closest-side</code> or <code>farthest-side</code>. Position, if used, is set after they keyword 'at'. If omitted, the poistion will be set to center, however you can use any valid position here to indicate the position of the centre of the circle. For example, <code>shape-outside: circle(50% at 50%);</code>.</p>
109+
110+
<h2 class="primary-heading">ellipse()</h2>
111+
<div class="shape-9"></div>
112+
<p>ellipse() works similar to the circle except that it takes two radius: x and y. It also can take an optional at position. For example, <code>shape-outside: ellipse(30% 50% at left);</code>.</p>
113+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales.</p>
114+
115+
<h2 class="primary-heading">polygon()</h2>
116+
<div class="shape-10"></div>
117+
<p>polygon() is the most complex. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box. The Firefox dev tools are unbelievably helpful for working with this shape. For example, <code>shape-outside: polygon(0 27px, 0 225px, 300px 300px);</code>.</p>
118+
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu.</p>
119+
</section>
120+
121+
122+
<section>
123+
<h2 class="primary-heading">using pseudo-elements</h2>
124+
<p class="shape-11">You don't have to create an actual <code>img</code> or <code>div</code> to float and apply the shape-outside property to. You <em>could</em> create a pseudo-element instead with <code>::before</code>. The main downside to this is that pseudo elements don't seem to work with the dev tools, so may not be as easy to fiddle around with but still a good option once your values are known.</p>
125+
</section>
126+
127+
<section>
128+
<h2 class="primary-heading">combining with clip-path</h2>
129+
<img src="clouds.jpg" class="shape-12">
130+
<p class="">The same basic shape values used for shape-outside can be used with clip-path. For example the image to the left has the properties: <code>shape-outside: ellipse(40% 50%); clip-path: ellipse(40% 50%);</code></p>
131+
</section>
132+
133+
</main>
134+
135+
<footer>
136+
</footer>
137+
138+
</body>
139+
</html>

0 commit comments

Comments
 (0)