Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer night - @155.79
Activity rating: Four Stars Posts & Arts: 96/1k.beats Random | Recent Posts | Guild Recents
News: It's the silly things you'll remember :trash: 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 Embed
Author Topic: Adding drop shadows/borders that wrap around transparent images?  (Read 799 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 ❤️Stinger CreatureBrain 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:
Bug!You're a Star!Flinstone VitaminI got robbed by Dan Q on Melonland!Always working hard!Known Apple shill
« 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: Red TulipLurby?here comes the bapSmile on, rainbow flower!Plank
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 MelonLand Editor Recent Edits Tenement Arcade Want to Login or Join ? Forum Art Hub Chat Webring Web Guides Graphics Catalogue Wiki Newsletters Image Stream
Melon's Sites TamaNotchi Textures PixelSea GifyPet MoMG Ozwomp Online Loom Videos Leaky Webring Melonking
Tools Melon Software ArtHub Embed Maker ML Passports
Outlinks Frutiger Aero Forum Onio Club m15o's Web Services 32Bit Cafe iMood Webrings Internet Phone Book HTML Energy Declarations Hackers & Designers
Zap!
Minecraft: Online
Join: craft.melonking.net