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

So Excited about image-set() Notation!

Fri, 24 Jun 2016 19:45:31 +0000

As I’ve been writing my next book on forgotten features of CSS, I have been coming across some really cool things. It’s been hard to keep up the writing as I get so excited about actually using the features that CSS provides. Today I was working on image-set() and in doing my testing I realized that my dual monitor setup was well equipped for testing this tool.

What is `Image-Set()`?

You’re probably asking what the heck image-set() even is as it isn’t used very often and most designers don’t know much about it. In a nutshell: it is a CSS notation that allows you to define multiple image sources based on the resolution of those sources. The most common usage is for providing a Retina image and a non-Retina image. This way Retina devices see a crisp clean image, and non-Retina devices can show an image that is (hopefully) smaller and better optimized for their viewing.

How to Use `Image-Set()`

You use the image-set() notation where ever you would use images in your CSS. It has the format:

image-set( imageURL resolution,
           imageURL resolution )

Add as many images as you need, separated by commas.

The imageURL is written how you normally write URLs in CSS url('image.png') and the resolution can be written as 1x for standard resolution, 2x for Retina and other high-resolution displays, and even specific DPI like 600dpi for a 600 dots-per-inch printer version of the image.

`Image-Set()` Best Practices

To make your image-set() images work best you should always do the following:

Set a default image first. Browsers that don’t support image-set() will load that and ignore the other style properties
background-image: url('image.png');
Use browser prefixes
-webkit-image-set -moz-image-set -o-image-set -ms-image-set
Place the standard property last
image-set( url 1x, url2 2x )

Example of `Image-Set()`

Here is a video I did demonstrating the image-set() notation. And below the video is the source CSS I used.

https://youtu.be/_G1ZtlQ-nNs

       #box {
         background-image: url(image-set-example-none.png);
         background-image: -webkit-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         background-image: -moz-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         background-image: -o-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         background-image: -ms-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         width:800px;
         height:800px;
       }

To create the shape, I included a div with the ID box in the HTML.

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!

CSS on HTML5 in 24 Hours

Clip Your Images with CSS clip-path

Watch My CSS Clip-Path Video

So Excited about image-set() Notation!

What is Image-Set()?

How to Use Image-Set()

Image-Set() Best Practices