OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside!
So you can really *shape* your UI's 😉*
rect() and xywh() are also supported for shape-outside in Chrome 149
*(just let me have my Mom joke)
Use 𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚜 and 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 to animate theme switches instead of flipping them with a transition
𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝𝙴𝚕𝚎𝚖𝚎𝚗𝚝.𝚊𝚗𝚒𝚖𝚊𝚝𝚎(
{ 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑: ["𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟷𝟶𝟶% 𝟶)", "𝚒𝚗𝚜𝚎𝚝(𝟶)"] },
{ 𝚙𝚜𝚎𝚞𝚍𝚘𝙴𝚕𝚎𝚖𝚎𝚗𝚝: "::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝)", 𝚍𝚞𝚛𝚊𝚝𝚒𝚘𝚗: 𝟼𝟶𝟶 },
),
::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝) {
𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚗𝚘𝚗𝚎;
𝚖𝚒𝚡-𝚋𝚕𝚎𝚗𝚍-𝚖𝚘𝚍𝚎: 𝚗𝚘𝚛𝚖𝚊𝚕;
}
Here the clipPath ensures the transition happens from top to bottom
You can have different sets of favicons for your website’s light and dark modes
<𝚕𝚒𝚗𝚔 𝚛𝚎𝚕="𝚒𝚌𝚘𝚗" 𝚑𝚛𝚎𝚏="/𝚏𝚊𝚟𝚒𝚌𝚘𝚗-𝚕𝚒𝚐𝚑𝚝.𝚜𝚟𝚐" 𝚖𝚎𝚍𝚒𝚊="(𝚙𝚛𝚎𝚏𝚎𝚛𝚜-𝚌𝚘𝚕𝚘𝚛-𝚜𝚌𝚑𝚎𝚖𝚎: 𝚕𝚒𝚐𝚑𝚝)" />
<𝚕𝚒𝚗𝚔 𝚛𝚎𝚕="𝚒𝚌𝚘𝚗" 𝚑𝚛𝚎𝚏="/𝚏𝚊𝚟𝚒𝚌𝚘𝚗-𝚍𝚊𝚛𝚔.𝚜𝚟𝚐" 𝚖𝚎𝚍𝚒𝚊="(𝚙𝚛𝚎𝚏𝚎𝚛𝚜-𝚌𝚘𝚕𝚘𝚛-𝚜𝚌𝚑𝚎𝚖𝚎: 𝚍𝚊𝚛𝚔)" />