Ive tried to use the rgba() to define a div's background color, but instead of changing the opacity, the fourth value changes brightness (apparently), and rendering the rounded borders black. Here is my CSS, really simple stuff:
#content {
min-height: 200px;
padding: 25px;
border-radius: 50px;
background-color: rgba(169, 245, 208, 0.4);
}
And here is a picture of this issue in both Firefox and Chrome:
Finally, the URL of the site: http://lksonorizacao.com.br/newsite/
The #container parent has a background:#000 set on it. #content’s rounded corners are just revealing that black. rgba() does work the way you think it should.
Related
On the website of Palantir.com, the color of the logo (originally black) is always the inverse of the color of the background behind it, even as the background scrolls/changes.
I'm creating a website via Wordpress and would like to have the same effect. I've tried using "mix-blend-mode: exclusion;", and while similar, doesn't give the true effect of a proper color inverse.
How can I do this in CSS? Thanks!
mix-blend-mode: difference with the font color set at white might help.
The difference with white on white is 0 - ie black.
The difference with white on blue is rgb(255, 255, 0) ie yellow.
body {
background-image: linear-gradient(white 0 30px, blue 30px 100%);
width: 100vw;
height: 100vh;
}
.text {
mix-blend-mode: difference;
color: white;
font-size: 60px;
}
<body>
<div class="text">SOME TEXT</div>
</body>
There can be problems with grays though - you can end up with gray on gray so it depends a bit on what your underlying image is actually like as to whether this will be satisfactory enough. (One trick is to apply a slight shadow to the text).
Is there a way to disable background smoothing in Safari?
I'm trying to make, for example, the tiled background like this:
div#dashed
{
width: 10rem;
height: 7rem;
border: 1px solid #000;
background: url("https://tut.etogo.net/_files/diagonalbg.png");
}
<div id="dashed">
So, the background is like that:
And I expect the background to look like that (zoomed):
But in Safari it looks like that:
Zoomed:
So, I see Safari does some antialiasing/smoothing on the edges - is there a way to disable it? I tried different "image-rendering" parameters but with no success. Tried that in IE, Edge, FF, Chrome and Opera - everything renders fine, but not in Safari. maybe there's some css for that?
As an alternative to using an image, you can achieve the same effect with pure CSS.
.gradient {
width: 200px;
height: 200px;
background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px);
}
<div class="gradient"></div>
You might want to fiddle around to reach the desired outcome.
A bit more info, and tips can be found on https://css-tricks.com/stripes-css/
I think this is because your background was repeat.
You can try it
background-size:cover;
background-repeat: no-repeat;
Setting size for your background-image.
I saved the image as a transparent png but nothing I can do seems to fix it!?! Any ideas???
It should look like this:
Here is a copy of the image in GIMP showing that it's indeed transparent:
finally, Some good old code:
The Markup:
<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form>
Search Box CSS:
.search, .search:active, .search:focus, .search:visited {
position: absolute;
color: #fff;
top: 3px;
width: 368px;
right: 9%;
font-size: 28px;
z-index: 3;
border-radius: 20px;
/* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
text-indent: 10px;
text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
background-color: #00D4C7;
}
The Search icon css itself:
Pseudo ::before element
.search:before {
content: "";
position: absolute;
top: 7px;
left: 268px;
background-image: url("images/icon-search.png");
background-color: rgb(0, 185, 171);
width: 46px;
height: 30px;
z-index: 4;
}
Note: If I remove the class search from form, It removes my image, if I remove class search from the input element it still renders with that funky shade over my image...Any ideas?
Edit 1: If I do as suggested by setting the explicit dimensions of the image (as I did for other pseudo elements with no problem) it does not resolve my issue. I've already submitted the project so at this point it's a matter of me wanting to know what happened and how I can fix this. I resorted to a css hack that changed the brightness to a closer match [with a faint outline still 😞 ]
Edit 2: Show me the JS Fiddle!
you did give your image a background-color: rgb(0, 185, 171); what is #00b9ab
and the searchbox background-color: #00D4C7; what is rgb(0, 212, 199)
My image itself was not truly transparent. There is is a small opacity channel that causes that grey haze to appear on a non-white background. I caught wind of this when posting to imgur....and confirmed it for sure when I actually made a copy of the layer (in photoshop) using select by color.
Solution: Check your images...to do this, load it onto a window by itself and set the html body to a non-white color. Wish I thought to do this before submitting this:
This might be happening because your background image size is different than its container's, .search::before, size. And/or because your .search::before background-color is a different hex value.
Try this:
Add background-color: transparent; and background-size: 46px 30px; to .search::before. This will make it so that if your background image is smaller than the container, the rest of the space will be transparent and set the background image size to be the same as its container, which you have explicitly set.
I found that the images that I was getting from the internet were not truly transparent. This website enabled me to get it to work. https://www.remove.bg/ (the image I used had the checkered background to indicate it was transparent, it just didn't work in the img tag until I used that website.)
I am reading the book: CSS Secrets: Better Solutions to Everyday Web Design Problems. And encountered this part where the color setting css can work for every potential background colors. The css is as follows:
.button {
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
font-size: 50px;
line-height: 1.5;
width: 2.5em;
}
.greenButton {
background-color: #6b0;
}
.redButton {
background-color: #c00;
}
The Jsfiddle link: https://jsfiddle.net/mr7kwxsm/. This does work. But I don't know how... How does the background color pass as a parameter to hsla and rgba color settings? They seem to be fixed values there. And since transparent is the last variable in linear-gradient. I am not sure how this is working. Can someone please help to explain a little bit?
Not sure what you are asking but I think you want to know how does your element get a color of green and red where you've defined another color using hsla() in gradient which is bluish with a gradient overlay.
So it goes like this. Your .button class holds a shorthand property of background where you specify a linear-gradient which is nothing but a background-image and you also specify a hex of #58a. If you split this shorthand you will read it like
.button {
background-image: linear-gradient(hsla(0, 0%, 100%, .2), transparent);
background-color: #58a;
}
Now further down you declare couple of more classes with their background-color so when you use .button and .greenButton on the same element, browser overrides the background-color of .button with .greenButton and that's how you get different colors using a common .button class and you override them by defining other classes.
.greenButton {
background-color: #6b0; /* Overrides your #58a when you call
this class with .button */
}
Order in your CSS does matter. If you move the declaration
of .greenButton and .redButton above .button, your buttons will
always be of default color which is bluish.
Demo
After you commented, you asked that why your borders adapt the colors, so the thing is that you use rgba(0,0,0,.1) for your border which is equivalent to a hex of #000 with an opacity i.e alpha of 0.1. Now since the your borders are opaque, you can see your background-color being rendered behind that.
Now I can explain you how borders work but I think it's not in the scope of this question.
The class .button makes use of the property background to set various properties (colour and transparent gradient). In the classes for .greenButton and .redButton you only overwrite the background-color element. Therefore, all properties that are not part of the background-color element remain intact.
The background of a lot of websites is not actually white: it's more of a greyish color:
How do they do this? Is it just a picture they made or is there some CSS?
Short answer: Picture and CSS: both are possible.
Long answer:
To add a background image, you will have to do something like
body {
background-image: url('bgpic.png');
}
where bgpic.png is the image that you want to use as a background.
I believe using a background image for a simple background as this one will only increase your loading time, and in turn, frustrate your users. The CSS alternative is faster and easier, as you might have probably guessed from the other answers.
In CSS, you can style your background like this:
body {
background-color: #efefef;
}
Or, as someone pointed out, use the rgb equivalent:
body {
background-color: rgb(239, 239, 239);
}
And might I add that it is also possible to specify the transparency of the background. Say, you have a background picture, and you have a <div class="foo"> that could use a semi-transparent background; then you would do something like:
body {
background-image: url('bgpic.png');
}
.foo {
background-color: rgba(0, 0, 0, .5);
}
Notice that the last value given to rgba is the % transparency that you want. It is a value less than 1.
Here's a JSFIDDLE.
http://jsfiddle.net/ccnZt/
body {
background: rgb(248,248,248);
}
Just CSS.
body {
background: #f0f0f0;
}
Notice that if the website does not specify a background color, your browser will display a default color. Older browsers used grey colors, while new browsers use white.
They could have used either a picture image or CSS; either setting the background image with an image of that solid color or setting the background color with RBG colors through CSS.
body {
background-image: url('yourbgimage.jpg');
}
or
body {
background: rgb(244,244,244);
}
If you want to set your background to this color (or any other solid colors), it's better to go with CSS as it will load faster and improve the user experience!