Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
CSS

How to give text or an image a transparent background using CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to give text or an image a transparent background using CSS

In this article, we’ll look at how to give text or an image a transparent background using CSS.

How to give text or an image a transparent background using CSS?

To give text or an image a transparent background using CSS, we set the background-color property.

For instance, we write

<p style="background-color: rgba(255, 0, 0, 0.5)">
  <span>Hello, World!</span>
</p>

to set the background-color to a rgba value.

The last value is the opacity.

Conclusion

To give text or an image a transparent background using CSS, we set the background-color property.

Categories
CSS

How to make a div fill the height of the remaining screen space with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to make a div fill the height of the remaining screen space with CSS

In this article, we’ll look at how to make a div fill the height of the remaining screen space with CSS.

How to make a div fill the height of the remaining screen space with CSS?

To make a div fill the height of the remaining screen space with CSS, we use flexbox.

For instance, we write

<body>
  <div>header</div>
  <div class="content"></div>
</body>

to add the body element with some divs.

Then we write

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

to make the body element a flex container with display: flex;.

We set the flex direction to vertical with flex-direction: column;.

Then we make the div with class content fill the remaining space with flex-grow: 1;.

Conclusion

To make a div fill the height of the remaining screen space with CSS, we use flexbox.

Categories
CSS

How to make a div 100% height of the browser window with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to make a div 100% height of the browser window with CSS

In this article, we’ll look at how to make a div 100% height of the browser window with CSS.

How to make a div 100% height of the browser window with CSS?

To make a div 100% height of the browser window with CSS, we set the height to 100vh.

For instance, we write

div {
  height: 100vh;
}

to make the div fill the screen with height: 100vh;.

Conclusion

To make a div 100% height of the browser window with CSS, we set the height to 100vh.

Categories
CSS

How to vertically center text with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to vertically center text with CSS.

In this article, we’ll look at how to vertically center text with CSS.

How to vertically center text with CSS?

To vertically center text with CSS, we use flexbox.

For instance, we write

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

to make the div a flex container with display: flex;.

And then we center its content horizontally with justify-content: center;.

And we center its content vertically with align-items: center;.

Conclusion

To vertically center text with CSS, we use flexbox.

Categories
CSS

How to transition height: 0; to height: auto; using CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to transition height: 0; to height: auto; using CSS.

In this article, w’ell look at how to transition height: 0; to height: auto; using CSS.

How to transition height: 0; to height: auto; using CSS?

To transition height: 0; to height: auto; using CSS, we set the max-height.

For instance, we write

<div id="menu">
  <a>hover me</a>
  <ul id="list">
    <!-- ... -->
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

to add a div with a ul.

Thenw we write

#menu #list {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

#menu:hover #list {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}

to set the max-height of the list.

And we set the transition property to the effect with the max-height applied at the end.

Conclusion

To transition height: 0; to height: auto; using CSS, we set the max-height.