CSS is fun and cool and I like it.
Article

Practical CSS Scroll Snapping

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one:… Read article

Link

Scroll to the Future

This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView() and the scroll-behavior CSS property.

My favorite part of all though? It has to be this bit:

In the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of “cross-browser compatibility” is

Read article
user avatar
Shared by
Robin Rendle
Link

Carousels Don’t Have to be Complicated

Over on the MediaTemple blog, I show you how you can make a pretty decent little carousel with just a few lines of code. Here's the entire premise:

Every time a carousel is mentioned in a blog post, it’s a requirement to mention that… say it with me now:

You probably shouldn’t use a carousel.

Jared Smith made a microsite just for it, with research and rhetoric supporting the idea that you shouldn’t use them. Most of that information focuses

Read article
user avatar
Shared by
Chris Coyier
Article

Introducing CSS Scroll Snap Points

Before this new CSS I'm about to introduce existed, locking an element into the viewport on scroll required rigging up some JavaScript. As you may know, JavaScript has a well-earned reputation to be tricky when paired with scrolling behavior.

The new CSS Scroll Snap Points spec promises to help, allowing for this kind of behavior using very few lines of CSS.

As happens with very new web tech, this spec has changed over time. There is "old" and "new" properties … Read article

Link

Thinking Ahead: CSS Scroll Snap Points

Guil Hernandez introduces how easy sliders (with nice UX) will be with very simple HTML and CSS' brand new scroll-snap-* properties. CSS is moving fairly fast these days, with features like this moving from "never heard of it" to:

... browser support for CSS scroll snap points is limited to IE10+ and Firefox 39+. But it looks like Safari 9 will include support, and you can enable scroll snap points in Chrome Canary.

before you know it. The Chrome support … Read article

user avatar
Shared by
Chris Coyier
Link

Native CSS Scroll Snap Points

The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.

Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior... Can you imagine how easy would be creating such effects using CSS only?

The full Read article

user avatar
Shared by
Marie Mosley
Article

Creating responsive, touch-friendly carousels with Flickity

By now, any article about carousels should come with the disclaimer: You may not need a carousel. Carousels are easily abused. Kyle Peatt has more details on the carousel controversy.

Part of the blame can be put on the user experience of carousel plugins themselves. Scrolling through a carousel is less satisfying and more awkward that simply scrolling down a page. Basically, you can't flick through them. Third-party libraries should at least be as useful as native behavior.

On top … Read article

icon-link icon-logo-star icon-search icon-star