Category: CSS

Sometimes, we want to enable click-through div to underlying elements with CSS

In this artricle, we’ll look at how to enable click-through div to underlying elements with CSS.

How to enable click-through div to underlying elements with CSS?

To enable click-through div to underlying elements with CSS, we disable clicks on the element.

For instance, we write

div {
  pointer-events: none;
  background: url("your_transparent.png");
}

to disable clicks on the div to enable click-through on its underlying elements.

Conclusion

To enable click-through div to underlying elements with CSS, we disable clicks on the element.

Sometimes, we want to align checkboxes and their labels consistently cross-browsers with CSS.

In this article, we’ll look at how to align checkboxes and their labels consistently cross-browsers with CSS.

How to align checkboxes and their labels consistently cross-browsers with CSS?

To align checkboxes and their labels consistently cross-browsers with CSS, we add vertical-align property.

For instance, we write

input {
  vertical-align: -2px;
}

to adjust the vertical position of the input with vertical-align: -2px;.

Conclusion

To align checkboxes and their labels consistently cross-browsers with CSS, we add vertical-align property.

Sometimes, we want to add transitions on the CSS display property.

In this article, we’ll look at how to add transitions on the CSS display property.

How to add transitions on the CSS display property?

To add transitions on the CSS display property, we set the transition property.

For instance, we write

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

to add a div with a ul element.

Then we write

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

to add the transition property toi transition the visibility property from hidden to visible and vice versa when hover and move our mouse away from the ul respectively.

Conclusion

To add transitions on the CSS display property, we set the transition property.

Sometimes, we want to vertically align an image inside a div with CSS.

In this article, we’ll look at how to vertically align an image inside a div with CSS.

How to vertically align an image inside a div with CSS?

To vertically align an image inside a div with CSS, we use flexbox.

For instance, we write

<div class="parent">
  <img class="child" src="https://picsum.photos/300/300" />
</div>

to add a div with an img element inside.

Then we write

.parent {
  align-items: center;
  background: red;
  display: flex;
  height: 250px;
  width: 250px;
}

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

Then we vertically center the img element with align-items: center;.

Conclusion

To vertically align an image inside a div with CSS, we use flexbox.

Sometimes, we want to hide scroll bar, but while still being able to scroll with CSS.

In this article, we’ll look at how to hide scroll bar, but while still being able to scroll with CSS.

How to hide scroll bar, but while still being able to scroll with CSS?

To hide scroll bar, but while still being able to scroll with CSS, we set the width of the scrollbar.

For instance, we write

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #ff0000;
}

to set the scrollbar width to 0 and make it transparent with

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

Then we change the scrollbar button background with background: #ff0000;

Conclusion

To hide scroll bar, but while still being able to scroll with CSS, we set the width of the scrollbar.