I'm experiencing issues with dreaded IE again.
I have created a single line divider that separates different elements on a page. The code itself is working great in webkit browsers as it would but I can't seem to replicate the effect in IE. I have attempted to use CSS gradient generators but they do not replicate the fading effect.
My code is below
#home-single-line {
margin: 25px 0;
height: 1.4px;
background: white;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#123f67), to(#123f67), color-stop(50%, #fff));
position: absolute;
top: 55px;
left: 580px;
width: 550px;
}
The effect I am trying to achieve can be seen here
and the background colour is the background colour I am using on my website
Please help, IE will be the death of me!
Thanks for your time.
Use an <hr> element and style it. See CSS Tricks code for your example, it looks identical: http://css-tricks.com/examples/hrs/
Related
I am making an website on which, I am looking for an effect that I can not reproduce. I might be making it all wrong so I am going to explain the effect how I am planning on doing it but I am open for other perspectives of course.
The effect:
I have a background image (whole screen) I covered it with a dark grayish color. I also have a 100 by 100 pixels round div following my mouse pointer. My goal is to make this round div a kind of "window" that could see through the dark gray and so reveling the background image on mouse movement.
My method :
styled the background image to be z-index: 1, height: 100vh and width: 100vw.
styled the background gray color to be z-index: 2, height: 100vh, width 100vw and background-color: gray;
styled the div following my pointer to be z-index: 3, height: 100px, width:100px, border-radius: 50% and backdrop-filter: opacity(0);
Of course I have simplified everything and I can tell the backdrop-filter is working with other options like blur or grayscale... But I don't know why the opacity options seems to do nothing at all. I have read that backdrop-filter: opacity() would require other CSS settings like mix-blend-mode. But I have tried quite a few without success.
I know I am thinking only in CSS right now, hence I am open to other suggestions with or without CSS. If you need more details do not hesitate. I am going to make an example on codeSandBox and edit my post to make it easier to understand.
If you can use Js this will work
let image = document.querySelector('#image');
document.body.addEventListener('mousemove', e => {
image.style.clipPath =
`circle(100px at ${e.pageX}px ${e.pageY}px)`;
});
body {
margin: 0;
}
#background {
width: 100vw;
height: 100vh;
background: rgba(24, 24, 24);
position: fixed;
}
#image {
width: 100vw;
height: 100vh;
background: url("https://images.unsplash.com/photo-1542831371-29b0f74f9713") no-repeat;
background-size: contain;
background-position: center;
position: fixed;
clip-path: polygon(0 0);
cursor: none;
}
<div id="background"></div>
<div id="image"></div>
It works basically by updating the clip-path property when the mousemove event is fired.
Edit:
I'll assume you don't know Js, so I'll add that you can play with the circle size (and even its shape) by changing this line:
circle(100px at ${e.pageX}px ${e.pageY}px)
to
circle(75px at ${e.pageX}px ${e.pageY}px)
or even this
polygon(${e.pageX}px ${e.pageY + 25}px, ${e.pageX - 25}px ${e.pageY - 25}px, ${e.pageX + 25}px ${e.pageY - 25}px)
Be sure that the z-index is effective. Remember that it only applies on positioned elements, which mean that if your background-image and div do not have a "position" attribute it will not take the z-index into consideration.
I have a fixed position element at the bottom of the page bottom: 0 with a background colour of black. It's a navigation element that has things scrolling behind it.
I'm trying to do a stained glass effect using backdrop-filter: blur(20px) so I need to change the opacity of the background-color: rgba(18,18,18,0.3).
When I add the filter change, the fixed element goes up 1px, which means I can see a pixel of the things scrolling at the bottom of the page.
Why is this happening?
What can I do to prevent/fix this?
Thanks in advance!
.myDialog {
padding: 5px 10px;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(20px);
position: fixed;
bottom: 0;
}
body {
background: green;
}
<div class="myDialog">
I don't disappear when you scroll!
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>aksldjnaskjdnaksjdnakjsdnakjnsdkajsndakjsndkajsndkjasndkjasndkjandkjanskdjnaskdjnaskjdnakjsdnakjsndkajndkjasndkjansd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
(there's a piece of text that when you scroll through, you see it behind the fixed box).
https://jsfiddle.net/379heofx/2/ (in case code above doesn't show, which boggles my mind even further)
screenshot of issue:
You can try and use the opacity keyword instead.
So like this:
yourelement {
background-color: black;
opacity: 0.3
}
It's well known that Chrome has trouble displaying text at a net rotation without blurring it. However, at a net 0 rotation (e.g. rotating a container element +1deg and the text itself or another container -1deg) this shouldn't be the case, as the offset is 0. And indeed, in the sample I've cooked up here, if you look at it in Chrome, you should see that the text isn't blurred:
.container {
background: linear-gradient(46deg, #fff, #f2f2f2, #e8e8e8);
background-size: 600% 600%;
animation: backgroundGradient 30s ease infinite;
max-width: 85%;
position: relative;
margin: 5%;
padding: 5vw;
transform: rotate(-.5deg);
outline: 1px solid transparent;
}
.sheet {
transform: rotate(0.5deg);
font-size: 16px;
}
html,
body {
min-height: 100%;
height: 100%;
width: 100%;
background: linear-gradient(45deg, #e43624, #e74b3b, #ea6052);
animation: backgroundGradient 30s ease infinite;
background-size: 600% 600%;
overflow-x: hidden;
font-size: 16px;
font-family: Sarala;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Sarala%7CGochi+Hand" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="sheet">
<section>
<p>
This is a long block of text with the rotation system. Yay. Let's see if this works
</p>
</section>
</div>
</div>
</body>
</html>
Now you might think that's a lot of styles which are beside the point, and you'd be right - because the trouble is, this exact same situation doesn't work on my portfolio website. If you browse to https://mashedkeyboard.me/ in Chrome, you'll find that the text is ever-so-slightly blurred still, despite the entire setup having been replicated in the sample above.
Initially, I thought this must have been an issue with some of the surrounding styles, which is why I put all the container styles into the sample here. But no joy - I still can't replicate the issue elsewhere.
The only thing which I can do to fix the issue is activate the :hover on the profile image on the side of the site, which appears in the Chrome Layer Debugger as flattening the entire page to a single layer for the duration of the rotation for some reason - but this isn't possible to apply permanently.
None of these issues affect Firefox or Edge at all; both render the text smoothly with no issues.
I'm a bit stumped at this point. If anyone has any ideas on 1) why this is happening in the first instance, or 2) how it might be possible to get around it, they'd be greatly appreciated.
For anyone who searches this issue up for whatever reason, it turns out it's a Blink compositing bug. It's being actively worked on at the moment.
I'm using :before and :after pseudo elements to create shapes. In this case triangular shape that need to be shown as the end of a rectangle. I'm finding myself with this issue which I do not understand why it's happening. The image should look like this image 1, but it looks like image 2.
image 1 (all browsers except FF):
image 2 (Firefox):
As asked here you have a jsfiddle with the code:
http://jsfiddle.net/LpXxM/
.news-info a:before {
position: absolute;
top: 0;
left: -20px;
border-right: 20px solid rgba(64, 64, 64, 0.85);
border-top: 20px solid transparent;
content: "";
}
I just checked and it seems the issue is simply with the left css property. If instead of left: 20px, it would be left: 22px it works with Firefox, but of course the rest of browsers are then wrong. So, why in the heck firefox has 2px difference with the other browsers? And how to solve this or target this issue?
I'm using normalize as a reset for the site. Can somebody help?!
I've been testing with borders with opacity and Webkit seems to be having a weird behavior.
Here's my code
<style>
div{
position: relative;
width: 300px;
height: 300px;
background: #00f;
}
span{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
}
</style>
<div>
<span></span>
</div>
You can test it here. In Firefox you'll get as expected: a 10px white inner border with 50% opacity around the div, however, at least Chrome (but I suspect Webkit) seems to be overlapping the border's borders (somehow that makes sense). And I think it's not intented, since it seems to be overlapping itself!
Is this a bug or just an intended feature?
Bug on the Chrome issues list (guess what, nobody cares):
http://code.google.com/p/chromium/issues/detail?id=36475&q=transparent%20border%20color&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
Taking a look at the spec, this indeed seems like a bug:
http://www.w3.org/TR/css3-background/#box-shadow-samples
The examples, too, have an inner border with alpha and show Firefox like behavior.
The problem you have is discussed in detail here:
http://snook.ca/archives/html_and_css/safari-transparent-borders
If you change the opacity value of the colliding borders just a tiny bit you get a non-perfect fix, hope that helps.