Beginning CSS on HTML5 in 24 Hours

Clip Your Images with CSS clip-path

Sun, 10 Jul 2016 01:19:47 +0000

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 clip-path 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!

That last one is the kicker. Yes, I know the clip property worked too. But it was so hard to use that it might as well have not worked. As I mentioned above, I could spend hours just trying to get the image cropped the way I wanted it to. And I’m not talking about minor adjustments. I’m talking, I would attempt to clip the upper left corner, and the clip property would cut out something in the lower right. WTF?!?

So when I started playing with the CSS clip-path property I didn’t have high hopes. I figured at best it would be a little easier to use. Five minutes later I had clipped exactly the portion of the image I wanted, clipped it in a circle shape (not a rectangle!) and placed that circle on my web page.

CSS hooked me again!

So, since, like the image-set() notation, I thought this was super cool. I decided to create a video for you. The video covers how to create a rectangular clipping path for an image step-by-step. I also give you a tip about a site (Clippy CSS Clip Maker) that will help you create your own clipping paths.

Watch My CSS Clip-Path Video

https://youtu.be/U8GZSu_-FEA

A Busy Week

Mon, 31 Aug 2015 03:06:24 +0000

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.

[caption id=“attachment_1135” align=“alignleft” width=“150”] 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!

amzn_assoc_placement = “adunit0”; amzn_assoc_enable_interest_ads = “true”; amzn_assoc_tracking_id = “kyrnindesign-20”; amzn_assoc_ad_mode = “auto”; amzn_assoc_ad_type = “smart”; amzn_assoc_marketplace = “amazon”; amzn_assoc_region = “US”; amzn_assoc_linkid = “4e58e504a77bddbf022bf0fe2039d151”; amzn_assoc_emphasize_categories = “13900871,2238192011,1064954”;

Using the CSS Float Property

Fri, 05 Sep 2014 01:21:18 +0000

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

float: none | inherit | left | right | initial ;

Value

Description

none

The element is not floated. It will display on the page where it occurs in the HTML. This is the default value.

inherit

The element inherits the float property from its parent element.

left

The element floats to the left.

right

The element floats to the right.

initial

The 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:

img.left {
  float: left;
}

And then add the class left to the image:

<img src="mypicture.png" alt="my picture" class="left">

Lorem 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:

img.right {
  float: right;
}

And then add the class right to the image:

<img src="mypicture.png" alt="my picture" class="right">

Lorem 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.

<p>
<img src="mypicture.png" alt="my picture" class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.
</p>
<p style="clear: both;">
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. 
</p>

Lorem 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:

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.
Draw boxes around the main areas of your page. Consider things like your header, footer, main content, and aside content.
Write your HTML using sectioning elements like <section>, <article>, and <header> to define the different areas.
Give every element a width, in either percentages or pixels.
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:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three Column Layout</title>
    <style>
      #cols1and2 { float: left; width: 75%; }
      #col1 { float: left; width: 80%; 
      #col2 { float: right; }
      #col3 { float: right; width: 20%; }
    </style>
  </head>
  <body>
    <div id="cols1and2">
      <article id="col1">&nbsp;</article>
      <aside id="col2">&nbsp;</aside>
    </div>
    <section id="col3">&nbsp;</section>
  </body>
</html>

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

Tue, 05 Aug 2014 05:04:47 +0000

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.

Comments:

Cecily - Aug 2, 2014

Please sign me up for your newsletter

Jennifer Kyrnin - Aug 2, 2014

Thanks Cecily, I don’t feel comfortable signing up people for my newsletter because I want it to be completely your own choice whether you subscribe (although I hope everyone who does enjoys the free chapter!). You can fill out the form in the right column of any page on my site to be signed up. Or you can go to the sign up page here: https://www.html5in24hours.com/rwd-free/ either way will get you the free chapter for help planning your website and access to my newsletter. I hope that helps!

Beginning CSS on HTML5 in 24 Hours

Clip Your Images with CSS clip-path

Watch My CSS Clip-Path Video

A Busy Week

What’s Next?

Using the CSS Float Property

Web Page Layouts are Easy with the CSS Float Property

CSS float Syntax

What Can You Float and How Do They float?

How to Float an Image

Turn Off CSS float With the clear Property

Using float for Layout

Don’t Be Afraid of the CSS float Property

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

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?

Comments:

CSS `float` Syntax

Turn Off CSS `float` With the `clear` Property

Using `float` for Layout

Don’t Be Afraid of the CSS `float` Property