DEV Community

Cover image for CSS learnings!
Ellaine Tolentino
Ellaine Tolentino

Posted on • Updated on

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. Sample ellipsis
  • 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.
      Comparison of ellipsis & clip
      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;
}
Enter fullscreen mode Exit fullscreen mode

object-position left


Sample using percentage value;

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

object-position at 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
    Middle
    top
    Top
    baseline or bottom
    Baseline or Bottom
    length
    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:

Discussion (0)