I can't manage to make backdrop-filter (blur) work for some reasons...
I've already tried looking at this question and this question already asked, but couldn't figure it out and implement it in my case. I've also tried not nesting my items and just place them one above the other using position: absolute but it gives exactly the same result.
If that can help I'm working on a React 18.2 + Tailwind 3.2 environment and tried to show you my issue using plain HTML / JS.
Here's a simplified version of my code :
#result {
/* Using a background image, but any image would do the job */
background-image: url("https://www.radiofrance.fr/s3/cruiser-production/2022/06/5f6ac5ab-37d9-4ca6-8f79-3694fcfec071/560x315_paysage-monet.webp");
width: 400px;
height: 200px;
z-index: 0;
}
#filter {
width: 400px;
height: 100px;
background-color: blue;
opacity: 0.3;
backdrop-filter: blur(6px);
z-index: 1;
}
<div id="result">
<div id="filter"></div>
</div>
You need to put your background-color with alpha value if you want to have a background with less opacity.
When you apply opacity, it'll be applied to the whole element. So you need to remove the opacity and change your background-color as below:
#result {
/* Using a background image, but any image would do the job */
background-image: url("https://www.radiofrance.fr/s3/cruiser-production/2022/06/5f6ac5ab-37d9-4ca6-8f79-3694fcfec071/560x315_paysage-monet.webp");
width: 400px;
height: 200px;
}
#filter {
width: 400px;
height: 100px;
background-color: rgba(255,255,255,.25);
backdrop-filter: blur(6px);
top:0;
left:0;
right:0;
}
<div id="result">
<div id="filter"></div>
</div>
How can I make a div in HTML and apply a gradient background like in the picture:
I have tried some js-fiddle snippets but was unable to do some thing like this in the image it will be used in a pricing table for displaying latest discounts. The other alternate I have is to use the hard quote the image in my pricing table.
http://www.hongkiat.com/blog/css-gradient-border/
I tried the above link and applied border-radius:50% but didn't got the desired result.
Border images are not yet well supported, so I think you need to use two containers with one being styled with background: linear-gradient():
https://jsfiddle.net/nsvn00px/
<div class="circle">
<div class="circle__inner"></div>
</div>
CSS:
.circle {
position: relative;
width: 50px; height: 50px;
border-radius: 50%;
background: linear-gradient(to right, red, green);
}
.circle__inner {
position: absolute;
width: 46px; height: 46px;
top: 2px; left: 2px;
border-radius: 50%;
background-color: white;
}
This can also be done within one container with the use of pseudo classes, but I think this should give you a better idea how it works.
Please excuse me if this question has been answered before, but I couldn't find an answer when searching.
Essentially what I'm trying to do is to create a header bar which is 107px high and spans 100% width of the page with a split in colour 50% (50% the left is white, 50% on the right is green) along its width. I have been able to accomplish this using CSS gradients, however I work in the education sector and schools seem to be reluctant to use anything but legacy versions of IE and so, inevitably, it doesn't work properly.
Is there anyway to do this which is IE friendly or is there any kind of work around that can give me the same or similar results?
Thanks in advance!
You have a couple of options:
Use a background image (5px high, really wide, left half is white, right half is green) - it'll cost you less than 100 bytes.
Why not use two divs (floated left, both 50% width)?
Here is the HTML:
<div class="header">
<div style="background: white;">
white bg
</div>
<div style="background: green;">
green bg
</div>
</div>
Here is the CSS:
.header { overflow: hidden; height: 107px; border: 1px solid #000;}
.header div { float: left; width: 50%; height: 100%;}
http://jsfiddle.net/PUWCh/
Like this? http://jsfiddle.net/2gGdD/
I'm using pseudo selectors (works back to IE8) to create each half and layer them behind the div with a negative z-index so you can place content on top of them.
.header {
height: 107px;
position: relative;
width: 100%;
}
.header:before,
.header:after {
content: '';
height: 100%;
position: absolute;
width: 50%;
z-index: -1;
}
.header:before {
background: red;
left: 0;
}
.header:after {
background: blue;
right: 0;
}
I've searched a whole bunch but couldn't find anything that was coming close to it..
I want to have a horizontal line that has an image centered in it..
What's the best way of achieving this with the HR tag or any different way?
This is the image that I want to use: http://www.dylanvanheugten.nl/images/logo.png
Thanks in advance!
This might get you started:
HTML:
<div class="line">
<span class="logo"></span>
</div>
CSS:
.logo {
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
padding: 0 5px;
height: 50px;
width: 50px;
background: #fff url(http://www.dylanvanheugten.nl/images/logo.png) no-repeat 50% 50%;
}
.line {
position: relative;
overflow: visible;
height: 1px;
background-color: #ddd;
border: 1px solid #ddd;
}
Here's a fiddle you can play with: http://jsfiddle.net/4tZLD/1/
You can refer to this article. Maybe you can find a solution that covers all the browsers (or at least the ones you care about):
http://www.sovavsiti.cz/css/hr.html
I think that you want something like this, if I understood right.
http://jsfiddle.net/9yjmU/
HTML:
<div class="image">
<img src="http://www.dylanvanheugten.nl/images/logo.png"/>
</div>
<div class="line">
</div>
CSS:
.image{
text-align: center;
}
.line{
border-top: 1px solid black;
margin-top: -20px;
}
You can see that I used a div with a border-top and a margin-top: -20px; so it's in the center of the image (which looks 40px; height).
HTML:
<div class="line">
<img src="http://www.dylanvanheugten.nl/images/logo.png" class="lineImg">
</div>
CSS:
.line {
border-bottom: 1px solid black;
text-align:center;
height:17px;
margin-bottom:17px;
}
.lineImg {
background-color:white;
padding:0px 5px 0px 5px;
}
see: http://jsfiddle.net/V5wj6/3/
the height and margin-bottom of .line need to be exaclty half the height of img, this way, the image will be vertically centered on the line and the following content wont be directly under the border.
in the .lineImg style the background-color makes it look better by removing the line underneath the img, and the padding gives it some more space, you will have to adjust the background-color to your page
This, hopefully, will finally deliver a simple solution to the never ending quest to centre a horizontally placed graphic and auto locate on resize. The calc() method is supported by most browsers. The below syntax uses a graphic with a 728px width.
Full width = 728px, get 50% = 364px. Then apply the following:
#imagecentre1 {
left : calc(100% / 2 - 364px);
/*rest of syntax */
}
It is important to ensure 'white space' either side of '+' and "-" this to ensure that values, both negative and positive work correctly and for the sake of continuity the practice should apply to '/' and '*'. I'm sure someone will confirm order of execution, from memory it will be +, -, x, /. Calc() has basic features, no 'auto'!!
Expect some limitations. Just give it wirl!
I want to achieve this using html and css:
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
jsFiddle of my try here
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
You can use opacity in combination with background color, like this:
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Live demo
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
You can't apply an opacity property without affecting a child element!
"Opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another... If you do not want to apply opacity to child elements, use the background property instead." https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
If you want the opacity to be applied only to the background, without affecting the child elements, use:
background-color: rgba(255, 255, 255, .3)
However, you can achieve the desired effect if you place them inside a div parent element and use CSS position property:
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
}
<div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}
<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>
See a working codepen here
Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.
Apply this css rule
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
For more details visit the following link:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Any child of an element with opacity set will take on that opacity.
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
Another workaround is to simply use an overlay background to create a similar effect.
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
Use such elements that you can add :before or :after. My solution
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
Css.
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
Using a tiled image might seem dated but will work no worries across all browsers.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
And use no background on your container.
Now container's children have no opaque parent and the problem vanishes.