Also Transparent Textures (https://www.transparenttextures.com/) – disclaimer, I made it — which is basically Subtle Patterns with a colorwheel that allows the backgrounds to be any color.
Example site ( https://bansal.io/pattern-css ) misrendered in Vivaldi, which brings me back PTSD grade memories about the browser war and css bugs, implementation-diferences, etc. So let me ask, how is it possible on the almost completely monoculturized web, where is no Presto and almost no Trident anymore, where almost every browser is kind of chrome-isotope. So let me ask, maybe a web developer cn answer me: what is missing to be able to provide complete support forthe main browsers? Is there still prefixed css tags? OR is it so hard to handle differences between browsers/browser-versions? Doesn't CSS have any graceful fallback functionality for older browsers? Why is this phenomen exists today?
As a user, I'm all for browser choice in the abstract: it sounds like a good thing, but it doesn't often deliver me tangible benefits in usability, performance, etc. (And, to wit, the only real exceptions are when large organizations bankroll extensive browser development teams.)
As a developer: even with several browsers converging on the same renderer and JS runtime, it is _still untrue_ that all things work in all browsers [1] [2]. HTML, CSS, and JS continue to evolve as standards, and mobile browsers complicate the compatibility picture.
This may be hard to hear, but: right now, polyculture delivers largely abstract ideological benefits to a small subset of users who care about these things. Monoculture delivers real, tangible benefits in usability, performance, and accessibility to users, plus massive gains in productivity to developers and tech companies.
On top of that: few of the privacy / security features in modern browsers are at the rendering or JS runtime level - they often have more to do with defeating cross-domain cookie trackers, execution sandboxes around JS, a whole slew of security headers at the HTTP level, and value-added features like password managers and private browsing sandboxes. IMHO, centralization of the HTML / CSS / JS part is a net win for privacy / security, as it makes it possible to focus efforts on these sorts of features instead of on the fine details of basic rendering and execution.
I wish browsers were more modular so you could switch the underlying engines, sandboxes, and stuff. Don't want js? Remove the js engine. Don't want css? Remove that part. Don't want webrtc? Remove that. Compile your own flavor bloat free.
Among HCI researchers and UX practitioners, it's well-understood [1] [2] that consistency and standardization in interfaces often improves user experience by helping users lean on pre-existing mental models.
(That said, the question of when to lean on existing convention vs. establish a new one is a difficult one.)
The website https://bansal.io/pattern-css was clearly produced on a platform with overlay scrollbars. There are a number of horizontal scrollbars that shouldn’t be there.
.overflow-scroll {
overflow: scroll !important;
}
`overflow: scroll` is pretty much never what you want: it draws scrollbars whether needed or not. You want `overflow: auto` instead, which doesn’t draw scrollbars unless necessary.
.w-100vw {
width: 100vw !important;
}
Viewport units are fundamentally broken by design. Don’t ever use them for layout. In fact I recommend against using them in any situation at all. In this case, use `width: 100%` or just nothing, and it’ll yield the desired results.
The currently-implemented viewport units are just fundamentally bad. And I’ve only been talking about the badness of vw; vh has further troubles of its own on mobile.
Worse than that. Different browsers and different platforms handle scroll bars differently. Some are hidden until hovered and some have width and some don't some only have width when hovered. It's really awful if you're trying to do something with several scrolling columns
This is pretty cool. It’s reminds me of https://css-doodle.com/, which is a native web component with the same general goal. Iirc, it uses canvas under the hood.
If you don't need to install stuff from npm and prefer to hack your own, here's a nice list of CSS patterns to get you started: https://leaverou.github.io/css3patterns/
I really like this, but it would be great if the example site didn't use that scrolling. I wanted to click between examples and I browsed away because it took too long. Bookmarked for my next project though.
This is very cool. I'd like to include this library in the website builder we've built for Webase [1]. We currently have a color background and an image background but these patterns would make it easy for non-coders to add some panache!
Thanks for the patterns, they look great! Some have commented about the usability of the sidebar / js autoscroll, which could be improved—but it is functional and am I gonna use this as my homepage or am I gonna configure this into my project one time when I need it?! ... jeesh, lighten up.
You could reduce the distributed CSS version even more if you used the gradient definition only once, it's always the same.
With class composition it's easy: But if you added a copy-paste ready snippet to the landing page, that would be great too.