🔰 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://t.iss.one/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.