Most of them are oldies, but >goldies<.<p>Tooltips are my favourite CSS-"trick". I've seen countless developers implement those with javascript, which is redundant if you know proper css selectors.<p>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 ).
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:<p><a href="https://css-tricks.com/snippets/css/system-font-stack/" rel="nofollow">https://css-tricks.com/snippets/css/system-font-stack/</a>
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 <a href="https://github.com/ibudiallo/buttons" rel="nofollow">https://github.com/ibudiallo/buttons</a><p>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.<p>Also, the ellipsis truncation is very tricky to pull off. The parent element needs to be a block if I remember correctly.
As an aside. I recently found <a href="https://www.caniuse.com/" rel="nofollow">https://www.caniuse.com/</a> and find it super helpful as I get back into frontend development.<p>It gives you a clear picture of how well the different browsers support a given piece of web technology.
The pretty text underline (<a href="https://atomiks.github.io/30-seconds-of-css/#pretty-text-underline" rel="nofollow">https://atomiks.github.io/30-seconds-of-css/#pretty-text-und...</a>) looks pretty awful on Chrome 63.0.3239.132 (Official Build) (64-bit).<p>I like this!
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.<p>With the CSS popout menu, the menu disappears instantly, making navigation more difficult.
Looks like inspiration was drawn from 30secondsOfCode repo<p><a href="https://30secondsofcode.org/" rel="nofollow">https://30secondsofcode.org/</a>
This is fantastic. Not only as a collection, but also the techniques used within the collection to apply in other situations.<p>> Browser Support: 84.6%<p>The percentage isn't very helpful. If a specific set of browsers are to be supported, even 99% may omit one of them.
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?