I need help applying a gradient border on all the 4 sides of a box. I tried it, but it only works for two sides. After looking at all the links and SO answers I have got this:
.test{
height:250px;
border: 2px solid;
border-image: linear-gradient(to left,rgba(78,137,176,1) 1%, rgba(115,192,85,1) 100%) 100% 0 100% 0/2px 0 2px 0;
padding-top:50px;
}
<div class="test">
This is a box and I want borders for all the sides
</div>
I would appreciate any help. I am trying something similar to the image below.
Thank you.
Using background image: (produces the exact output as your image)
You seem to be having gradients that are different on each sides and so it is difficult to achieve this with the border-image property. You could try and mimic the behavior using background-image like in the below snippet.
Basically what the below snippet does is that it creates the gradient for each of the 4 sides as gradient background image strips and then uses background-position to place them on the correct location.
The transparent border on parent is a placeholder where the mimiced border would end up appearing. The background-origin: border-box makes the background of the element start from border-box area itself (and not padding-box or content-box). These two are just extra steps to avoid the usage of unnecessary calc stuff in the background-position.
.test {
height: 250px;
border: 2px solid transparent;
background-image: linear-gradient(to right, rgb(187, 210, 224), rgb(203, 231, 190)), linear-gradient(to bottom, rgb(114, 191, 87), rgb(116, 191, 86)), linear-gradient(to left, rgb(204, 233, 187), rgb(187, 210, 224)), linear-gradient(to top, rgb(84, 144, 184), rgb(80, 138, 176));
background-origin: border-box;
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat;
padding-top: 50px;
}
<div class="test">
This is a box and i want border for all the side
</div>
Using border image: (produces a border on all 4 sides but not same output as your image)
The best output that you could get with border-image property would be the below but as you can see from the demo it is not exactly the same as your image (or the first snippet's output):
.test {
height: 250px;
border: 2px solid;
border-image: linear-gradient(to left, rgba(78, 137, 176, 1) 1%, rgba(115, 192, 85, 1) 100%);
border-image-slice: 1;
padding-top:50px;
}
<div class="test">
This is a box and i want border for all the side
</div>
I realized this for myself in this way:
the background changes inside the background-image.
div {
width: 170px;
height: 48px;
border-style: solid;
border-width: 2px;
border-image-source: linear-gradient(to bottom, #fff042, #ff5451);
border-image-slice: 1;
background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451);
background-origin: border-box;
background-clip: content-box, border-box;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
<div>text</div>
Related
A CSS Layout Problem
Currently I'm not happy with my standard <hr> dotted lines. The results are far from the holy grail dotted lines I was looking for.
hr{
border-bottom: 1px dotted Black;
border-top: none;
margin: 1em 0;
}
Please open image at 100% scaling in a separate window.
The dots are too close to each other and I don't want dashed lines with black stripes. I want dots but with more spacing in between them.
Desire for (and Design of) the Pure Elusive Holy Grail Dotted Line
In my dreams I see in front of me a pure CSS dotted line, like in this image (made in Photoshop).
Please open image at 100% scaling in a separate window.
A horizontal rule that meets the following criteria:
A height of 1px
A repeating pattern of 2 pixels transparent gap followed by a 1 Black pixel
Has a 100% width (give or take 3 pixels)
From the first dot till the last dot, at no point are there dots pushed together (black dots too close together) or pulled apart (more than 2 pixels gap spacing in between Black dots)
A pure CSS layout using CSS Background Radial-Gradient
Where I'm stuck now
I cannot get this to work properly yet. What have I overlooked and why is the following not working?
hr{
background-image: radial-gradient(circle closest-side, Black 100%, Black 100%);
background-position: 0 0, 100% 100%, 0 0;
background-repeat: repeat-x;
background-size: 3px 1px;
}
Until the solution, the search for the elusive holy grail hr remains untackled.
html{ margin: 7em; background: #EEE}
article { background: lightblue; height: 100px; padding: 2em}
hr{
border-bottom: 1px dotted Black;
border-top: none;
margin: 1em 0;
}
hr{
background-image: radial-gradient(circle closest-side, Black 100%, Black 100%);
background-position: 0 0, 100% 100%, 0 0;
background-repeat: repeat-x;
background-size: 3px 1px;
}
<article>
<p> Text </p>
<hr>
<p> Text </p>
</article>
The following code works. Although I have no idea why and how precisely. Other more elegant answers, improvements and suggestions are welcome that can further explain the workings of the magic here.
After many trials I have figured out that the first number represents the gap size and the second number represents the dot width in background-size: 3px 1px;
hr{
border: none;
background-image: radial-gradient(circle closest-side, Black 100%, Transparent 100%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 3px 1px; // GAP width and DOT width
height: 1px;
}
html{ margin: 4em; background: #EEE}
article { background: lightblue; height: 100px; padding: 2em}
hr{
border: none;
background-image: radial-gradient(circle closest-side, Black 100%, Transparent 100%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 3px 1px; /* First Nr is the GAP width, second Nr is the DOT width */
height: 1px;
}
<article>
<p>Text</p>
<hr>
<p>Text</p>
</article>
I have used in my code:
<span style="border-right-style: dashed; border-right-width:thin;">
Also, see attached image
I just want the line like as right side in the image (3 dashes).
This can be done by using the background image as follows.
div {
padding: 10px 50px;
}
.dashes {
background-image: linear-gradient(to bottom, #333 80%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 1px 14px;
background-repeat: repeat-y;
}
<div class='dashes'>My text</div>
Or you can also use some small icon/thumbnail image of the 3 dashes to put it between your text.
You can use the SVG or small image of dased as icon images. These will help to put more designs of dashes.
I just noticed this little glitch in my CSS, but the only browser that has trouble with it is Chrome.
The glitch is the flat grey color that appears on the left side of my #box
I made a JSFiddle to duplicate the error :
http://jsfiddle.net/mar6E/
I would like the gradient to be white (#ffffff), and then at the last 92% fade to #f4f4f4 then #dddddd.
This works fine until I add that image in there, and then set the position of the image to 10px 17px.
I guess Chrome positions the background gradient as opposed to all the other browsers.
Any workarounds / suggestions greatly appreciated! Thanks!
In your fiddle and in your code, you forgot to set the position that you talk about.
But my paranormal powers let me guess that you had:
#box {
height: 200px;
width: 200px;
background: url(http://braidio.com/images/icon-dashboard.png) no-repeat, linear-gradient(to right, #ffffff 80%, #f4f4f4 92%, #dddddd 100%);
border: 1px solid blue;
background-position: 10px 17px;
}
When you should have had:
#box {
height: 200px;
width: 200px;
background: url(http://braidio.com/images/icon-dashboard.png) no-repeat, linear-gradient(to right, #ffffff 80%, #f4f4f4 92%, #dddddd 100%);
border: 1px solid blue;
background-position: 10px 17px, 0px 0px;
}
If you set only a background position, it affects the 2 backgrounds ...
I'm trying to create a banner which spans the page width. A centered container measuring 1130px within this region holds five blocks of color at 20% of the container. Behind this container should be two divs at 50% each - one containing the first color swatch and the other containing the last to create a seamless palette but maintain the same width.
The issue I'm having at the minute is that the .modal-container which holds the five colour blocks will not display on top of the two background blocks .modal-left and .modal-right. I've tried tinkering with the z-index values of all three classes to no avail. position: absolute isn't an option either as this knocks the margin: 0 auto alignment off. Any ideas?
JSFiddle
The effect I'm looking for
EDIT:
I just got really carried away and did a total overhaul on that code. I'M SORRY I COULDN'T HELP MYSELF LOL
New and improved ya dig.
Your HTML simply needed some re-arranging. The inner div placed above the other two fixed it right up.
CSS (updated):
.modal {
background-image: -webkit-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -moz-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -ms-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -o-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: linear-gradient(to left, #3e454c 50%, #ff7f66 50%);
background-size: cover;
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
height: 54px;
width: 100%;
max-width: 1130px;
}
.modal-inner {
position: relative;
max-width: 1130px;
}
.modal-block {
float: left;
width: 20%;
height: 27px;
}
.una {
background: #3e454c;
background: rgba(62, 69, 76, .5);
}
.dos {
background: #2185c5;
background: rgba(33, 133, 197, .5);
}
.tres {
background: #7ecefd;
background: rgba(126, 206, 253, .5);
}
.cuatro {
background: #fff6e5;
background: rgba(255, 246, 229, .5);
}
.cinco {
background: #ff7f66;
background: rgba(255, 127, 102, .5);
}
HTML (less is more :) ):
<div class="modal">
<div class="modal-inner">
<div class="modal-block una"></div>
<div class="modal-block dos"></div>
<div class="modal-block tres"></div>
<div class="modal-block cuatro"></div>
<div class="modal-block cinco"></div>
</div>
</div>
See demo here http://jsfiddle.net/Godinall/cq27S/3/
First, re-arrange your divs to put the 50/50 underneath
Second, and most importantly, add this to .modal-inner
I believe this is better solution than setting position/margins
display:block;
I have fixed a similar problems with diagonal gradient.
Now it's difficult with linear.
I was able to create a gradiet with a cross
background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%),
linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);
I can't create a gradient that have in the left half a gradient to bottom WHITE-RED and in the right half an inverse gradient RED-WHITE.
The below is the way I had tried to create it:
background: linear-gradient(to bottom, transparent 50%,#ff0 100%),
linear-gradient(to right, transparent 50%,#f00 100%);
But the yellow part is full! How can I fix this situation?
This is what I want:
It is very much possible to achieve this using a single element and a single background rule. Just give each of the gradients 50% size of the container in the X-axis, position one gradient on the left side and the other on right side using background-position and stop the gradient from repeating by setting the value for background-repeat as no-repeat.
div {
height: 100px;
background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
/* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
background-size: 50% 100%, calc(50% + 1px) 100%;
background-position: 0% 0%, 100% 0%;
background-repeat: no-repeat;
}
<div></div>
Edit: It is possible with one background, see Harry's answer.
It's not directly possible with a single background rule on your element, but you can utilize the ::before and ::after pseudo elements.
div {
width: 100%;
height: 50px;
border: 1px solid black;
position: relative;
background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
content: "";
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, #ff0 100%);
}
<div></div>