> Easily center anything, horizontally and vertically, with 3 lines of CSS<p>This can actually be done with 2 lines now!<p><pre><code> .center {
display: grid;
place-items: center;
}</code></pre>
I'd love to see a "Can-I-use" browser extension when looking at articles like this.<p>Occasionally a project requires IE 10/11 support (state government work) and it's such a shame to get excited about an impossible CSS approach.
> * <i>Cursors</i> Did you know that you can use your own image, or even emoji as a cursor?<p>This was the very first bit of CSS I ever learned thanks to my first internet friend, Tom.
The tooltip example sounds neat, but that approach will run into problems when your tooltips need to appear near the edges of the viewport.<p>Libraries like popper.js (no affiliation) exist to solve this specific problem.
I learned something. But would have been better (easier) if the snippets of code only included the css in question and not fonts/backgrounds etc. I had to read each a few times to find the relevant bits.
Okay, the ":target" psuedo class just blew my mind. Not necessarily for modals (which I don't particularly like) but I can think of a lot of other uses. Edit - Apparently it's been around for several years. Not sure how I missed this.
HTML tip: provide an ID to headers so you can link to them directly! :-) Also, provide an anchor so users can just copy the link and not have to inspect the html or use an extension to link to your headers.
This is a nice list of things that are actually useful and surprisingly straightforward to do.<p>Considering how many people (myself included) consider CSS a veritable minefield, I love seeing examples like this.
Scrollbar styling is arguably a lot easier using the standard CSS-scrollbars-level-1[1]<p><pre><code> scrollbar-color: rebeccapurple gold;
scrollbar-width: thin;
</code></pre>
As a bonus it works in firefox.<p>1: <a href="https://drafts.csswg.org/css-scrollbars-1/" rel="nofollow">https://drafts.csswg.org/css-scrollbars-1/</a>
I miss the push-button and border-triangle trick;)<p><a href="https://pilabor.com/blog/tricks-you-might-not-know/html-and-css-tricks/#3d-button-push-effect-for-links" rel="nofollow">https://pilabor.com/blog/tricks-you-might-not-know/html-and-...</a>
Cool stuff, but wish there was a disclaimer saying many of the things here are Chrome-only. The target audience for this might not consider browser compatibility from the get-go and have to re-think their UI later.
Half these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll is unpredictable and disorienting.
Good list, I did not know that text image mask effects were so simple. In fact half of these examples covered things I had no idea about.<p>The custom scrollbars example did not work on Firefox on OSX. all the boxes had identical scrollbars, the OS default.
What a great post, I learned a lot!<p>I really liked the ones about truncating text - which also taught me what "ellipsis" means. It is the dots in this example:<p>This text is trun...
One trick that I'm pretty sure I invented is useful in the case where you may be implementing some sort of Material Design palette: you want to use shades of a colour without manually defining them but are losing saturation if you simply use ie. `rgba(255, 255, 255, 0.2)` -- just add `backdrop-filter: saturate(120%)`. This forces the browser renderer to over-saturate the white by mixing in the background colour. Unfortunately Firefox doesn't recognize this CSS property yet but it works fine in WebKit et al.
Some good tips in there, thanks for sharing.<p>For anyone looking to really learn CSS for layout the resource I recommend is always <a href="https://every-layout.dev" rel="nofollow">https://every-layout.dev</a><p>Heydon Pickering and Andy Bell know what they’re talking about, and they explain the “how and why”