Welcome to Gaia! ::

Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion
<3 </3
Reply
1 2 >

reinasachiko's Senpai

Dramatic Gentleman

23,715 Points
  • Fan Before It Was Cool 500
  • Nuclear Plant 500
  • Rat Conqueror 500
Offline
Just a small experiment, Lady Sax suggested next experiment to play with filter. So combined with now widely supported mix-blend-mode CSS
============The CSS for Current profile ==========

Note these are used with default &theme=dark and will still gives a little bit of background shade under some situation. This should be used only with button-only Youtube style since this code will mess up the video appearance. Requires the media panel to have transparent background or at least nothing overlaps below the flash object.

White buttons CSS :
User Image
Quote:
.media_panel h2 ~ object {
mix-blend-mode:lighten;
-webkit-filter:sepia(1) contrast(1.4) brightness(3) hue-rotate(210deg);
filter:sepia(1) contrast(1.4) brightness(3) hue-rotate(210deg);
}

Dark buttons CSS :
User Image
Quote:
.media_panel h2 ~ object {
mix-blend-mode:darken;
-webkit-filter:invert(1) contrast(4) brightness(0.5) hue-rotate(170deg);
filter:invert(1) contrast(4) brightness(0.5) hue-rotate(170deg);
}
Tips: If the buttons got a bit of background shade, you can try adjust the brightness first then the contrast. Also the volume control bar color might be messed up.

Fallback on browsers not supporting mix-blend-mode: The player will revert to normal with default object background state aka your usual bar style Youtube.

This code requires you to adjust accordingly with your profile background, the media panel code in your profile and other stuffs. Remember mix-blend still buggy with z-index. So applying any z-index to the object or any of its parent might remove the mix-blend effect. You can also change the color buttons to many other things ie: Blue, creamy yellow, dark brown, and many more. Although some colors are harder to achieve unless you used theme=light and adjust the filters and mix-blend-mode.

Live preview is on my profile as usual, use the gear icon to change background.

Few variations allow the concept to be used on Hypster, Billy, and some other media players.

Saxy Coder

Offline
▧▧▧ ♬ ▧▧▧
Huh o3o
I've been working with filter to style the player in Current, but I hadn't thought of using that in combination with background-blend-mode.
Nice discovery ~

I'm going to link this on the Media guide later, if you're okay with that c:
▧▧▧▧▧▧▧

reinasachiko's Senpai

Dramatic Gentleman

23,715 Points
  • Fan Before It Was Cool 500
  • Nuclear Plant 500
  • Rat Conqueror 500
Offline
Lady Saxophone
▧▧▧ ♬ ▧▧▧
Huh o3o
I've been working with filter to style the player in Current, but I hadn't thought of using that in combination with background-blend-mode.
Nice discovery ~

I'm going to link this on the Media guide later, if you're okay with that c:
▧▧▧▧▧▧▧
Yes, I actually been waiting for mix-blend-mode to get supported. This thing been in my plan ever since background-blend-mode first time introduced, which I tested with moz-element using media panel as background element. Back ago, I managed it with Grooveshark to get this due to its solid black-white colors player.

Go ahead if you want to link the thread. This thing can be modified to include other players as well as long no picture or video included, only the player buttons.

Saxy Coder

Offline
▧▧▧ ♬ ▧▧▧
Fredy-san
Yes, I actually been waiting for mix-blend-mode to get supported. This thing been in my plan ever since background-blend-mode first time introduced, which I tested with moz-element using media panel as background element. Back ago, I managed it with Grooveshark to get this due to its solid black-white colors player.

Go ahead if you want to link the thread. This thing can be modified to include other players as well as long no picture or video included, only the player buttons.
It probably would have been possible with Soundcloud as well, since that used to allow you to edit the colors xp
I went ahead and added it into the Youtube guide though, since that's what most people use.
▧▧▧▧▧▧▧

Rainbow Unicorn

78,700 Points
  • Fairy bread fancier 500
  • December 2020 Collector 250
  • Diedrich's Sweet 16 0
Offline
I decided to take this concept for a test-run, but I've run into the issue that trying both the light and the dark versions, and also trying tweaking the variables a little, I still seem to be ending up with a hard-edged mess instead of the blend mode which is intended (I also see this on Fredy's profile which I know is supposed to have the styling applied successfully). This seems to be a problem across browsers (Firefox, Chrome, Chromium).

My two questions are does my profile media player look as intended to other users, and why would I not be able to see the mix-blend mode correctly? I guess it could be one of those weird Linux things again, though I'm not sure why. sweatdrop

Savvy Cub

Offline
Zzyli

It seems to work fine if you just apply it to the panel.

Rainbow Unicorn

78,700 Points
  • Fairy bread fancier 500
  • December 2020 Collector 250
  • Diedrich's Sweet 16 0
Offline
LatinBsnDude

It seems to work fine if you just apply it to the panel.

You're right, it looks fine if applied to the panel and not the object. Thanks!

Savvy Cub

Offline
Zzyli

Also, try a contrast of 10 and brightness of 1.

reinasachiko's Senpai

Dramatic Gentleman

23,715 Points
  • Fan Before It Was Cool 500
  • Nuclear Plant 500
  • Rat Conqueror 500
