5.3: Shape-outside
- Page ID
- 26499
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
Shape-outside
There are several properties that can be set as a part of CSS Shapes 1, like shape-image-threshold and shape-margin , however, we'll just be using shape-outside in the interest of time. Feel free to peruse the links above for more information on those topics.
"The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes." 1
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
So, basically, shape-outside will wrap text around the outside of a shape. Four shapes can be called upon with the shape-outside property: circle(), ellipse(), inset(), polygon().1
Four shapes can be called upon with the shape-outside property: circle(), ellipse(), inset(), polygon().1
So, using our syntax from above, it would look something like this in practice. Here is the syntax:
shape-outside: property-name(values);
To get the shape to work correctly, you'll also need to implement a float on the element and the element must have a width and a height set on it. Keep that in mind!
Remember the example of the spinning flower from Chapter 5.2: Introduction to CSS Shapes? Take a moment and download the code for that demonstration, please. Unfortunately, this platform is a bit wonky when it comes to directly downloading a zip file, so, you'll have to do this on your own. Here is the link. Copy and paste it into your browser.
http://www.rosemarybarker.net/web_23...hapes_demo.zip
In the text editor of your choice, open up both the index.html and master.css files from my CSS Shapes Code Demo above. Look through both the HTML and CSS files. In the HTML file on line 10, notice that I've given the flower image a class of "myImage."
Now, switch over to the master.css file. Notice this code on starting on line 5.
.myImage {
width: 200px; /*required*/
height: auto; /*required*/
float: left; /*required*/
shape-outside: circle(55%);
margin: 20px;
}
Please read the following article and follow along with the instructor.
https://tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes/
The final thing to do is to watch the following video on today's topic:
Footnotes
1. “Shape-Outside.” Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/.../shape-outside.