Related
This question already has answers here:
Is it possible to make a blurred gradient shadow with CSS?
(2 answers)
Closed 7 months ago.
What would the html and css look like to create a blurred gradient underneath an image?
I understand how to create the gradient, but am not sure how to get it underneath images.
Something like this:
The gradient can be found here:
background: linear-gradient(90deg, rgba(98,52,255,1) #6234FF%, rgba(255,0,128,1) 100%);
You can make use of a custom-gradient class which is styled like that:
.image-wrapper {
background-color: white;
height: 100%;
width: 100%;
}
.custom-gradient {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-shadow: inset 0 0 12px 12px white, inset 0 0 3px 2px white;
background: linear-gradient(to right, rgba(98, 52, 255, 1), #6234FF, rgba(255, 0, 128, 1))
}
<div class="custom-gradient">
<div class="image-wrapper">
<h1>My image</h1>
</div>
</div>
This question already has answers here:
Is there a way to interpolate CSS variables with url()?
(4 answers)
Closed 4 years ago.
I need to pass an image to the CSS background like this it works:
.tinted-image {
height: 125px;
background: linear-gradient(to right, var(--color), var(--color2)),
url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}
but when I try to do it like this, I get a syntax error in VS Code
.tinted-image {
height: 125px;
background: linear-gradient(to right, var(--color), var(--color2)),
url(var(--url));
}
You can use it like the following:
:root {
--color: rgba(255, 0, 0, 0.5);
--color2: rgba(0, 255, 0, 0.5);
--url: url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}
.tinted-image {
height: 125px;
background: linear-gradient(to right, var(--color), var(--color2)), var(--url);
width: 200px;
}
<div class="tinted-image"></div>
CSS variables doesn't work on Internet Explorer. You can find all browsers with CSS variable support here: https://caniuse.com/#feat=css-variables
Below is an image of a button we use on our site, it's a .png.
We'd like to see if we can get really close to it with CSS on a standard button.
The gradient goes top: #E14C5B to middle: #D33742 to bottom: #B61C27 with a couple pixel radial of round corners.
Is that even possible in CSS?
I'll get ya started...
HTML
<button>Submit</button>
CSS with some background gradients
#import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 1.5em;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-radius: 3px;
height: 50px;
width: 100px;
color: white;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
DEMO
Screenshot:
If you want some kind of clicky feedback type look on click, you could also add:
button:active {
-webkit-transform: translate(1px, 1px);
box-shadow: none;
}
DEMO w/ :active
This is only prefixed for -webkit browsers. You'll need to provide the proper vendor prefixes for whatever you are supporting.
Here is the cross-browser version using css gradient.
I specified 4 colors for the gradient.
The first gradient from 0 to 50% and the second gradient from 51% to 100%.
Ex.
background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);
jsfiddle demo here
Please note that the red i took are brighter than in tour example.
Just play with the css to adjust colors that fit your needs.
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed yesterday.
I want to make the list menu's background disappear by using opacity, without affecting the font. Is it possible with CSS3?
now you can use rgba in CSS properties like this:
.class {
background: rgba(0,0,0,0.5);
}
0.5 is the transparency, change the values according to your design.
Live demo http://jsfiddle.net/EeAaB/
more info http://css-tricks.com/rgba-browser-support/
Keep these three options in mind (you want #3):
1) Whole element is transparent:
visibility: hidden;
2) Whole element is somewhat transparent:
opacity: 0.0 - 1.0;
3) Just the background of the element is transparent:
background-color: transparent;
To achieve it, you have to modify the background-color of the element.
Ways to create a (semi-) transparent color:
The CSS color name transparent creates a completely transparent color.
Usage:
.transparent{
background-color: transparent;
}
Using rgba or hsla color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. Their alpha values range from 0 - 1.
Usage:
.semi-transparent-yellow{
background-color: rgba(255, 255, 0, 0.5);
}
.transparent{
background-color: hsla(0, 0%, 0%, 0);
}
As of the CSS Color Module Level 4, rgb and hsl works the same way as rgba and hsla does, accepting an optional alpha value. So now you can do this:
.semi-transparent-yellow{
background-color: rgb(255, 255, 0, 0.5);
}
.transparent{
background-color: hsl(0, 0%, 0%, 0);
}
The same update to the standard (Color Module Level 4) also brought in support for space-separated values:
.semi-transparent-yellow{
background-color: rgba(255 255 0 / 0.5);
}
.transparent{
background-color: hsla(0 0% 0% / 0);
}
I'm not sure why would these two be any better than the old syntax, so consider using the a-suffixed, comma-separated variants for greater support.
Besides the already mentioned solutions, you can also use the HEX format with alpha value (#RRGGBBAA or #RGBA notation).
That's contained by the same CSS Color Module Level 4, so it has worse support than the first two solutions, but it's already implemented in larger browsers (sorry, no IE).
This differs from the other solutions, as this treats the alpha channel (opacity) as a hexadecimal value as well, making it range from 0 - 255 (FF).
Usage:
.semi-transparent-yellow{
background-color: #FFFF0080;
}
.transparent{
background-color: #0000;
}
You can try them out as well:
transparent:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: transparent;
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `transparent`
</div>
hsla():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(250, 100%, 50%, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()`
</div>
rgb():
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: rgb(0, 255, 0, 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `rgb()`
</div>
hsla() with space-separated values:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: hsla(70 100% 50% / 0.3);
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `hsla()` with spaces
</div>
#RRGGBBAA:
div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: #FF000060
}
<img src="https://via.placeholder.com/200x100">
<div>
Using `#RRGGBBAA`
</div>
yes, thats possible. just use the rgba-syntax for your background-color.
.menue {
background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Here is an example class using CSS named colors:
.semi-transparent {
background: yellow;
opacity: 0.25;
}
This adds a background that is 25% opaque (colored) and 75% transparent.
CAVEAT
Unfortunately, opacity will affect then entire element it's attached to.
So if you have text in that element, it will set the text to 25% opacity too. :-(
The way to get past this is to use the rgba or hsla methods to indicate transparency* as part of your desired background "color". This allows you to specify the background transparency*, independent from the transparency of the other items in your element.
Technically we're setting the opacity, though we often like to speak/think in terms of transparency. Obviously they are related, inverses of each other, so setting one decides the other.
The number specified is the opacity %. 1 is 100% opaque, 0% transparent & vice versa).
Here are 3 ways to set a blue background at 75% opacity (25% transparent), without affecting other elements:
background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)
In this case background-color:rgba(0,0,0,0.5); is the best way.
For example: background-color:rgba(0,0,0,opacity option);
Try this:
opacity:0;
For IE8 and earlier
filter:Alpha(opacity=0);
Opacity Demo from W3Schools
Yes you can just plain text as
.someDive{
background:transparent
}
For your case, we can use rgba():
First, we manipulate the background-color, and use rgba.
.selector {
background-color: rgba(0, 0, 0, 0.3);
}
Now what this does is, it basically adds an opacity to your element, along with the black background color. This is how it'd look when you run it.
body {background-color: #0008f3;}
.container {
height: 100px;
width: 100px;
background-color: rgba(255,255,255,0.5);
}
<body>
<div class="container"></div>
</body>
full transparent -> .youClass{background: rgba(0,0,0,0.001);}
The title prettymuch says it all. The first picture below is a screenshot when the whole page is about 8000 pixels tall, taken in the latest version of Chrome:
while this picture is for a different page (using the same CSS) which is about 800 pixels tall:
and here is the code:
body{
background-color: #f3ffff;
margin:0px;
background-image: url('/media/flourish.png'),
-webkit-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-moz-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-o-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
The gradient is meant to cut off at 250px from the top of the page. The fact that the degree of banding seems to depend on the total height of the page is very strange: pages of heights in between these two (800px and 8000px) seem to have bands which are smaller than the first example but still noticeable.
Interestingly, I was previously using -webkit-gradient('linear'...) instead and that did not have the same problem; I only swapped over to -webkit-linear-gradient so it would fall in line with my -moz and -o gradients.
I haven't tried it on Safari, but the code above makes it work perfectly fine in Firefox and kind-of-work in Opera (the colors get messed up, but the gradient is still smooth). Nevermind IE, which i have given up on.
Has anyone else seen this before?
Update: This happens on my Mac's Chrome/Safari too, but the bands are about 1/3 the size of the bands shown in the top image, for the exact same page. The banding is identical in both OSX Chrome and OSX Safari.
1/3 the size is still noticeable, but not quite so jarring. The actual page is at http://www.techcreation.sg/page/web/Intro%20to%20XTags/, if you want to see for yourself in some other browser. The CSS is "inline" css compiled in-browser using less.js.
Looks like a webkit bug. I came up with the work-around below, tested on the latest Chrome and FF. In short, you'll position a div containing the background behind your main content. I also added a few styles to make IE happier.
Given this HTML:
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
Combined with this stylesheet:
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-moz-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-o-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-ms-linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* W3C */
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial, sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial, sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
It should come out looking like this, regardless of window size:
Your demo link does not work but i did some tests and it worked fine for me using Chrome when you add width/height of 100% to the body/html elements, like so:
body, html {
width:100%;
height:100%;
}
Demo
You can try that or you can just declare a header/logo piece where you can add the starting gradient and just add the ending gradient to the body of your css so it blends in correctly, like so:
CSS
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
body {
background-color: #f3ffff;
margin:0px;
height:10000px;
}
.header {
height:300px;
width:100%;
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
);
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
background-size:auto;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
HTML
<div class="header">
content
</div>
Demo
Friendly note: For anybody looking for the issue you can see it happening here in Chrome: http://jsfiddle.net/skJGG/
Seems like Chrome has some bugs when using the rgba() values. I tried with normal hex values and it seems to fix the problem for me.
Look here if it fix it for you also.
Edit
Looks like the problem is in the 250px limit because it only appears when that is set.
I didn't manage to come up with a better solution than this one.
Overlapping a div with the gradient you like, 250px tall. Then you can have the page as tall as you want because the div will always be 250px tall.
Webkit render -webkit-gradient('linear'...) and webkit-linear-gradient in the same way. The problem is with your multiple backgrounds. I had same issue and I was ended with two different elements on top of each other and then giving a background to each of them. Something like:
<body>
<div class="body-overlay"<div>
</body>
CSS
body{-webkit-linear-gradient(...)}
.body-overlay{background:url('blah.png')}
I think this happens because the image have fixed amount of pixels
instead of using background-image, try using this(background) -
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */
and also use hex values always. But from an UX prospective it would be better to use as in image(since you are loading an image anyway) and you won't have to worry about cross browser compatibility.
Have you tried setting background-size: auto, 250px 250px; — auto for first image and 250px for your gradient.
When you don't need a gradient image so big that it would cover whole page it's best to limit it's size. Besides rendering problems with big images, I think that it's better for the browser's performance.
So, you example would look like http://jsfiddle.net/kizu/phPSb/ (blindcoded, couldn't reproduce the problem though).
In any strange situation try to use:
transform: translateZ(10px);
In my case was the height of the body. Try the following:
body {
width:100vw;
height:100vh;
...
}