Clip Your Images with CSS clip-path

I used to try to clip images using the CSS clip property, but that was so difficult that I typically gave up and got out my image editor. What is the point of spending four hours trying to force an image to clip in CSS when I can do the same thing in Acorn in less than five minutes? But now that clip is deprecated, I don’t have to use it anymore. But better yet, the new CSS  <strong>clip-path</strong> property works so much better!

The clip-path property includes features like:

  • You can apply it to any element, not just absolutely positioned ones
  • You can use SVG to define the clipping path
  • It actually works!

. . .

A Busy Week

I spent the last week working on two projects: the “Learning HTML and CSS Livelessons” and editing the Sams Teach Yourself Bootstrap in 24 Hours book.

It was both one of the most fun weeks I’ve ever spent and also one of the scariest (at least at first). I have never been in front of a camera before, and I spent 6-8 hours a day on Monday through Wednesday right there. Luckily Pete and his dog Shorty were there to put me at ease. It ended up being a lot of fun.

Now, of course, I have a bunch more work to both catch up from being gone for several days and some update work to get the website ready for the videos. This LiveLessons series is intended to help people learn enough HTML and CSS to get a website up and running and looking good. I’m hoping that if this project does well, I can do another on something like CSS to go into more depth on how to use CSS and style really fancy pages.

Sams Teach Yourself Bootstrap in 24 Hours
Sams Teach Yourself Bootstrap in 24 Hours

And I also got the first 50% of the technical and copy edits for the Bootstrap book. And I got the second 50% right after I got back. I’m hoping the second half is fairly error free (as far as we have found) like the first half. And as always, any errors that make it into the final book are my fault not my copy editor or tech editor (thanks Jon!)

One of the biggest challenges of writing a book about Bootstrap is that I find myself wanting to convert every site I look at to Bootstrap. I finally upgraded this site to Bootstrap just this week. And I’ve converted a couple of other sites I manage as well. But let me tell you, even as the author of the book, my clients don’t all want to do a huge redesign just because Bootstrap rocks. Oh well, their loss.

What’s Next?

My next project is finishing up a book on web publishing. That should be fun, and hopefully pretty quick. After that, who knows? If you have any ideas, let me know!


Using the CSS Float Property

Web Page Layouts are Easy with the CSS Float Property

There are many ways to create great layouts on a web page, but one of my favorite methods is to use the float CSS style property. But in order to lay out your pages with float you need to understand the float property.

CSS float Syntax

This property defines whether and how a box element should float.

Default: none

Inherited: no

Applies to: all elements

CSS level: CSS1

ValueDescription
noneThe element is not floated. It will display on the page where it occurs in the HTML. This is the default value.
inheritThe element inherits the float property from its parent element.
leftThe element floats to the left.
rightThe element floats to the right.
initialThe element is set to its initial default value for float.

What Can You Float and How Do They float?

While you can apply the float property to all elements, it only really affects block-level elements. These are elements that create blocks of text or other content. These are elements like: <p>, <blockquote>, and <table>. The one inline element that you can reliably float is the <img> element.

When you build an HTML document, the elements are displayed in what is called the normal flow. This means that they are placed in the web browser in the order they appear in the HTML. If they have no defined dimensions, like a paragraph of text, then the element takes up the full width of the browser and as much height as it needs. Elements with dimensions, like images, are placed in the flow beside the preceding element if there is enough room. If not, they are placed below. Browsers, by default, avoid adding horizontal scroll bars unless there is no other way to get the content on the web page.

When you place the float property around an element, it is removed from the normal flow and positioned to the far right (float: right;) or far left (float: left;) of the containing element. All content after the floated element is still in normal flow and flows around the floated element.

How to Float an Image

To float an image to the left, add the following CSS to your style sheet:

And then add the class left to the image:

soap-bubble-61246_640Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

To float an image to the right, add the following CSS:

And then add the class right to the image:

soap-bubble-61246_640Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

Turn Off CSS float With the clear Property

The clear propery works with the float property to turn off the float. Once you clear a float on an element following the floated element, the content will start in normal flow directly below the floated element.

For example, above you see a bubble image with two paragraphs of text beside them. If you add the clear: both; style to the second paragraph, that will move that paragraph to below the image, rather than beside it.

soap-bubble-61246_640Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

Using float for Layout

It’s easy to use the float property for your layouts with the following steps:

  1. Design the layout—I prefer to draw out my layouts on paper, but you can use a graphics program or just do it in your head.
  2. Draw boxes around the main areas of your page. Consider things like your header, footer, main content, and aside content.
  3. Write your HTML using sectioning elements like <section>, <article>, and <header> to define the different areas.
  4. Give every element a width, in either percentages or pixels.
  5. Add CSS float properties and clear properties to put the elements in the correct spaces.

If you want to create two columns, you simply float the first column to the left and the second to the right. If you want to create three columns, you should surround the first two columns in another <div> element. Then treat those two columns as a two column layout, and the <div> and the third column as another two column layout. For example:

Don’t Be Afraid of the CSS float Property

The CSS float property is a very useful property. The best way to get comfortable with using it is to try it out. You can use it in most blog software by simply adding style="float: right;" to your images (in HTML view). Then all your text will flow around that image on the left side. Once you’re comfortable adding it to images, try adding it to blocks of text or other elements and see what happens.

All the CSS You Need to Know (not as much as you think) – Infographic

All the CSS You Need to Know
All the CSS You Need to Know
(not as much as you think!)

Don’t worry if you don’t feel confident with CSS. There are really only a few properties you need to know out of the more than 200 that are available. The first 23 properties are all the CSS you need to know to style most web designs. The second group of 24 properties gives you the more advanced CSS you need to know to get fancier.

If you liked this infographic, please Pin it, share it with your friends, and let other people know about it. And don’t hesitate to comment on what you think even if you disagree. What properties do you think are the CSS you need to know?