Collection of Useful CSS Snippets | Hacker News Reader

Collection of Useful CSS Snippets

atomiks.github.io

353 pointsmarinacalado47 comments

Most of them are oldies, but >goldies<.

Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors.

On the other hand I don't find myself using the clearfix ( actually I ditched floats for layouts, long time ago ), css triangles ( usually some unicode arrow or an image ), gradients / animations and shadows are out of the current trend ( everything is flat / material these days ).

came here to say the same. First few examples are about float and cleafix - I haven't faced those in years now!

Not sure I agree about the triangles and other shapes. background-img and linear-gradients allow for some nice solutions and avoid having to load or deal with an image.

Just for fund, check https://a.singlediv.com/ from Lynn Fisher, she draws some pretty awesome stuff mostly with linear-gradients :)

You can make sure the tooltip flips position to avoid going off the edge of the screen using just CSS?

I'm curious to know this too. A responsive "pull-right" that sends an element to the right hand screen edge no matter the screen size, without having it shift onto the line below.

I'm sure it can be done if you create enough media selectors for every common resolution but outside of that...

You can position the tooltip on the left, right, top, bottom in the markup with a class name. This way if the tooltip is in the header you can use e.g. `tooltip-bottom`.

Having 10kb tooltip library for doing this automatically is a bit of an overkill for me [1].

1 : https://atomiks.github.io/tippyjs/

>Having 10kb tooltip library for doing this automatically is a bit of an overkill for me

Of course, but I hardly see how that's comparable to writing a React class "ToolTip" which is smart enough to know where the side of the screen is, and comes with the ability to use JS.

> Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors.

Unless you want to show a tooltip in a container that has `overflow: hidden`, since it will then clip the tooltip as well. You need to use JS in that case and put the tooltip directly in body, then position it absolutely.

Not really overflow: hidden. Just position: relative. Take look at Balloon.css

1: https://kazzkiq.github.io/balloon.css/

EDIT: Sorry, now I read your comment. Yeah that's true, you will have to make some exception with your container in this case. But this sounds like an edge case to me.

Gradients are coming back. Its a contrast to the flat. I remember I first noticed it on github's conference page. I see them everywhere now (Asana is another).

https://githubuniverse.com/

My own favorite is a table that can selectively show hide columns. Just make the button to show/hide a label that controls a hidden checkbox which then controls the display property of cells.

I may be against the norm but I actually prefer it most of the time when people don't modify the ::selection color and background.

FYI for "System Font Stack" - There is no "-windows-system" CSS declaration, so this is why the list of fonts is long... it includes each windows font. More is explained here, as well as an alternative way to load the fonts using @font-face:

https://css-tricks.com/snippets/css/system-font-stack/

i had never heard of this "trick" before today. why does this exist? i thought `font-family: sans` was meant to give you your OS or browser's default sans-serif font. why do something so elaborate?

The default sans-serif font in Firefox for Mac is Helvetica, but the default font for macOS is San Francisco. If you want to have your page use a system-looking font, particularly if you're building an Electron app like Slack, you might want to get past the browser defaults and instead use the system defaults.

I used macOS fonts in my example, but this applies to every platform.

Recently I was wondering how they created that click animation in material design. So i made my own and you can check the code here https://github.com/ibudiallo/buttons

Note that it works without js, but js allows to position the button press effect right under the mouse.

On one hand, great, useful, and very pretty. On the other hand this reinforces the use of such antiquated and hacky concepts as clearfixes, or floats for layout.

Also, the ellipsis truncation is very tricky to pull off. The parent element needs to be a block if I remember correctly.

Truncate text has a huge caveat in that it doesn't work fully for multi line text.

I find I need an explicit width to make it work as expected

As an aside. I recently found https://www.caniuse.com/ and find it super helpful as I get back into frontend development.

It gives you a clear picture of how well the different browsers support a given piece of web technology.

The pretty text underline (https://atomiks.github.io/30-seconds-of-css/#pretty-text-und...) looks pretty awful on Chrome 63.0.3239.132 (Official Build) (64-bit).

I like this!

The pretty text underline came out really bad on Win10 + Firefox 58.0.2, as well.

Looks good using Firefox on Ubuntu, until you select the text: https://screenshots.firefox.com/YM46qCrVR3IA0Qar/atomiks.git...

Doesn't look good on firefox 58 on osx, https://imgur.com/ouLKS58

It looks like there's a distance value that could be increased, since the underline is breaking along the baseline.

Frankly, it's hideous. I don't know why the adjective "pretty" is used here, it looks much worse than normal underlining.

I think they just implemented it badly. I have seen a similar thing in Typography.js [1] recently and probably because of Baader-Meinhof phenomenon, I saw it multiple times afterwards and just assumed that was now the default way to render underline.

Try the Doelger theme at Typography.js, it looks pretty good actually.

[1] https://kyleamathews.github.io/typography.js/

Popout menus are often created with Javascript with a delay of a second or two before they disappear, such that slower users can move their mouse from a tall element, over non-menu space, onto a menu item.

With the CSS popout menu, the menu disappears instantly, making navigation more difficult.

You can fix that with css transitions

Horizontal and vertical centering - needs a height on the parent which is omitted from the example.

This always irks me.

People provide a CSS example but omit that the parent needs to be position relative, only works with absolute positioning (which it isn't set to in the example), only certain element types, or that the tree needs a higher z-index than the sibling or it won't work.

At least on Stackoverflow someone often remarks in a reply about the gotcha/limitation.

To be fair, centering with flex doesn't require the parent to have any particular positioning set. The only reason you need to set the width/height is because the centering happens inside 0 size box, which wouldn't happen if your problem is centering something inside existing box.

Here’s a method with an unknown height...

http://zerosixthree.se/vertical-align-anything-with-just-3-l...

The flexbox method does work with an unknown height. The point is that the container has to actually have a height (one way or another) that is greater than the height of the aligned element, otherwise vertical alignment is all equal anyway! This is as true of the flexbox approach as it is in your example (which explicitly sets the containing 'section' element's height).

Looks like inspiration was drawn from 30secondsOfCode repo

https://30secondsofcode.org/

This is fantastic. Not only as a collection, but also the techniques used within the collection to apply in other situations.

> Browser Support: 84.6%

The percentage isn't very helpful. If a specific set of browsers are to be supported, even 99% may omit one of them.

This is an awesome cheat sheet. I’ve been struggling with the constant aspect ratio problem!

can i use custom css element's defined in some other library in another css? e.g. I have some html say <nav> ...</nav> i have a separate css style.css which would be .nav{ <class defined in the library i am importing> } basically i don't want to spray div/classes everywhere while i am experimenting with which css lib to choose, is there any elegant way to do this?

Use libraries that come in Sass form or figure out how you use them in a Sass-y way. In your Sass file (style.scss), write .nav { @extend .lib-nav-thing } and compile a new style.css. You won't have to touch your HTML.

> Pretty text underline without clipping descending letters.

Isn't this the default behavior?

On my machine the "pretty" underlines are conspicuously uglier than the standard ones. This kind of thing is why I hesitate to re-implement standard browser behavior for the sake of improvement. Even if I don't like how underlines look today, I'm not going to implement my own. It will not age as well.

It's only starting to change to be the default in recent releases.

This is awesome - thank you!

clearfix example not working in ff

I love you

Is the link dead for anyone else?

Never mind, local issue with me.

Works for me

Never mind, local issue with me.

Reply on news.ycombinator.com