I have a button with a transparent bg. On hover it changes to some color.
And a transition is set to smooth it out. Lets say the page visible behind it is red (anything other than white).
background-color: rgba(0, 0, 0, 0)
transition: background-color 0.5s
&:hover: {
background-color: rgba(0, 0, 0, 0.7)
}
Problem: on page load, or more precisely element load (using React), the button will go from white to transparent.
How to fix?
Related
How can I change the color of the thumbnail side bar from white to black?
This can be done using CSS, for example:
.fancybox-thumbs {
background: rgba(0, 0, 0, 0.3);
}
Demo - https://codepen.io/anon/pen/POgEMb
I am at my first year programming and just learning Java this is why I am completly lost with CSS and need help.
I want to edit this code (not mine)
===== CUSTOMIZABLE COLORS =====
:root {
main-color: #057F95;
hover-color: #045B6B;
}
===== CUSTOMIZABLE IMAGES =====
IMPORTANT: EVERY URL MUST BE HTTPS:// IN ORDER TO WORK IN DISCORD
RECOMMENDATIONS: EVERY URL AT THE BOTTOM SHOULD BE THE SAME TO MAKE THE
tHEM MATCH. (YOUR CHOICE)
/*Change the url in .app to change the background behind chat */
.app { background-image: url("https://imgur.com/RG03PyX.png") !important;
background-size: cover !important; }
/*Change the url in .callout-backdrop to change the background when modal pop outs happen */
.callout-backdrop { background-color: black !important; background-image: url("https://imgur.com/RG03PyX.png") !important; -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; -moz-transition: 0.3s all ease; transition: 0.3s all ease; background-size: cover !important; -webkit-filter: brightness(75%); }
/*Change the urls below to change the background of a profile modal pop up */
.user-popout:before {
background-image: url("https://imgur.com/RG03PyX.png") !important;
content: "";position: absolute;left: 0;top: 0;height: 100%;width: 100%;z-index: -1;background-position: 50% 50%;-webkit-filter: blur(3px);-webkit- transform: scale(1.05);transform: scale(1.05);}
#user-profile-modal .header:before {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.5)), url("https://imgur.com/RG03PyX.png") !important;
background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.5)), url("https://imgur.com/RG03PyX.png") !important;
content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: -1;background-position: 50% 50%;background-size: cover !important;-webkit-filter: blur(3px);-webkit-transform: scale(1.1);transform: scale(1.1);}
I try diffrent things (color:transparent,transparency: true, rgba(0,0,0,0.1), visibility: hidden, opacity:0.5, make a transparent background and some other but none of them work.
I hope you can find a solution for my problem.
Sadly you can't.
This is because of the way Electron (the framework that Discord uses on desktop) works, the window you show content on needs to have a color. If you make it transparent, it will just fallback to white.
There are countermeasures for this, mainly shaders that copy what is behind the window and reflect it on it, but they use up a lot of computing (and they're also very overkill for one of your first programs).
Still, if anybody want to check it out:
electron-acrylic-window
window-vibrancy for Tauri (not Electron, won't work on Discord)
This is most definitely possible. Use BetterDiscord, then find someone elses theme that is modifiable and try to work from there. (https://imgur.com/a/Yp2mPQY here is a link as proof, of a transparent discord, over this post)
*I did not create this, here is the link to the exact theme https://betterdiscord.app/theme/Translucence . I wanted my own picture as the background so I went in and changed the url link for the image. However for a transparent background, there are probs other was to do this, but all i did was deleted characters from the img url, so it could not link to an image.
Uses no computing power at all, fast and easy, could probs setup in 5-10mins
ik super old post, but cause I saw a new response, that is not entirely correct, thought I would put this in here
color is the property for the text color in the element. background: transparent is the one you're looking for.
You would want to use background-color: rgba(255,0,0,0.3), if you wanted a transparent red, etc.
The page with the problem is located at http://blue123a.businesscatalyst.com/select. The theme is called Forceful.
I made a new site and created a new form. When I added the form into the page, there was a problem with the submit button. One of the only things I found that may be relevant is to move the button up on the z-axis (I believe), but I don't know how to do that either.
The button works properly, but it is not displaying correctly.
Thanks.
Update 10/23/2014 Steve88 partially answered my initial question. The css change did make one color show left to right, shows white instead of aqua, on the submit button; it also got rid of the black half of the button. It gave me a transparent gray box on part of the button and made the button square though.
I did more digging and found answers at www.htmlgoodies.com/beyond/css/article.php/3891201 and www.w3schools.com/css/css3_borders.asp that helped me get back the rounded corners.
Adding CSS code for border-radius gave me the corners I wanted. Included -moz-border-radius and -webkit-border-radius for additional crossbrowser compatability.
I also got the button hover to work correctly.
...Original CSS...
FOR BUTTON (There is more code, but this is the essential part.)
.webform .cat_button {
background: url("../images/buttons/submit_button.png") no-repeat scroll 100% 0 rgba
(0, 0, 0, 0);
border: 0 none;
FOR BUTTON HOVER
.webform .cat_button:hover {
background: url(../images/buttons/submit_button.png) no-repeat 100% -39px; }
....CSS With Adjustments...
FOR BUTTON
.webform .cat_button {
background: url("../images/buttons/submit_button.png") no-repeat scroll 0 0
transparent;
border: 0 none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
FOR BUTTON HOVER
.webform .cat_button:hover {
background: url(../images/buttons/submit_button.png) 0 -39px; }
change your background style to this:
background: url("../images/buttons/submit_button.png") repeat 50% 0 rgba(0, 0, 0, 0);
its on line 1614 in style.css
If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
I have almost invisible text on the webpage with opacity: 0.1;
I want it to become visible when selected.
However, the selection is also almost invisible.
Unfortunately, ::selection doesn't change the opacity.
You won't be able to use the opacity property with ::selection. It was never one of the allowed properties, and even if it were implemented, it wouldn't make sense as you're not modifying the opacity of the element itself anyway.
You can use rgba() colors with the text and background rather than opacity on the entire element instead. It's not the ideal workaround, but it works at least for colors:
body {
color: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
color: rgba(0, 0, 0, 1);
}
::selection {
color: rgba(0, 0, 0, 1);
}
<p>Almost invisible text that turns opaque on selection.
Instead of using opacity, just set the alpha in the rgba color like so...
::selection {
background: rgba(255, 255, 0, 0.5)
}