Category: CSS

Sometimes, we want to apply CSS to half of a character.

In this article, we’ll look at how to apply CSS to half of a character.

How to apply CSS to half of a character?

To apply CSS to half of a character, we set the background.

For instance, we write

h1 {
  display: inline-block;
  margin: 0;
  line-height: 1em;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%, #1e5799 50%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

to set the background property to set the background to a gradient for the h1 element.

Then we set background-clip to text to make the background apply to the text.

Conclusion

To apply CSS to half of a character, we set the background.

Sometimes, we want to add an unordered list without any bullets with CSS.

In this article, we’ll look at how to add an unordered list without any bullets with CSS.

How to add an unordered list without any bullets with CSS?

To add an unordered list without any bullets with CSS, we set the list-style-type property.

For instance, we write

ul {
  list-style-type: none;
}

to remove the bullets from ul with list-style-type: none;.

Conclusion

To add an unordered list without any bullets with CSS, we set the list-style-type property.

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.

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.

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.