Trys Mudford Fading out siblings on hover in CSS
https:/
Trys here shows a nice little CSS trick to make hovered elements pop out (quite easy), while diming the siblings (that's the trick). Well done!
Related contents with similar topics
-
The Right Way to Use fonts.com Web Fonts
Let’s talk about web fonts. More specifically, about a mistake I have seen developers make in several projects for different agencies: Embedding a web font in the wrong way.
-
While we wait for browsers to implement the
text-wrap: balance;#CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:https://codepen.io/nhoizey/pen/mdjbrVx
Tell me what you think!
But why? Just because a colleague needed it, we could not find a solution in pure CSS, and I like challenges… 😅
-
Many of the latest additions to HTML, CSS, and JavaScript first existed as JavaScript libraries or frameworks or pre-processors or polyfills and then found their way into the standards process, back into the layers of web technology that move slower and are more resilient.
-
Our web design tools are holding us back
nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we have all kinds of wonderful interaction, grid, flexbox, all kinds of shapes, and so much more that you won’t find in the drop down menus of your tool of choice. Yet our websites still look and behave like they were designed with photoshop.
-
Layout & Grid in Design Systems
This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.
Matthias Ott
Brad Frost