I'm looking for suggestions on the best way to achieve a diagonal slash across a page which will sit behind the main content area.
I'd like to achieve this without images or additional markup and be able to control the angle of the slash which would be retained if the browser width changed.
I was originally thinking the :after pseudo selector could be used for this, though perhaps SVG would be a better option?
Rough design of slash in light gray:
You can try using some borders in css3 here's a good example: http://www.cssportal.com/css3-shapes/.
See "Triangle Bottom Left".
check out this JSFiddle:
http://jsfiddle.net/anzhA/
Or you some other example:
http://jsfiddle.net/anzhA/1/
The trick is with css borders and width/height set to 0:
border-width: 0 500px 500px 0;
border-color: transparent white transparent transparent;
border-style: solid;
height:0;
width:0;
background:rgba(0,0,0,0.2);
This will show just the bottom-right shape of the border structure. It is triangle.
EXAMPLE
First, normal CSS border 2 colors.
Second, if you replace the second color to transparent and set width/height of the element to 0, and remove bottom and left border, you will get result
Try this:
background: -webkit-linear-gradient(
rgba(232, 232, 232, 1),
rgba(135, 60, 255, 0) 0%
),
-webkit-linear-gradient(-45deg, rgba(231, 229, 229, 0.9) 55%, rgba(229,230,216,1)
0%);
Related
I have the following CSS code:
background: rgba(0, 0, 0, 0.5) url(bg1.png) top left/auto 50em repeat, url(bg2.png) top left/50% 100% no-repeat;
I think it's syntactically right according to this w3schools reference.
However, neither Chrome nor Firefox shows any background for the div it is applied to. What can be the issue?
According to Mozilla MDN:
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
selector {
background: url(bg1.png) top left/auto 50em repeat,
rgba(0, 0, 0, 0.5) url(bg2.png) top left/50% 100% no-repeat;
}
try with
background: rgba(0, 0, 0, 0.5) url('bg1.png') top left 50em repeat, url('bg2.png')
My goal is to give some divs a top and left inner shadow. To do that, I have given the divs two background-images with linear-gradient:
background-image: linear-gradient(90deg, #263B4B 0, transparent 50px),
linear-gradient(180deg, #263B4B 0, transparent 50px);
This looks fine in Chrome 39 and IE 11, but not in Firefox 32.
Firefox doesn't display it correctly.
At first, I had the following CSS, which worked fine, but since there are many divs with this shadow, the page rendering was extremly slow to unusable, especially on mobile. So I don't want to use box-shadow.
box-shadow: 18px 31px 95px 0px rgba(0, 0, 0, .2) inset;
How do I get this to work on Firefox without using an image file?
JSFiddle: http://jsfiddle.net/eLkhwoqg/2
Firefox's interpolation between other color stops and the transparent keyword isn't quite right. Because transparent corresponds to rgba(0, 0, 0, 0), Firefox is using that value to calculate the gradient, except it is doing so in non-premultiplied RGBA space, which results in the gradient transitioning from your given color to black. We know this behavior is in fact incorrect, because the spec says so.
Fortunately, the workaround is easy: simply use a zero alpha version of the same color you're using and Firefox will interpolate the gradient correctly:
background-image: linear-gradient(90deg, #263B4B 0, rgba(38, 59, 75, 0) 50px),
linear-gradient(180deg, #263B4B 0, rgba(38, 59, 75, 0) 50px);
Once this is fixed, you will be able to use the transparent keyword going forward.
I need to change the length of the dash in a border bottom. I want to make the length of each dash 30px. Is there any chance to do this without using any images?
Without any images it's impossible. But it can be done without loading any images — with CSS gradients (which are basically generated images):
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%) repeat-x left bottom;
background-size: 60px 1px;
I would like to create an rectangular overlay where the border is semi-transparent and the inner area is not transparent.
If I tweak the opacity parameter of the outer div (that contains the border) - than all the internal elements become transparent as well, which is unwanted.
Please advice.
Try this instead of using opacity, if you are alright with using CSS3:
border: 2px solid rgba(255, 0, 0, 0.5);
That should give you solid red that is 50% transparent. Check out this intro to rgba if you want more info.
EDIT
If you aren't using an actual border, note that rgba can be used in any place where CSS expects a color, like background-color.
http://jsfiddle.net/nicktheandroid/F8v2c/3/
I'm trying to make a radial gradient that flows seamlessly between 2 sibling elements - starting from 10px or 20px to the right of the button, flowing down about half way down through the ".content" div.
I believe this just takes correctly positioning the gradients for both elements so it looks like it's one flowing radial gradient, that's the problem, I've been trying to do this but I've become frustrated - and the answer might help others.
There's a background behind the menu, so I cannot simple 'white-out' the portion next to "features" in the image below - see the jsfiddle.
See image for example.
I've posted a quick update to your jsfiddle at http://jsfiddle.net/F8v2c/9/
To work out the position you need to set a height on the button, then you know how much to offset the gradient by. On the button we have:
padding:10px;
height:21px;
So we know the total height of the box is 41px
(21px height +10px top padding +10px bottom padding)
So to have the centre of the gradient 10px below the button we would use 51px for the vertical position, the horizontal doesn't matter as long as it is the same on both the button and the dropdown. Unless the button and dropdown are the same size percentages will not work, so we will set the size of the circle in pixels (300px).
background-image: radial-gradient( 74px 51px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);
On the drop-down the css is almost the same except instead of the centre of the gradient being 10px below the bottom it is 10px from the top.
background-image: radial-gradient( 74px 10px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);