I am trying to create a diagonal background that is mostly white and has an orange strip on the end using SCSS / CSS. I have this working on most browsers using linear-gradient, but as always, IE is messing up and behaving weirdly.
Here's a pen of what I'm doing and the SCSS that goes with it: https://codepen.io/WDACDavy/pen/eyzRgq
$orange: #f25b2e;
$white: #FFFFFF;
body {
background: #EEEEEE;
}
.slash {
width: 100%;
height: 500px;
background: linear-gradient(162deg, $white 0%, $white calc(50% - 5px), $orange calc(50% - 4px), $orange calc(50% + 4px), transparent calc(50% + 5px), transparent);
}
The HTML body is simply a <div class="slash"></div> element.
This actually WORKS in the pen until I inspect it, then it gets all blurry.
Blurry gradient
Any ideas?
EDIT: To be clear, the above code is NOT working in IE11 on Windows 7. It appears blurry like in the example picture above. If you inspect the codepen you will see what I mean.
Related
i have an issue writing linear gradient like this :
body {
background: linear-gradient(100deg, #ffff 0%, #fff0 100%);
}
But doesn't works on firefox or i wrong something ???
Please help me :/
It's working fine on Chrome, Edge and Firefox (on Window10).
You don't see anything because it's going from white (which is the normal color for your screen) to transparent white.
If you put a background color on you can seen it:
body{
background: linear-gradient(100deg,#ffff 0% ,#fff0 100%);
background-color: blue;
}
<body></body>
I have created a polka dotted background in pure CSS via:
.polka-gr{
background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
<div class="polka-gr" style="background-color:#77FFD1;width:600px;height:200px;></div>
As you can see, the background color is a greenish shade (of hex value #77FFD1).
Some of the clients this code is being served to do not support radial-gradient (e.g. those using Opera Mini browser). All such clients currently fall back to a plain #77FFD1 background without polka dots. Fair enough.
But is there any pure CSS way to get these non-supporting browsers to fall back to a different color entirely, e.g. #FFFF99?
Supporting browsers should still see the greenish background-color (#77FFD1) with polka dots.
Is such an arrangement possible? If so, an illustrative example would be great.
.polka-gr{
background: yellow;
}
#supports (background: radial-gradient(#F1C3CB 20%, transparent 0)) {
.polka-gr{
background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-color:#77FFD1;
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
}
<div class="polka-gr" style="width:600px;height:200px;></div>
To target different browsers you can use #supports
https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
In your case:
#supports (background: radial-gradient(white, black)) {
/* relevant styles here */
}
I have a really simple CSS radial gradient, which looks significantly different in different in Safari and others:
<style>
body {
background: #000;
}
div {
height: 200px;
width: 200px;
background-image: radial-gradient(100px, #1493a4 0%, transparent 100%);
}
</style>
<div></div>
Any ideas, how I could make them all look like the Safari version?
Safari Firefox
Fiddle: https://jsfiddle.net/2234zy6o/3/
I finally found a simple solution: Safari needs an own style:
background-image: -webkit-radial-gradient(#1493a4, transparent);
Just make sure to add it after the standard definition, other browsers then use the standard one and ignore the -webkit one, while Safari sees the first but then finds -webkit and ignores the standard.
But it's not quite the same, nevertheless. So I did some 'interpolation' and added some stops:
background-image: -webkit-radial-gradient(100px,
#1493a4 0%,
rgba(20,147,164,0.4) 40%,
rgba(20,147,164,0.2) 55%,
transparent 100%
);
It's still not the same but quite similar - at least I can live with it.
I am trying to make a simple shape in css that has 6 circles inside a rectangle. No problem with the basic shape except that my circles edges are not very smooth. Can anyone help with this as it looks a bit 8bit gamer at the moment
http://bootply.com/98298
You have a slight mistake in the syntax, the color stops should state increasing percentages.
The browser handles 2 stops of 95% - 10% as 95% - 95%; the 10% is not valid.
You can get a non pixelated edge by setting a little zone for the transition, say from 95% to 97%
your code
.panel {
background-color: #E67E22;
border-color: #E67E22;
color: #ffffff;
padding: 10px;
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 10%);
background-size: 34% 50%;
min-height: 100px;
}
more correct code
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 95%);
or
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 97%);
The first case makes a sharp change at 95%; the later makes a smoother change between 95% and 97%.
Note anyway that the syntax that you used is sometimes used, when you want a sharp transition, to somehow indicate "lower than the preceding stop".
I have this Jquery slider plugin for Wordpress, and it's just the jquery cycle plugin by Malsup.
Anyway, I added a caption in each slide. I just can't find a color that shows clearly in each slide. So I made a semi-transparent (50% opacity) png in Photoshop, 5px x 5 px. Currently, my CSS looks like this:
.homepage-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 100%;
}
I also tried using an absolute path to the png, but no go. Here's the result:
As you can see, the caption in the bottom is almost impossible to read. It'd be cool if I could find a way to have like ... this semi-transparent, yellow rectangular box and then have the black caption inside that box, so you could read the caption. Any help with this would be truly appreciated!
Mr.Jason
Try this Html and Css,
<body>
<div class="stroke-effect">
This text should have a stroke in some browsers
</div>
</body>
Css
body{
background-color:#000;
}
.stroke-effect{
font-weight:bold;
color: #000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
Check this http://jsfiddle.net/VqDKp/
Good Luck!
I'd recommend not using images. One reason is that png images with transparent backgrounds don't have transparency in some browsers (I know it maybe only older browsers but still).
Another reason. The image wont be positioned 100% of the background in your script.
I personally like using CSS made backgrounds as they pretty much cover all browsers types. Here's my background example for you :)
background:rgba(200,200,200,0.5); //50% silver-ish background.
You could use an opacity. But I wouldn't recommend that as it would effect the content in your p element as well as. I believe using an alpha filter would do the same but it's been a while since I've used them.
Here's a further example for you :)
background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(70,70,70,0.5) 30%, rgba(200,200,200,0.5) 100%);
//from top to bottom 100% transparent black.
//Very dark grey 50% transparent at 30% from the top of the element.
//Silver-ish 100% at the bottom at 50% transparency.
using the webkit extensions respectively for the above example :)
I hope this helps.