Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
Autumn, 20 Oct 2026 - @589.73
Forum Activity: Three Stars Random | Recent Posts | Guild Recents
News: :wizard: You can make anything on the web! :wizard: Guild Events: TIME FOR HALLOWEEN CRAFTS!
Super News: ~~MelonLand's Halloween Profile Design Contest 2026~~
+  MelonLand Forum
|-+  Da Web Revival
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Adding drop shadows/borders that wrap around transparent images?


« previous next »
Pages: [1] Print Embed
Author Topic: Adding drop shadows/borders that wrap around transparent images?  (Read 915 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: Autumn, 21 Oct 2025 @548 » Toggle Font Embed

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

https://corruptedunicorn.neocities.org/images/gifs/robotuni.gif
https://i.gpx.plus/sFmfu/c15.png

Artifact Swap: From Tuffy with ❤️Snake CreatureFlower CreatureCrystalFeather StoneWave 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:
Caught by RubbereonYou're a Star!Flinstone VitaminWavy Shoulder-Length Hair with BangsBug!Top Hat
« Reply #1 on: Autumn, 21 Oct 2025 @560 » Toggle Font Embed

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: Have a chillpillRed Tulip100 coins
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ 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
@000 Melon
Land
Forum Art Hub Chat Webring Explore Random Recent Tenement Arcade Want to Login or Join ? Web Craft Guide Graphic Catalogue Wiki Help I'm Lost! Link Land Newsletters Image Stream Minecraft: Online
Zap!
Passport Sites tamaNOTchi Asatte Add your site?
Aero Archive Onio Cafe 32 Bit Cafe Status Cafe