Chat Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 18, 2026 - @578.33 (what is this?)
Activity rating: Three Stars Posts & Arts: 49/1k.beats Random | Recent Posts | Guild Recents
News: :seal: Thank you for today! :seal: Guild Events: There are no events!

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Adding drop shadows/borders that wrap around transparent images?


« previous next »
Pages: [1] Print
Author Topic: Adding drop shadows/borders that wrap around transparent images?  (Read 661 times)
Corrupted Unicorn
Hero Member ⚓︎
*****
View Profile WWWArt


Unicorns aren't meant to stay forever
⛺︎ My Room
iMood: moodyunicorn

Guild Memberships:
Artifacts:
Unicorn of the InternetSurbypink pigeon prizeyou are un-bear-ably cool!Rainbow Noodle Dance!Scrafty, I choose you!
« on: October 21, 2025 @547.51 »

Hello, I'm in love with the drop shadow the HalfMoon Art Hub gives to transparent images and I'd like to ask how can I achieve something like that on my own thru code, or even if it'd be possible to give a border to transparent images that wraps around them.

I usually give transparent images on my site a sticker-like white border thru an image edition program, although for my next idea I'm going to handle many graphics at once, and thus I could use some code help.

By the way, are there other visual "effects" that can be applied thru code?
Logged



Artifact Swap: corgeFrom Tuffy with ❤️Large CreatureStinger CreatureBrain CreatureMuscle CreatureLetter CreatureFire CreaturePlant CreatureAqua CreatureSail CreatureStar CreatureDig CreaturePuff CreaturePoli CreatureQuad CreatureSnake CreatureFlower CreatureBug CreatureBird Creature
Melooon
Hero Member ⚓︎
*****
View Profile WWWArt


So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

Guild Memberships:
Artifacts:
old-timey tunes~♪Flinstone VitaminAlways working hard!PoochKnown Apple shillcoolest melon on the web!
« Reply #1 on: October 21, 2025 @560.32 »

The art hub uses filters  :grin: Just add this CSS to your images:

Code
filter: drop-shadow(3px 3px 1px rgba(18, 27, 26, 0.29));

The first two numbers are the offset, the 3rd number is the blur, and the rgba value is the colour of the shadow (rgba being colour with opacity, the last number 0.29 is how see-through it is, with 1 being totally solid and 0 being totally transparent)

I would also note that filters can be quite demanding on your browser! So if you know that your shadow will always be on a square object, use box-shadow instead, it will bog your site down a little less!

 :wizard:
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered

Artifact Swap: shoeMicrowaveAir MailCup o' JaneI met Dan Q on Melonland!poochLasagna
Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi

MelonLand Nav

@000

Want to Login or Join ?

Minecraft: Online
Join: craft.melonking.net