3 CSS Properties I Haven’t Used...Until Today

background-origin     https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin


I thought this was a pretty cool CSS property that I have never heard of or used. background-origin allows you to specify how you want the background image to appear in your webpage. You have to use it following background-image, to determine how it will appear. For example, you can use background-origin: padding box; and it will only extend the background image to the edge of the padding that you designated. I also like that you can use background-origin: content-box; that is one I'll have to play with. Not sure exactly what this is going to do. It appears that you could put it inside for example, one column of a three column webpage and it would only be a background image for that one column. If that's the case, I love this.

border-image     https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

border-image is a pretty cool CSS property. It allows you to use any image and have it tiled, and or repeated to create a border around an element. So you could find a picture of a small ghost on google, and use border-image to create a repeating small ghost as a border around a div talking about a halloween party. I think this one is pretty creative, and I'm really into the visual aspects of CSS properties.

inherit  https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

 Inherit is pretty cool and I know you've talked about it before but maybe it didn't really click. It reminds me of nth-child... or that type of CSS property that is almost like format painter in Excel. That's where my mind goes with it anyways. Inherit is used to specify that a specific html tag's design be based off of it's parent element and not off of new CSS rules you are putting in. For example, you use a specific color font in all your paragraphs in the footer, but you create a CSS rule for <p> in the body portion of your CSS, you can then state that you want #footer p to color: inherit.. kinda cool. Although as I'm typing this, I'm wondering how much time that would save you. Probably would be great for more complex CSS rules. I thought this was cool anyways.