The ninth is a realistic image grainy shadow effect: Using a single img element for ...

2024-10-23 20:26:26 CEST

The ninth is a realistic image grainy shadow effect:

https://codepen.io/thebabydino/pen/OJYwgpe

Using a single img element for each. No image duplication in the markup or CSS.

The magic 🪄 is all in a pretty simple #SVG #filter.

#svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment

Author Public Key

npub1ahnq52t7xsmfypa3t8c4fpprz5m2e5sg4zfsf7lfc9n2n3j5qs6sskkqax

Seen on

wss://relay.momostr.pink

Show more details

Published at

2024-10-23 20:26:26 CEST

Kind type

1 Short Text Note

Event JSON

{ "id": "d8657ecb6d2054b91dbda7ae79277f8084fe6e220f6b6af48d110d347ab18516", "pubkey": "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435", "created_at": 1729707986, "kind": 1, "tags": [ [ "proxy", "https://mastodon.social/@anatudor/113358142593619613", "web" ], [ "t", "web" ], [ "p", "827dff3631108ba3a2eb2c455615166c4320e10ce086f31afa6aa657a94ca1db" ], [ "e", "841e91529adf8cb5ef4c2ddcaf00ebea26da9c437fe6151fdcca2363d074f292", "", "reply", "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435" ], [ "t", "code" ], [ "t", "svgfilter" ], [ "t", "webdevelopment" ], [ "t", "webdev" ], [ "e", "a607cd4c51074d74b97efbe6910a6df7a4d22167b50bb6a79ef0fe2c146cb0a1", "", "root", "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435" ], [ "p", "ede60a297e34369207b159f15484231536acd208a89304fbe9c166a9c6540435" ], [ "t", "svg" ], [ "t", "dev" ], [ "t", "filter" ], [ "t", "frontend" ], [ "imeta", "url https://files.mastodon.social/media_attachments/files/113/358/123/038/116/135/original/cd9ef5ae5f8f20da.png", "m image/png" ], [ "t", "coding" ], [ "proxy", "https://mastodon.social/users/anatudor/statuses/113358142593619613", "activitypub" ], [ "L", "pink.momostr" ], [ "l", "pink.momostr.activitypub:https://mastodon.social/users/anatudor/statuses/113358142593619613", "pink.momostr" ], [ "-" ] ], "content": "The ninth is a realistic image grainy shadow effect:\n\nhttps://codepen.io/thebabydino/pen/OJYwgpe\n\nUsing a single img element for each. No image duplication in the markup or CSS.\n\nThe magic 🪄 is all in a pretty simple #SVG #filter. \n\n#svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment\nhttps://files.mastodon.social/media_attachments/files/113/358/123/038/116/135/original/cd9ef5ae5f8f20da.png\n", "sig": "6393c85a14ad698bbd58b727c6f0a75674b558ccc7cfa8a52dc9df3ca20e6ad41e27c21cfe44facb2bb2cf3963a9a69b9dbea80df31fc69346553b37118574ba" }

Ana Tudor 🐯 on Nostr: The ninth is a realistic image grainy shadow effect: Using a single img element for ...