![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
Entry tags:
INBOX PAGE: NEON JUNGLE
@boro
text · action · overflow
@boro
text · action · overflow
with glowing box
without glowing box
a pretty simple code you can use for IC inboxes or whatever you please, tbh! it's based on a ton of pics i've seen like this on pinterest and the like. the glowing box is done in HTML, so you can change the colour to fit whatever colour you want, or you can grab a version without the glowing box entirely if you want something a bit more subtle :^)
i hope the code is easy enough to edit, but if you need any help please leave a comment and i'll see what i can do! i found my leafy background on pinterest, the url is here in case you would also like to use it! the border around the whole pic is currently #888888 if you'd like to change it to something else.
picking colours for your box:
the following code is what you need to edit to change the colour of the box:
as you can see, there are three hex codes. two of them are the same - #01FF00 - and one of them is different - #A4FAA4. #01FF00 is the colour of the glow (box-shadow), and the reason it's there twice is because we need to specify a colour for the glow outside the box and the glow inside the box. #A4FAA4 is the slightly paler colour of the border sandwiched between those two glows. think of it like the 'border' color as the colour of a neon tube itself, which is very bright and almost white, and the 'box-shadow' value as the colour of the glow it emits.
to change your glowing box to whatever colour you'd like, you need to change both of these colours. you can use something like this website to get your hex codes and paste them in. broadly speaking, you want the glow to be a neon bright colour, while the 'border' colour is a paler version. so for example, if i wanted a pink glowing box, i'd start with the neon colour:
(i've circled the hex code location in green!)
my second colour needs to be the same shade, but a more pale/pastel version:
alright, so my two colours are #FF00C9 and #FFC4F3. popping those into the relevant spaces in the code, i'd have:
note that the neon pink hex code is pasted twice, for the outside of the glow and the inside of the glow. the code would then look like this:
i hope that makes sense! if you need help picking colours, let me know and i can give you a hand.
the following code is what you need to edit to change the colour of the box:
box-shadow: 0px 0px 10px 0px #01FF00, inset 0px 0px 10px 1px #01FF00; border: 1px solid #A4FAA4;as you can see, there are three hex codes. two of them are the same - #01FF00 - and one of them is different - #A4FAA4. #01FF00 is the colour of the glow (box-shadow), and the reason it's there twice is because we need to specify a colour for the glow outside the box and the glow inside the box. #A4FAA4 is the slightly paler colour of the border sandwiched between those two glows. think of it like the 'border' color as the colour of a neon tube itself, which is very bright and almost white, and the 'box-shadow' value as the colour of the glow it emits.
to change your glowing box to whatever colour you'd like, you need to change both of these colours. you can use something like this website to get your hex codes and paste them in. broadly speaking, you want the glow to be a neon bright colour, while the 'border' colour is a paler version. so for example, if i wanted a pink glowing box, i'd start with the neon colour:
(i've circled the hex code location in green!)
my second colour needs to be the same shade, but a more pale/pastel version:
alright, so my two colours are #FF00C9 and #FFC4F3. popping those into the relevant spaces in the code, i'd have:
box-shadow: 0px 0px 10px 0px #FF00C9, inset 0px 0px 10px 1px #FF00C9; border: 1px solid #FFC4F3;note that the neon pink hex code is pasted twice, for the outside of the glow and the inside of the glow. the code would then look like this:
xxx
no subject
I do have a question, though; how would I go about editing this to make them side by side, for a matching cr chart or muselist use as well? Thanks!
no subject
i was actually planning on doing this at some point anyway but it was a lot less difficult than i anticipated, so i threw up a quick post here explaining the edits! broadly speaking you should be able to edit everything just the same, but if you need a hand with anything please let me know!! :^)
no subject