I'm trying to add a ribbon to a page using CSS3 linear-gradients, but the rendering in Chrome looks a lot less pleasant than its Firefox or IE alternative. The color stops in Chrome look very pixelated, but using vendor prefixed properties doesn't work as they don't allow specifying a degree.
#extradiv1 {
position: absolute;
top: 0;
right: 0;
width: 121px;
height: 71px;
background: url(../img/ribbon.png);
background: linear-gradient(30deg,
transparent 61px,
rgb(255, 204, 51) 61px,
rgb(255, 204, 51) 76px,
rgb(22, 22, 22) 76px,
rgb(22, 22, 22) 91px,
transparent 91px
);
}
<html>
<body>
<div id="extradiv1"></div>
</body>
</html>
Source code can also be found at http://jsfiddle.net/xyFXx/2/
Is there any way to solve this choppy rendering in Chrome?
This is a rather old question, but I thought I'd chip in in case anyone is still looking for answers.
If you're not concerned about IE older than 9, transform:rotate should yield better-rendered results (transparent angled gradients can indeed get choppy or get gaps at gradient joins).
You could do this with two rotated divs, or with a single div and associated pseudo element. Here's the CSS:
.rotatedDiv {
position: absolute;
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
}
#extradiv1 {
top: 20px;
right: -30px;
width: 200px;
height: 20px;
background: rgb(255,204,51);
}
#extradiv2 {
position: absolute;
top: 0;
right: -20px;
width: 170px;
height: 20px;
background: rgb(22,22,22);
}
Fiddle: http://jsfiddle.net/brianhewitt1/m4KBC/
Related
I used background-blend-mode: lighten; to essentially lighten the intensity of the black background image (refath.github.io/Survey). While it works perfectly on Desktop, I checked the site on my phone, and for some reason, the black background simply overrides the background-blend-mode, if that makes sense. I even tried using !important to override any libraries that may be interfering with the design, but to no avail. Here's the relevant code:
CSS:
body{
padding: 20px;
margin: 0;
background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
background-color: rgba(255, 255, 255, 0.95);
background-blend-mode: lighten !important;
max-width: 100%;
overflow-x: hidden;
}
<body>
</body>
On Desktop (Chrome):
On iPhone X (Chrome):
Any help would be greatly appreciated. Thanks.
I don't see Chrome for iOS on caniuse's list, but browser support for that css rule is still spotty. It could be that there simply isn't support for it yet. Since Edge doesn't support it, it's typically good to have a backup plan for when it fails. Have you tried other browsers on iOS?
Why not using overlay of color on a body
body{
padding: 20px;
margin: 0;
background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
max-width: 100%;
overflow-x: hidden;
position: relative;
}
body:before{
content: '';
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95); /* Your desire color */
z-index: 2;
}
OR
<div id="overlay"></div>//place inside body tag
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Your desire color */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}
I have encountered a weird issue, while trying to implement a custom background on website I'm working on.
I've written a proof of concept code piece on codepen and it works perfectly there, but when I try to implement it on website it does not.
body {
background: black;
}
.background-test {
background: white;
width: 20%;
margin: 2% 50%;
height: 250px;
padding: 1%;
position: relative;
}
.background-test:before {
width: 100%;
height: 100%;
content: "";
background: red;
position: absolute;
z-index: -1;
bottom: -3%;
left: -2%;
-webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
}
<div>
<div class="background-test">Lorem Ipsum</div>
<div></div>
</div>
https://codepen.io/Hassansky/pen/eEaQxG/
You can see that the :after pseudo element is positioned correctly - in theory. When I try to implement this into the website I'm working on, it just doesn't show. Chrome Dev tools shows it's there, just not displaying it. It does show up when I disable the z-index on dev tools, but then it stacks on top of the parent, as it should.
I tried to look for stacking issues, but I'm at wits end and cannot find any reasonable explanation for this.
This is a Wordpress website loaded with theme, but this should not present an issue with z-index stacking, especially when I cannot find any rule regarding z-indexes there.
Page url: http://polkrys.pl/cukiernia/podklady-cukiernicze-okragle-biale/
I've marked which elements should have pseudo-elements on them.
I'm adding SASS code that relates to elements in question:
.polkrys_shadow {
position: relative;
&:before {
width: 100%;
height: 100%;
content: "";
background: red;
position: absolute;
z-index: -1;
bottom: -3%;
left: -2%;
-webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
}
The margins and paddings are defined within wordpress visual composer. I suggest inspecting mentioned elements with Dev Tools - you'll see it should work - but it doesn't.
The parent element of the :pseudo-element requires a z-index declared as well in order for the z-index of the :pseudo-element to function as intended. But doing so will stack the :pseudo-element over the parent element, concealing the background and nested content.
To rectify this, nested content should have a higher z-index declared. And an additional :pseudo-element (:after) should be declared to overlay the initial :pseudo-element (:before) with the background fill applied (e.g: "white"), to conceal the initial pseudo-element only allowing the overflow to reveal.
.logistic-bg .polkrys_shadow:after { /* Additional pseudo-element added */
content: "";
background: white;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.logistic-bg .polkrys_shadow { /* Adjustments made on parent element */
z-index: 9;
}
.logistic-bg div:first-child { /* Adjustments made on nested element */
position: relative; /* required for z-index to apply */
z-index: 99;
}
I found this solution:
el {
transform-style: preserve-3d;
}
el:before {
transform: translateZ(-1px);
}
<div>
<div class="background-test">Lorem Ipsum <div style="z-index:100;color:blue;background-color:yellow;">vgghuu</div>
</div></div>
body {
background: black;
}
.background-test {
background: white;
width: 20%;
margin: 2% 50%;
height: 250px;
padding: 1%;
position: relative;
z-index: 1;
}
.background-test:before {
width: 100%;
height: 100%;
content: "";
background: red;
position: absolute;
z-index: -1;
bottom: -3%;
left: -2%;
-webkit-clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
clip-path: polygon(2% 4%, 100% 0, 99% 97%, 0 100%);
}
Trying to add an angled border to my header and then also adding a box shadow around the angled border.
Seems to work fine but on Firefox there is some white background showing around the box shadow.
Code is as follow
header {
background: #41ade5;
color: #fff;
position: relative;
z-index: 1;
padding: 45px;
}
header:after {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-1.5deg);
transform-origin: 100%;
z-index: -1;
box-shadow: 0px 4px 4px rgba(0,0,0,0.5)
}
body {
margin:0;
}
http://codepen.io/velnias2015/pen/KaBzrq
Looks fine on all other browsers, is there a fix for firefox ?
Add translateZ(1px) to fix the antialiasing issue with the transform.
transform: translateZ(1px) skewY(-1.5deg);
Render issues with transforms are common and modifying 3d transform properties are often the best way to fix them because it causes the browser to render using different methods. Other common fixes in this same vein but don't seem to apply here are: backface-visibility: hidden and perspective: 1px.
I have a background image and want to add a transparent fill color on top of that. I use modern browsers like Firefox and Google Chrome.
This code works (but does not solve the problem)
background: url('bkg.jpg'), rgba(0,0,0, .5);
This code don't work (but should solve my problem)
background: rgba(0,0,0, .5), url('bkg.jpg');
Why? Solution?
https://developer.mozilla.org/en/CSS/background says:
Note: The background-color can only be defined on the last background,
as there is only one background color for the whole element.
http://www.w3.org/TR/css3-background/#layering says:
The background color, if present, is painted below all of the other
layers.
http://www.w3.org/TR/css3-background/#background-color says:
This property sets the background color of an element. The color is
drawn behind any background images.
Maybe you could use the :before/:after pseudoelements instead with absolute positioning.
http://jsfiddle.net/3mNkZ/3/
div {
background: rgba(0,255,0, .5);
width: 200px; height: 200px;
border: 10px solid red;
position: relative;
font-size: 100px;
color: white;
}
div:before {
background: url('http://placekitten.com/200/150');
content: ' ';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
You have to make a div that is the same size as the window to get the effect.
Here is a jsfiddle and the code below.
html{
background: url('http://tribulant.net/lightbox/files/2010/08/image-2.jpg');
}
.color {
background-color: rgb(100,0,0);
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
}
I have problem positioning left sidebar (variating height DIV) ON IE6.
Main needs:
1. I cant set height value, cause height is variating and should be computed by browser.
2. Sidebar must have top and bottom spacings.
Top bar issue is solved by replacing position to relative.
Any ideas ? Thank you in advance !
Below you can see simplified code and snapshot how it looks on standard browsers.
.container {
left: 550px;
top: 10px;
width: 196px;
position: absolute;
line-height: 0px;
font-size: 1px;
}
.inner {
width: 100%;
height: 114px;
background-color: rgb(227, 227, 227);
}
.leftbar {
left: 0px;
top: 7px;
bottom: 7px;
width: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
.topbar {
left: 7px;
top: 0px;
right: 7px;
height: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
<div class="container">
<div class="inner"></div>
<div class="leftbar"></div>
<div class="topbar"></div>
</div>
LINK TO SCREEN SHOT IMAGE
IE6 is tremendously bad when it comes to absolute positioning. Positioning something at the same time from left and right or from top and bottom just doesn't work.
You basically have four options:
Drop support for IE6.
Give up on absolute positioning and use some other method (floats for example).
Provide dumbed down version of the site for IE6 - for example overriding some styles using conditional comments.
Use JavaScript to aid IE6 in positioning (for example absolutefudge.js).