I'm trying to put my triangle responsive, because it only works on desktop computers, how can i do that?
I have a code here, and i want to turn my div into a responsive div, for mobile phones, tablets...
triangle code:
*{
background-color: black;
padding:0;
margin:0 auto;
}
.triangle-down {
width: 0px;
height: 0px;
border-style: solid;
border-width: 642px 187.5px 0 187.5px;
border-color: #007bff transparent transparent transparent;
}
html code
<div class="triangle-down"></div>
if you do not mind using background-radient, this could be an alternative as body background:.
http://codepen.io/gc-nomade/pen/mBjtC
body {
background:
linear-gradient(
to top left,
black,
black 50%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0)) top center no-repeat,
linear-gradient(
to top right,
black,
black 50%,
#007bff 50%,
#007bff ) top center no-repeat;
background-size:40% 200%;/* set your own values and units here */
background-color: black;
padding:0;
margin:0 auto;
min-height:100%;
}
html {
height:100%;
}
You should probably use percentages instead of pixels, you can work out the equivalent by dividing the pixel size by the context, which is usually the size of the body container which you haven't declared but is usually 1000px for ease. To use ems, it's divided by the base piel size, or you can use a converter, if you haven't declared a base font size it's usually 16px http://pxtoem.com/
Related
In order to add a repeating-linear-gradient in CSS one can do this with something like the following code. It will create a nice div-element with horizontal bars.
.gradient {
background: repeating-linear-gradient(90deg, green, green 10px, #ffffff 10px, #ffffff 20px);
}
div {
width: 390px;
height: 50px;
border: 1px solid black;
}
<div class="gradient"></div>
The challenge however is to have this repeating gradient stop/end half way through the element. The last half of this element should not display the gradient. How can this be achieved?
A possible solution would be to use linear-gradient instead and hard-code all your needed bars. But given the rather large amount of code you would have to write for this solution this is not desirable.
Other searches on the internet did not review how this could be done for this specific use case. With the help of the MDN documentation for example, one can lookup how repeating-linear-gradient works. But since it does not provide an example for this situation, I do not know the best approach for this problem.
Define the gradient size and disable the repetition:
.gradient {
background:
repeating-linear-gradient(90deg, green 0 10px, #ffffff 0 20px)
left / 50% 100% no-repeat;
/*position / width height */
}
div {
width: 390px;
height: 50px;
border: 1px solid black;
}
<div class="gradient"></div>
After some amount of fiddling around I came to the following solution, where I introduce a linear-gradient on top of the repeating-linear-gradient, giving the illusion that the gradient had stopped. This works by having the first part of this linear-gradient be completely transparent by setting the last value of rgba to 0.0.
.gradient {
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgb(255, 255, 255) 50%),
repeating-linear-gradient(90deg, green, green 10px, #ffffff 10px, #ffffff 20px);
}
div {
width: 390px;
height: 50px;
border: 1px solid black;
}
<div class="gradient"></div>
Inspiration for this answer came from this other stackoverflow question and I have modified the code for this specific purpose.
i am trying to create a grid in a div using background.
naturally, the background-size property is a nice way to create a grid, where a size of 10% will create 10 evenly-spaced cells in the div, e.g.:
div{
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
}
<div>x</div>
however, i also need box-sizing to be "border-box" because otherwise the box takes up more pixels than specified via the width property. and this causes all kinds of havoc in Chrome with the background-size by percentage specification, e.g.:
div{background-color:white;}
#d1 {
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
box-sizing:border-box;
}
#d2 {
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
}
<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>
note that there are more than 10 cells displayed in the top div (d1), despite the fact that each is supposed to be 10% of the div width.
it seems that this is only a Chrome issue, but if someone has the solution to this, please let me know.
I admit I never played with this thing before, but it looks like you need to account for the 1px width of the background-image. Now don't ask me why, but it just works. Tested it with different percentages and widths. If you need the why, not only the how, you'll have to dig through W3C's docs yourself or wait for a better documented answer.
div {
background-color:white;
width:200px;
border:solid 1px black;
background-size: calc(10% + 1px), 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
box-sizing:border-box;
}
div ~ div {
width:300px;
}
<div>exactly 10%</div>
<p>
<div>also exactly 10%</div>
Cheers!
Check the progress bar code. How it work?
.progress-bar{
background-color: blue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
height: 40px;
width: 400px;
}
<div class="progress-bar"></div>
background-size: 40px 40px; that means 40px width and 40px width for the box. How two width work tougher? background-size First place image then place gap. Background image will start 0 to 40px then place 40px gap then 40px image. It's infinity until full width is complete. Look your first snippet background-size: 10% 1px; Browser render 10 gap from total width using 1px width image.
Note: background-size will work when you set background-image. Otherwise background-size property will not work.
Hope this help.
Andrei Gheorghiu's answer was really good, but wasn't consistent across all browsers, and was a few pixels off for some separator locations. Anyway, here's the more consistent answer, seems to work everywhere:
div {
background-color:white;
width:200px;
border:solid 1px black;
background: repeating-linear-gradient(to left, red, red 1px, white 2px, white 10%);
box-sizing:border-box;
}
div ~ div {
width:300px;
}
<div>exactly 10 red separators</div>
<div>also exactly 10 red separators</div>
Is it possible to achieve something like background-repeat: space and/or background-background: round when using a repeated gradient either as a background-image, or border-image-repeat: space|round when using a repeated gradient as a border-image in browsers besides FF?
This was inspired by Create a perfect dashed line with background-image in CSS, which asks for a way to have a dashed line without partial dashes at the end. In that case, the background-image was an image file, so background-size: repeat or background-repeat: round will work (depending on the exact needs).
But I can't get that to work with a linear-gradient or repeating-linear-gradient as background-image or border-image. Just a couple examples:
div {
outline: 1px solid red;
margin-bottom: 40px;
}
#linear-gradient-background-image {
padding-bottom: 10px;
background-position: left bottom;
background-size: 28px 8px;
background-image: linear-gradient(to right, #000 75%, transparent 0%);
background-repeat: round no-repeat;
}
#repeating-linear-gradient-border-image {
padding-bottom: 0;
border: 0 solid #000;
border-bottom-width: 8px;
border-image: repeating-linear-gradient(to right, #000, #000 21px, transparent 22px, transparent 28px) 1;
border-image-repeat: round;
}
<div id="linear-gradient-background-image">
linear-gradient background-image
</div>
<div id="repeating-linear-gradient-border-image">
repeating-linear-gradient border-image
</div>
The first example (#linear-gradient-background-image) works in FF. But otherwise, there are widths at which a partial dash is drawn at the right hand edge of the div.
In webkit browsers, the #linear-gradient-background-image's dash can be seen doing some sort of adjustment when the container is resized, but I'm not sure what it's doing and whatever it is isn't what I'm hoping for.
Please take a look at this fiddle: http://jsfiddle.net/jpftqc26/
A CSS gradient, starts black from left, turns into red, then back to black again. Really simple.
Is there any way I can make the red part 500px wide and the black parts fill the screen, whatever the resolution? With red in the middle, just like in the fiddle.
Is there a way do define a width in pixels, between color stops, in a CSS gradient?
Code:
.test_gradient {
background:
linear-gradient(
to right,
#000000,
#000000 20%,
#ff0000 20%,
#ff0000 80%,
#000000 80%
);
Yes. you can do this with hard pixels points and the use of the calc function.
Just set them as such:
http://jsfiddle.net/jpftqc26/9/
CSS:
.test_gradient {
background:
linear-gradient(
to right,
#000000 0px, /* Starting point */
#000000 calc(50% - 250px), /* End black point */
#ff0000 calc(50% - 250px), /* Starting red point */
#ff0000 calc(50% + 250px), /* End red point */
#000000 calc(50% + 250px), /* Starting black point */
#000000 100% /* End black point */
);
Another way to do it, without using calc(), is to use 2 different gradients
.test_gradient {
background-image:
linear-gradient( to left, #ff0000 0px, #ff0000 250px, #000000 100px), linear-gradient( to right, red 0px, #ff0000 250px, #000000 100px);
background-size: 50.1% 1000px;
background-position: top left, top right;
background-repeat: no-repeat;
}
One goes to the right, the other to the left, and each one has half the total width
fiddle
At the moment I can't think of how to do it with only CSS gradients and a single element.
Given your example, and assuming an extra div is ok, then here's an alternative approach without gradients (http://jsfiddle.net/jpftqc26/2/):
HTML
<body class="background">
<div class="foreground"/>
</body>
CSS
html, body {
width: 100%;
height: 100%;
}
.background {
background-color: #000000;
}
.foreground {
background-color: #ff0000;
width: 100%;
max-width: 500px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
This produces the same effect, uses one additional element, and provides a red foreground that will grow to a max of 500px wide--beyond that it is all black on both sides. If you want the red to always be 500px wide then just remove the max-width rule and change width to 500px.
If you want that black part was flexible and red part was fixed you could use something like this:
html{height:100%;}
.test_gradient {
background: #000000;
position:relative;
margin:0;
height:100%;
}
.test_gradient:after{
content:'';
position:absolute;
top:0;
height:100%;
width:500px;
left:50%;
margin-left:-250px;
background:#f00;
}
DEMO
I think that the best solution, without adding any html element, is to use an image as background:
.test_gradient {
background: url('http://s14.postimg.org/zf0kd84lt/redline.jpg') repeat-y #000 center top;
}
http://jsfiddle.net/Monteduro/jpftqc26/3/
Is it possible to have both background-image and background gradient color applied together in 1 div tag? (CSS3 and above is ok)
I have the below code, the gradient background color does show up, but the background-image doesn't.
What am I missing?
background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#2e2e2e));
background-image:url('/uploads/image1.jpg') no-repeat;
-webkit-background-size: 33px 33px;
border-bottom:1px solid #636363;
height:39px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius: 10px;
Thanks,
Tee
The gradient property is part of the backgrounds module, so you need to specify background-image, not just background.
you'll want to use background size as well to ensure the background isn't full height.
For a simple example, have a look at www.Dartrite.co.uk.
Gradients are values that can be used in place of images. With backgrounds, the gradient is the value of the background-image property. So you can't have both an image and a gradient (though you can specify an image first and then override it with a declaration of a gradient for browsers that support gradients).
Using the :after & :before pseudo-selectors, you can have up to 3 different backgrounds, layered: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/. Hope this helps!
Yes you can use background images with gradients, Like this:
.example {
height: 200px;
width: 200px;
background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, linear-gradient(45deg, #000, #F00) repeat scroll 0% 0% transparent;
}
<div class="example"></div>
Pretty much just using the background shorthand property with two comma separated values.
Its working fine check it
.example {
background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, transparent linear-gradient(45deg, #000, #f00) repeat scroll 0 0;
border-bottom: 1px solid #636363;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
height: 200px;
width: 200px;
}
<div class="example"></div>