Module 5

CSS Shapes

house icon

Habitat for Humanity or Habitat , is an international, non-governmental, and nonprofit organization, which was founded in 1976. Habitat for Humanity operates in all 50 U.S. states and more than 70 countries.

The mission statement of Habitat for Humanity is "Seeking to put God's love into action, Habitat for Humanity brings people together to build homes, communities and hope". Homes are built using volunteer labor and Habitat makes no profit on the sales.

Problem Description

Create a web page and use the house.png. You will create at least two paragraphs (I'm not concerned with the content of the paragraphs) that will be written beside the house.png and following the shape of that image - see a result in the image below:

image of house with side text

Solution

Wrapping Around Floated Elements

When an element has CSS property float, following HTML content will wrap around the bounding-box of the element. The bounding-box is a rectangle, so the side edges of the wrapped content is along vertical lines.

There new CSS properties that can give you control the shape that the content will wrap around. The latest specifcations of the CSS Shape Module was updated in September 2020.

  • shape-outside: used to define the shape to wrap around. There are several geomtrical shapes (circle, ellipse, polygon). It can also be a URL to an image. When it is an image, the alpha-channel (transparancy value) of each pixel is extracted to compute the outline.
  • shape-threshold: allows you to specify the value of the alpha-channel that is the boundary of filled and empty pixels to calculate the shape.
  • shape-margin: used to increase the boundary of the shape, so content such as text does not touch the shape boundary.
  • shape-inside: the opposite of shape-outside, in that it defines an exclusion area for the wrapping boundary.
  • shape-padding: similary to shape-margin, when using shape-inside. The exclusion area is increased by the shape-padding.

HTML

The HTML required is relatively simple. Let's put everything in a <div> container, so we can adjust it's margins and padding. Inside the container is an <img>, followed by 2 paragraphs.

  <div class="clearfix house-container">
    <img src="images/house.png" alt="house icon" class="house">
    <p>
      <a href="https://en.wikipedia.org/wiki/Habitat_for_Humanity" target="_blank">
        Habitat for Humanity or Habitat
      </a>,
      is an international, non-governmental, and nonprofit organization, which was founded in 1976.
      Habitat for Humanity operates in all 50 U.S. states and more than 70 countries.
    </p>
    <p>
      The mission statement of Habitat for Humanity is "Seeking to put God's love into
      action, Habitat for Humanity brings people together to build homes, communities
      and hope". Homes are built using volunteer labor and Habitat makes no profit on the sales.
    </p>
  </div>

CSS

The image will be floated to the left. Then we will use the shape-outside property to define the url of the image. Let's set the shape-image-threshold property to 0.5 (50% transprancy threshold), and a shape-margin to 2em.

Some browsers still do not support the shape-outside property, so we need to wrap that rule a @supports clause. According to CanIUse, all browsers that support shape-outside also support shape-image-threshold and shape-margin.

  .house {
    float: left;
  }

  @supports(shape-outside: url(../images/house.png)) {
    .house {
      shape-outside: url(../images/house.png);
      shape-image-threshold: 0.5;
      shape-margin: 2em;
    }
  }

  .house-container p {
    padding: 0.5em 1em;
  }

  .clearfix {
    overflow: auto;
  }