Entrance Chat Gallery Guilds Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
October 23, 2025 - @800.30 (what is this?)
Activity rating: Three Stars Posts & Arts: 36/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: ozwomp is requesting your location  :ozwomp: [Agree] Guild Events: There are no events!

+  MelonLand Forum
|-+  World Wild 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 52 times)
Corrupted Unicorn
Hero Member ⚓︎
*****
View Profile WWWArt


Obscure Niche Internet Mad Artist
⛺︎ 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: CrystalGlass BeadFeather StoneHam StoneStorm StoneCube StoneTurquoiseTopazOpalPeridotRubyPearlEmeraldAmethystIce StoneWave StoneSun Stone
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:
coolest melon on the web!Emergency feel-good teaa silly heart 4 melon :)Hyperactive DonutGreat Posts PacmanThanks for being rad!
« 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: SapphireRising Star of the Web AwardMessage Buddy
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