This media is not supported in your browser
VIEW IN TELEGRAM
Skate jump game 🏂
https://news.1rj.ru/str/Web_design3
YOUR ONE REACTION MOTIVATES US 🥺❤️
Source code 👇👇
https://news.1rj.ru/str/Web_design3
YOUR ONE REACTION MOTIVATES US 🥺❤️
Source code 👇👇
🔥5❤3
🔰 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 🔥
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 🔥
❤3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
🔰 Responsive Card with CSS Flexbox ✨
❤4👍3🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
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.
❤3👍2
🔰 Highlight text with pure CSS.
:target-text brings precise, URL-based highlighting to modern apps without JavaScript.❤1
This media is not supported in your browser
VIEW IN TELEGRAM
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 😁)
❤1
⌨️ A visualization of different Flexbox alignment and justification modes ✨
One confusing part might be the difference between
👉 Align-items aligns the children in a particular row among themselves
👉 Align-content aligns the entire row itself relative to the Flexbox
One confusing part might be the difference between
align-items vs align-content. The difference is visible only when flex wrap is enabled, and there are multiple flex rows.👉 Align-items aligns the children in a particular row among themselves
👉 Align-content aligns the entire row itself relative to the Flexbox
❤1