Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer day - @544.03
Activity rating: Three Stars Posts & Arts: 36/1k.beats Random | Recent Posts | Guild Recents
News: :wizard: You can make anything on the web! :wizard: Guild Events: Summerween Watch-a-thon

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ 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 776 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: an Autumn day » 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 ❤️Large CreatureStinger CreatureBrain CreatureAqua CreatureStar CreaturePoli CreatureQuad CreatureSnake CreatureFlower CreatureBug CreatureCrystalGlass BeadFeather StoneHam 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:
You're a Star!I got robbed by Dan Q on Melonland!Flinstone VitaminAlways working hard!Known Apple shillcoolest melon on the web!
« Reply #1 on: an Autumn day » 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: Visited on Melon's 10th Anniversary!Wildflowers!bitsy catRed TulipMellohiI met Dan Q on Melonland!?Flowers
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
MelonLand @000

Want to Login or Join ?

Minecraft: Online
Join: craft.melonking.net