🔰 CSS: Text with image background

Here is how you can fill a piece of text with a background image which is still accessible! And here is how it works:

👉 Create a background image which fits a rectangular image for the box containing the text

👉 Clip the background to be visible only where there is text, using the background clip properly

👉 Finally set a transparent foreground color for the text itself such that the background is visible

Skate jump game 🏂
https://news.1rj.ru/str/Web_design3
YOUR ONE REACTION MOTIVATES US 🥺❤️

Source code 👇👇

🔰 CSS Select and element's parent

For a long time, in CSS land, developers were longing for a feature that allowed to select the parent of a particular element.

In this example, we have two .parent elements but with different children. With the :has() pseudo selector, we can select the parent of a particular child. With this we can apply some styling only to that particular parent.

This opens up a lot of possibilities such as

✨ Style a list when a particular element is hovered
✨ Style a card depending on whether or not it has an image
✨ Style a header depending on whether or not it has an hyperlink

The possibilities are endless 🔥

🔰 CSS: New Transform Syntax

🔅 Loading Animation in CSS

A recent addition to HTML and JavaScript was the Popover API - a set of useful JavaScript APIs and HTML attributes to easily create "modal" like windows inside your DOM.

Sometimes it happens so you don't have enough space to display a full piece of text. In some scenarios, if the UX allows, we could truncate the text using ellipsis, and here is the snippet for how to do it easily in CSS!

⚠️ Do note that, for this to work, a defined width is required for the text element. (Saved you some hassle in debugging 😁)