Offline
Zzyli
I decided to take this concept for a test-run, but I've run into the issue that trying both the light and the dark versions, and also trying tweaking the variables a little, I still seem to be ending up with a hard-edged mess instead of the blend mode which is intended (I also see this on Fredy's profile which I know is supposed to have the styling applied successfully). This seems to be a problem across browsers (Firefox, Chrome, Chromium).

My two questions are does my profile media player look as intended to other users, and why would I not be able to see the mix-blend mode correctly? I guess it could be one of those weird Linux things again, though I'm not sure why. sweatdrop

Hard-edged like how??

It should works correctly for Linux too if Android counted as Linux-branch. Are you sure you have set the panel to have transparent background at that time?

Savvy Cub

Offline
Fredy-san

Hard-edged like how??

It should works correctly for Linux too if Android counted as Linux-branch. Are you sure you have set the panel to have transparent background at that time?

This is what I am seeing (and it's on your profile):
User Image

reinasachiko's Senpai

Dramatic Gentleman

23,715 Points
  • Fan Before It Was Cool 500
  • Nuclear Plant 500
  • Rat Conqueror 500
Offline
LatinBsnDude
Fredy-san

Hard-edged like how??

It should works correctly for Linux too if Android counted as Linux-branch. Are you sure you have set the panel to have transparent background at that time?

This is what I am seeing (and it's on your profile):
User Image
Hmm it seems there is a difference in rendering then. I will try to research some more.

Savvy Cub

Offline
Fredy-san

Like I said earlier, it does show up properly if you just apply the code to the whole panel.

Rainbow Unicorn

78,700 Points
  • Fairy bread fancier 500
  • December 2020 Collector 250
  • Diedrich's Sweet 16 0
Offline
Fredy-san

Hard-edged like how??

It should works correctly for Linux too if Android counted as Linux-branch. Are you sure you have set the panel to have transparent background at that time?

I'm also seeing what Latin Bsn is seeing, just to confirm for you.

reinasachiko's Senpai

Dramatic Gentleman

23,715 Points
  • Fan Before It Was Cool 500
  • Nuclear Plant 500
  • Rat Conqueror 500
Offline
LatinBsnDude

Zzyli

All right, done patching.

The main work which I done following with recommendations is the Youtube in my profile. Stuff I worked on is partial transparency, example you only wanted the controls to have transparent only while the video is shown in original. Due to this, I can not use filter contrast at all so I workaround it by slipping in an element as " Contrast & brightness adjustment layer" using css-content.
Demo: http://www.gaiaonline.com/profiles/reinasachiko/24287935/

In this demo, the mix-blend-mode is still applied to the object (it shows up fine on me), the one in my profile is applied to media_panel level as suggested though. Give the demo a try to see whether the transparency not working problem solved or not for you. The BG changer is available to test it on multiple colors scheme.

There is however a massive editor slow-down bug due "mix-blended element in mix-blended parent" method used. so you still need to apply filter:brightness(1); or contrast(1) or just anything which do nothing but somehow removes the bug. Happens on Firefox usually.

If you modify this part in the demo to another color
Quote:
.media_panel object:after {
content:'';
mix-blend-mode:overlay;
background:white;
....
You can produce some other control bar colors especially bright colors much more easily now (ie: Blue, red and yellow), although still very crude. Black and dark colors however still not available. I am tinkering around with the reversed version later though. If I am correct. the invert adjustment layer perhaps needed for the video area. Unlike contrast and brightness which almost ireversible, the invert can be reverted using other elements layering on top of it as overlay and using filter invert as well.

Rainbow Unicorn

78,700 Points
  • Fairy bread fancier 500
  • December 2020 Collector 250
  • Diedrich's Sweet 16 0
Offline
Fredy-san
LatinBsnDude

Zzyli

All right, done patching.

The main work which I done following with recommendations is the Youtube in my profile. Stuff I worked on is partial transparency, example you only wanted the controls to have transparent only while the video is shown in original. Due to this, I can not use filter contrast at all so I workaround it by slipping in an element as " Contrast & brightness adjustment layer" using css-content.
Demo: http://www.gaiaonline.com/profiles/reinasachiko/24287935/

In this demo, the mix-blend-mode is still applied to the object (it shows up fine on me), the one in my profile is applied to media_panel level as suggested though. Give the demo a try to see whether the transparency not working problem solved or not for you. The BG changer is available to test it on multiple colors scheme.

There is however a massive editor slow-down bug due "mix-blended element in mix-blended parent" method used. so you still need to apply filter:brightness(1); or contrast(1) or just anything which do nothing but somehow removes the bug. Happens on Firefox usually.

If you modify this part in the demo to another color
Quote:
.media_panel object:after {
content:'';
mix-blend-mode:overlay;
background:white;
....
You can produce some other control bar colors especially bright colors much more easily now (ie: Blue, red and yellow), although still very crude. Black and dark colors however still not available. I am tinkering around with the reversed version later though. If I am correct. the invert adjustment layer perhaps needed for the video area. Unlike contrast and brightness which almost ireversible, the invert can be reverted using other elements layering on top of it as overlay and using filter invert as well.

You've definitely made the button appearance a lot smoother. Screencap of what I see
User Image


Also, just playing with the mix blend mode on media I managed to create another unusual effect ('clear' buttons and white player BG) for this user. I don't fully understand how the parameters effect everything yet, that will take more reading and tinkering, but I thought I'd share.
Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion

Quick Reply

Submit
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaians
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
Play with GCash
Play with Platinum
More
//
//

Join Now

// //

Have an account? Login Now!

//
//