3 CSS Tips that have helped me recently

May 21, 2015 Back to home

Hey all! I have collected a few CSS tips and tricks over the past few weeks and want to share them. In keeping up with my blog, posting every two weeks, I am actually learning a lot about writing and keeping a blog plan. So here it is round 2 of my month attempt of blogging.

1) Center an image vertically

It was pretty challenging to do this successfully without skewing the image.

The key to keeping the skew is simple: Let one dimension auto size so the image maintains its perspective. The key to centering the image is to have a container of a fixed size, an element (he used a span) of 100% inside, and then the image you want centered adjacent to that element.

Here is the StackOverflow article that I found: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

Here is the jsFiddle from Kizu http://jsfiddle.net/kizu/4RPFa/4570/

2) Crop an image using CSS

This is pretty fun to play with and see what you want to do with an image

You set the container to the correct size and overflow: hidden. Then you put your image inside with a 100% width OR height. You can then position the image (position relative) to where you want it to be focused on in the container. This does NOT re-size an image, it simply crops it. There is some scaling when you go bigger than the original image.

You can see my examples here: http://jsfiddle.net/jmann/4ovuooky/

The width example is larger than the image, so you can see some degradation there.

3) Positioning Tips Absolute/Relative

Did you know that if your container is absolute, then you can make your inner elements relative to the container? (Really helpful when positioning inside another element)

Final Note:

If you are creating html emails, 1) understand that every email client is potentially different! 2) Positioning and Float probably will not work. 3) Read this: https://www.campaignmonitor.com/css/ and create beautiful table layouts for you email.

OOOH, I think I have a new topic... HTML in Email, the trials and tribulations of tables.

Thanks for stopping by!