#tinyCSStip Ever want to mask something out of an element, but not cut out blur or ...

2024-11-26 09:33:38

#tinyCSStip

Ever want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?

Well, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!

mask:
conic-gradient(red 0 0) no-clip subtract,
var(--masked-area)

nprofile1qy2hwumn8ghj7un9d3shjtnddaehgu3wwp6kyqpq9qceztjxtkkj8qd6d5x0ya3r9whzyu9yljdv0f6jw8y8v704dxmq3xnmhh (nprofile…nmhh) demo: https://codepen.io/thebabydino/pen/MYggKre

#CSS #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

Author Public Key

npub1wzrcns4nynt3aegu8qvxyffxu8k6rahtmx5ll6ap7z24f036y43q0u2nuu

Seen on

wss://relay.mostr.pub

Show more details

Published at

2024-11-26 09:33:38

Kind type

1 Short Text Note

Event JSON

{ "id": "6d5d74bf9dec067e91fe6c1f86862c85e3d15012c66bedebc2191f347c790398", "pubkey": "708789c2b324d71ee51c3818622526e1eda1f6ebd9a9ffeba1f09554be3a2562", "created_at": 1732613618, "kind": 1, "tags": [ [ "p", "2831912e465dad2381ba6d0cf276232bae2270a4fc9ac7a75271c87679f569b6", "wss://relay.mostr.pub" ], [ "p", "db491ad25a0786a07a13c1d0daa3dd567aece96a40a6fff8b243641ea4307de9", "wss://relay.mostr.pub" ], [ "t", "tinyCSStip" ], [ "t", "css" ], [ "t", "cssmask" ], [ "t", "code" ], [ "t", "coding" ], [ "t", "frontend" ], [ "t", "web" ], [ "t", "dev" ], [ "t", "webdev" ], [ "t", "webdevelopment" ], [ "imeta", "url https://files.mastodon.social/media_attachments/files/113/548/521/186/290/631/original/268037d1edea9e5b.png", "m image/png", "dim 917x826", "blurhash UFHxWzaQ9as=~Wj]t6WESkofxYNKMJobkCbF" ], [ "proxy", "https://mastodon.social/users/anatudor/statuses/113548566126866240", "activitypub" ] ], "content": "#tinyCSStip \n\nEver want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?\n\nWell, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!\n\nmask: \n conic-gradient(red 0 0) no-clip subtract, \n var(--masked-area)\n\nnostr:nprofile1qy2hwumn8ghj7un9d3shjtnddaehgu3wwp6kyqpq9qceztjxtkkj8qd6d5x0ya3r9whzyu9yljdv0f6jw8y8v704dxmq3xnmhh demo: https://codepen.io/thebabydino/pen/MYggKre\n\n#CSS #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment\n\nhttps://files.mastodon.social/media_attachments/files/113/548/521/186/290/631/original/268037d1edea9e5b.png", "sig": "5ec58b2f5db8b3f9c5843cf26f0478d4501a2cdba7ac79bffd53950692fcdcd54337cae39a78e48147623e56f3ad87ecbe8121535a581872862a715a79d180e0" }

Ana Tudor 🐯 on Nostr: #tinyCSStip Ever want to mask something out of an element, but not cut out blur or ...