3 simple CSS hacks

After building websites for around 10 years professionally I find myself using these almost every time I build a site.

1. Object-fit

Images. Always a pain in the ass. Never in the same dimensions. Stretched vertically or horizontally. Sollution? object-fit. Simply add object-fit to your images and see the magic happen. 

.my-image{
   width: 100%;
   object-fit: cover;
   height: 70vh;
}

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

2. Transition All

While you can do really fun and advanced things with both CSS and JavaScript, transition: all is a simple way to make things smooth.

Just add transition: all 0.3s ease; to your div and your hover effect will ease in. Like this:

div{
   height: 200px;
   width: 350px;
   background-color: tomato;
   border-radius: 10px;
   transition: all 0.3s ease;
}
div:hover {
   background-color: yellow;
}

3. Scroll Behavior Smooth

Anchor tags makes it possible to link to div with an id. <a href=”#news-section” >See lates news</a> will jump straight to that div. On one-pagers where the content is stacked below each other this is quite common. But by default the browser will jump straight to that content.
By adding scroll-bahavior: smooth to your html tag your anchor-link will scroll smoothly down to that content. So easy, and so smooth:)

The Markup:

<html>
  <section id="top-section">
    <a href="#third-section">Click to scroll!</a>
  </section>
  <section id="first-section">
  </section>
  <section id="second-section">
  </section>
  <section id="third-section">
  </section>
</html>

The Css:

html{
  scroll-behavior: smooth;
}

See this Codepen for full example

Note: scroll-behavior is not supported by Safari. Se full list at CanIUse.com

Other posts:

Hide Folders and Files With Robots.txt

Adding Meta Tags to Next.js With Headless WordPress.