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.
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>
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 1 year ago.
I have managed to achieve what I'm trying to do from top to bottom using the following:
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(blue, blue);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
Is there a way to fill the div from bottom to top so that the lower half is blue and the other half is white in this example?
You can set background: blue as the first property and change the linear-gradient to the values of white, white to invert the declaration.
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
background: blue;
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, white);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
is this what you mean to do? You can change the background-size: 100% 70% to play with how far you want it to feed into the other space.
.test {
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, blue);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
<div class="test">
</div>
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>
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'm trying to make simple website with content background combined from 3 images: top bar, content background and bottom bar.
The problem is that content background appears under top and bottom bar, where should be transparency:
After and before adding BG CSS:
background-image: url('content-top.png'), url('content-bottom.png');
background-repeat: no-repeat, no-repeat;
background-position: left top, left bottom;
.
background-image: url('content-top.png'), url('content-bottom.png'), url('content-body.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: left top, left bottom, left center;
How can I solve this?
edit:
I've created same effect with CSS3, solving the problem:
background-color: #d9daca;
-webkit-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
border: 1px #8a8977 solid;
The easiest way to do it if you're using images is you create a div for each image within a container and either control the background via css properties or just drop the image into the div. The problem you have is that the top image is overlapping the background picture because its one div. Split it and it'll sort the issue, for example:
<div id="wrapper">
<div id="top"></div>
<div id="middle">
<!-- Content in here -->
</div>
<div id="bottom"></div>
</div>
That way all the divs are held within a wrapper. You may need to apply float: left !important; to some of the divs if you are having trouble getting them to line up properly. But this is what i do, and it works perfectly :)
Andy