I just love to visit many websites on Google. I daily see very cool designs of website and see their source code (ctrl+shit+i). After seeing the source code of many websites I saw they use CSS differently for styling, not like others. So here in this post, I'll be illustrating you 3 CSS tricks you can also try for your website/portfolio.

1. CSS Centering Elements

Web developers who are learning currently have a lot of problem at the start in centering elements. After seeing many tutorials they learn to center by the FlexBox Model. This is not a trick. Just understanding or using it better. Below is an example of centering and aligning element's child right in the parent's center.

<div style="display:flex;justify-content:center;align-items:center;">
  <div></div>
</div>

Check out howtocenterincss.com You will learn more in-depth there for centering different elements.

2. CSS support checks

feature-checks on the JS side aren't really that complex, things become slightly complex when it comes to CSS. Here is the @supports CSS rule - The best solution for this.

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    display: block;
  }
}

Check out caniuse.com/#feat=css-featurequeries to see @supports is supported or not.

3. Zoom on hover

When you create an image gallery, you want to mark somehow the hovered image very often. The great idea is to add zoom on hover to accentuate the hovered photo.

.images {
  display: flex;
  width: 100vw;
  juftify-content: center;
  align-items: center;
}

img {
  width: 400px;
}

img:hover {
  transform: scale(1.3);
}
// This is the code you can add this code with your uses.

---

I'm done writing for CSS tricks hope you liked it. Thanks for reading. 😁