
Collection of Useful CSS Snippets - marinacalado
https://atomiks.github.io/30-seconds-of-css/
======
drinchev
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 ).

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

~~~
drinchev
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/](https://atomiks.github.io/tippyjs/)

~~~
nawgszy
>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.

------
degenerate
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/](https://css-
tricks.com/snippets/css/system-font-stack/)

~~~
woodrowbarlow
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?

~~~
stevejohnson
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.

------
ibudiallo
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](https://github.com/ibudiallo/buttons)

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

------
nukeop
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.

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

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

------
Sukotto
As an aside. I recently found
[https://www.caniuse.com/](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.

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

I like this!

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

~~~
tombrossman
Looks good using Firefox on Ubuntu, until you select the text:
[https://screenshots.firefox.com/YM46qCrVR3IA0Qar/atomiks.git...](https://screenshots.firefox.com/YM46qCrVR3IA0Qar/atomiks.github.io)

------
IChrisI
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.

~~~
petemill
You can fix that with css transitions

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

~~~
Someone1234
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.

~~~
iaml
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.

------
Kagerjay
Looks like inspiration was drawn from 30secondsOfCode repo

[https://30secondsofcode.org/](https://30secondsofcode.org/)

------
karmakaze
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.

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

------
newusertoday
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?

~~~
extra88
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.

------
fny
> Pretty text underline without clipping descending letters.

Isn't this the default behavior?

~~~
recursive
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.

------
AccountCreated
This is awesome - thank you!

------
majortennis
clearfix example not working in ff

------
madrafi
I love you

------
duxup
Is the link dead for anyone else?

Never mind, local issue with me.

~~~
dmannorreys
Works for me

~~~
duxup
TY

Never mind, local issue with me.

