CSS learnings!
Tags: css, codenewbie, frontend
Published: 2021-09-02 22:33:31

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3dj9xjzu873q5ospy3q.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6b17w8qo8rwk3zqw8ro.png)<figcaption>Above: Ellipsis - Bottom: Clip</figcaption>

### 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](https://codepen.io/tolentinoel/pen/zYzBEod) for examples!
{% codepen https://codepen.io/tolentinoel/pen/zYzBEod default-tab=html,result%}

*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;
```CSS
#img1 {
  width: 200px;
  height: 300px;
  object-fit: cover; // Object position will be more evident with object fit set to cover
  object-position: left;
}
```

![object-position left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy15pdbf2dpochmeubxa.png)
***

Sample using percentage value;
```CSS
#img2 {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 100%;
}
```
![object-position at 100%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtwrisqmpcmyjiuaa46w.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79t9rgsnjn0w69hws70w.png)<figcaption>Middle</figcaption>
![top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43juje8l2g7x7sv1bqmf.png)<figcaption>Top</figcaption>
![baseline or bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnksylq2f0dkjsh9u4ow.png)<figcaption>Baseline or Bottom</figcaption>
![length](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bldzboxjl4td7h937ia.png)<figcaption>Length (10px)</figcaption>

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](https://css-tricks.com/)
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS)