CSS learnings!

I recently learned CSS things this week! It revolves around CSS due to certification exercises I have been taking. These are just a few but I hope someone can learn from this like how I did! So, here are some CSS attributes I've learned recently that you can try on you projects!

text-overflow

If you're familiar with overflow, this does the same principle but specifically for text elements.

Text-overflow can be set into these values:

• ellipsis

  • In order for ellipsis to take effect, you need to set the text element's width, white-space: hidden and overflow: hidden.

• clip

  • This is basically the same way as how the overflow : hidden works. Only thing is, text-overflow would only occur if overflow has been set.

    

    Above: Ellipsis - Bottom: Clip

object-fit

I learned how to crop an image! More common solution to this is to use the photo as a background-image and apply adjustments from there but object-fit was said to be something more modern so I gave it a try.

Object-fit values can be as follows:

• fill
• cover
• contain
• none
• scale-down

Check out this CodePen for examples!

*object-position - Another attribute in line with object-fit. Since using object-fit will crop the image, this will help you adjust to change the point of focus of the element.
Values can be positions (top, bottom, left & right) or length/percentages.

Sample with using position value;

#img1 {
  width: 200px;
  height: 300px;
  object-fit: cover; // Object position will be more evident with object fit set to cover
  object-position: left;
}

---

Sample using percentage value;

#img2 {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 100%;
}

Same photo different results! Neat right?

---

vertical-align

For this one to work, the elements we need aligned need to be set as display: inline or display: inline-block. Then we align the elements altogether with vertical-align.

Common values can be as follows:

• middle
• baseline/bottom
• top
• length - length from it's parent's baseline.

  

  Middle

  

  Top

  

  Baseline or Bottom

  

  Length (10px)

There are also, text-top, text-bottom, super & sub but it's quite similar to the ones above it just follows it's parent's text element's alignment.

I hope this blog got you curious to use these CSS attributes on your next project!

Until the next!!

Reference:

• CSS Tricks
• MDN Web Docs