Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 25, 2021 06:20 am GMT

Position Sticky With CSS Grid, Conditional Border Radius In CSS, Custom Scrollbars In CSS

Image description

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To