Some small CSS tips, that aren't significant enough for their own individual posts 😁
❤3
Local Storage vs Session Storage
Choose Local Storage for persistent, cross-session data and Session Storage for temporary, tab-specific data, ensuring sensitive information is handled securely server-side.
❤3
A visualization of different flex axes in CSS, for different flex directions 😎
❤4
🔰 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
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
❤5
🔰 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