An Interest In:
Web News this Week
- March 6, 2024
- March 5, 2024
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
Position Sticky With CSS Grid, Conditional Border Radius In CSS, Custom Scrollbars In CSS
CSS Blogs
Position Sticky With CSS Grid
Have I ever come across a case where the sticky position isnt working as expected with a child of a grid container? A few days ago, I was helping youtube in fixing that exact problem and wanted to finally write about it.
HTML__:
CSS__:
.wrapper {display: grid;grid-template-columns: 250px minmax(10px, 1fr);grid-gap: 1rem;
}
Conditional Border Radius In CSS
We have a card component with a border-radius of 8px. When the card doesnt have margin or is taking the full viewport width, we want to flip the border-radius to 0.
CSS__:
@media (min-width: 700px) {.card { border-radius: 8px; }
}
Custom Scrollbars In CSS
First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones.
CSS__:
.section::-webkit-scrollbar {
width: 10px;
}
CSS Scroll Snap
To create a scrolling container, here are the basic things that you will need:
Using the overflow with a value other than visible.A way to display the items next to each other inline.
HTML__:
Item 1
Item 2
Item 3
Item 4
Item 5
CSS__:
.section {
white-space: nowrap;
overflow-x: auto;
}
Original Link: https://dev.to/sarminakterdipty/position-sticky-with-css-grid-conditional-border-radius-in-css-custom-scrollbars-in-css-28ff
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To