I'm trying to make this jsfiddle (http://jsfiddle.net/kkbdex3p/) look more like this: http://i.imgur.com/8FxmAeR.jpg
More specifically, what I notice is that in the image, the borders between the sections appear to have this padding on the top and bottom, so that the border is not full height. Is it possible to do this in my jsfiddle example, i.e. make the red borders have a padding on top and bottom so they aren't full height?
I've thought of adding a new element like so:
<li class="divider"></li>
And maybe trying to style that (1px wide, padding on top and bottom), but I get weird results and I'd love a css only solution if possible. Any ideas?
You could use the :after psuedo-element to achieve this:
li {
display: inline-block;
position: relative;
padding: 0 20px;
}
li:after {
display: block;
position: absolute;
top: 5px;
bottom: 5px;
border-right: 1px solid red;
content: '';
margin: 0 -20px;
}
li:first-child:after { display: none; }
jsFiddle Demo
Related
Quick and simple question,
is there a quick way to change on a button, the distance from the borders edge to the "real" edge of the element.
I dont want to get the border further away, i want that the background is spread 1 or 2 px more over the edge of the border.
Google does not show me the right solution or I'm searching with wrong terms, hope some of you can help me.
Since my question is not clear, here is an picture of what try to achieve
https://picload.org/view/rpogroor/test.png.html
What you need to use over here is the pseudo element. The trick is to have a normal button but not to use a border on that. Insted, use an :after pseudo element and using CSS positioning, we can simulate the effect you want, that is, the background spreads beyond the dashed border.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
button {
-webkit-appearance: none;
background: #ede032;
padding: 10px 20px;
border-radius: 20px;
border: 0;
position: relative;
margin: 40px;
}
button:after {
content: "";
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom: 3px;
border: 1px dashed #515151;
border-radius: 20px;
}
<button>Hello There</button>
Here, the code is pretty self explanatory. I am having a simple button, where am setting some basic styles like background, border-radius and so on. Later, am having an :after pseudo where I use the dashed border which then I overlay over the button using CSS Positioning.
Your question is un-clear. What do you mean by
from an borders edge to the "real" edge of the element.
Are you trying to not display the border? If that's the case then you can always set the border to have a transparent color which would not show the border.
You can add padding to the button to increase space between its contents and the edge of the button.
Is this what you want?
padding:5px 10px ;
This means that the : Top and bottom padding are 5px.
Right and left padding are 10px.
By default a button has padding : 1px 6px; So to increase it by 1 or 2 pixels, just use appropriate values.
.spaced-out {
padding: 5px 10px;
}
<button>Hello</button>
<br><br>
<button class="spaced-out">Hello</button>
You want box-sizing:border-box.
This will ensure that, no matter the border-width, the element will be the same size. I assume this is what you want although the question is not very clear what you're looking for.
Notice the difference between the boxes with borders:
.flex-cont {
display: flex;
width: 100%;
height: 300px;
align-items: center;
justify-content: center;
}
.flex-item {
margin: 10px;
height: 200px;
background: blue;
flex: 1;
border: solid 20px green;
}
span {
display: block;
position: relative;
top: 45%;
text-align: center;
width: 100%;
}
.one {
box-sizing: content-box;
}
.two {
border: none;
}
.three {
box-sizing: border-box;
}
<div class="flex-cont">
<div class="flex-item one"><span>box-sizing: content-box</span></div>
<div class="flex-item two"><span>No border</span></div>
<div class="flex-item three"><span>box-sizing: border-box</span></div>
</div>
Here is a new JS fiddle based on your edit.
New JS Fiddle
Is there any way I can only add margin to the border ?
Only border should have margin not the text.
I am trying to move border not the text field. Border need to be shrinked/moved not text.
CSS :
.margin-check {
border-bottom: 1px solid #d2d7da;
margin-left : 15px;
}
HTML :
<div class="margin-check">
Something I am typing for checking the border margin
</div>
JS Fiddle:
https://jsfiddle.net/c91xhz5e/
You can use pseudo-element and then you can change size of border
.margin-check {
display: inline-block;
position: relative;
}
.margin-check:after {
position: absolute;
content: '';
border-bottom: 1px solid #d2d7da;
width: 70%;
transform: translateX(-50%);
bottom: -15px;
left: 50%;
}
<div class="margin-check">
Something I am typing for checking the border margin
</div>
In general the margin is from the content which in this case is your text. You have to use box sizing property to set the margin from you border.
* {box-sizing:border-box;}
This way the margin for all your elements will be from the border box and not the content box
In your case, where you have no borders left and right, you can simply adjust the line-height.
.margin-check {
line-height:2em;
}
You can use text-indent.
.margin-check {
border-bottom: 1px solid #d2d7da;
margin-left : 15px;
text-indent: 15px;
}
<div class="margin-check">
Something I am typing for checking the border margin
</div>
I've been trying to create a titlebar and left-side panel using div's and css, but as in the screenshot below,
is it possible to create a curvature using css, similar to the red
curvature I've drawn with paintbrush?
You'll also notice a visible blue colour difference between
the yellow arrows. Is it possible to have a more uniform gradient?
I'd like a uniform gradient on the vertical and horizontal panels.
What I'm actually trying to achieve is shown in the bottom half of
the image. A uniform panel with shadows at the edges. Is it possible
to create using CSS or do I have no other option other than to design
it in GIMP and use an image for the entire vertical and horizontal
panel (it's hard to design in GIMP too)?
A jsfiddle example or a link to an existing example would help best. I'm not new to programming, but am new to css.
You could use :after :pseudo-element for that cut and apply inset box-shadow to achieve this.
For the text Logo, Title and Menu you could add spans and apply display: inline-block to first two spans.
body {
background: #C4C4FF;
}
div {
width: 250px;
height: 100px;
position: relative;
background: #8080FF;
}
div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
background: #C4C4FF; /* This color must be same as background */
border-top-left-radius: 30px;
box-shadow: inset 6px 6px 10px -6px #666;
}
span {
display: block;
font-weight: bold;
font-size: 18px;
color: white;
width: 125px;
height: 50px;
text-align: center;
line-height: 50px;
}
div span:nth-of-type(1),
div span:nth-of-type(2) {
display: inline-block;
}
<div>
<span>Logo</span
><span>Title</span>
<span>Menu</span>
</div>
I want to add a vertical line between the green blocks in the following image. I am using :after to do that. However I do not want to display the line after the last block. Is there any trick to do that?
CSS:
.block{
width: 20px;
height: 20px;
margin-right: 20px;
background: green;
float: left;
}
.block:after {
content: '';
width: 0;
height: 100%;
position: absolute;
border: 1px solid black;
top: 0;
left: 10px;
}
Demo:
http://jsfiddle.net/rhwb7b2o/
Note: The height of the list items varies. HTML markup can be changed if required.
Add position:relative to the li elements so that each line does not cover the whole ul.
Then add li:last-child .block{position:relative;overflow:hidden;} to handle the last element.
Demo at http://jsfiddle.net/gaby/qj2dbdkz/
Use the :not selector with the :last-child selector. Like this:
.block:not(:last-child):after { /* ... */ }
I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:
table td {
border-right:1px solid #000;
}
It works fine but the problem is that the border's height takes the total TD's height.
Is there a way to set the height of the border?
I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.
It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.
.your-item {
position: relative;
}
.your-item:after {
content: '';
height: 100%; //You can change this if you want smaller/bigger borders
width: 1px;
position: absolute;
right: 0;
top: 0; // If you want to set a smaller height and center it, change this value
background-color: #000000; // The color of your border
}
No, there isn't. The border will always be as tall as the element.
You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:
background:url(line.png) bottom right no-repeat;
Yes, you can set the line height after defining the border like this:
border-right: 1px solid;
line-height: 10px;
For td elements line-height will successfully allow you to resize the border-height as SPrince mentioned.
For other elements such as list items, you can control the border height with line-height and the height of the actual element with margin-top and margin-bottom.
Here is a working example of both:
http://jsfiddle.net/byronj/gLcqu6mg/
An example with list items:
li {
list-style: none;
padding: 0 10px;
display: inline-block;
border-right: 1px solid #000;
line-height: 5px;
margin: 20px 0;
}
<ul>
<li>cats</li>
<li>dogs</li>
<li>birds</li>
<li>swine!</li>
</ul>
Building on top of #ReBa's answer above, this custom-border class is what worked for me.
Mods:
working with border instead of backaground-color since background-color is not consistent.
Setting height & top of the properties of :after in such a way that the total comes up to 100% where bottom's value is implicit.
ul {
list-style-type: none;
display: flex;
flex-direction: row;
}
li {
padding: 10px;
}
.custom-border {
position: relative;
}
.custom-border:after {
content: " ";
position: absolute;
border-left: 1px #6c757d solid;
top: 35%;
right: 0;
height: 30%;
margin-top: auto;
margin-bottom: auto;
}
<ul>
<li class="custom-border">
Hello
</li>
<li class="custom-border">
World
</li>
<li class="custom-border">
Foo
</li>
<li class="custom-border">Bar</li>
<li class="custom-border">Baz</li>
</ul>
Good Luck...
No, you cannot set the border height.
This will add a centered border to the left of the cell that is 80% the height of the cell. You can reference the full border-image documentation here.
table td {
border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}
Just like everyone else said, you can't control border height.
But there are workarounds, here's what I do:
table {
position: relative;
}
table::before { /* ::after works too */
content: "";
position: absolute;
right: 0; /* Change direction for a different side*/
z-index: 100;
width: 3px; /* Thickness */
height: 10px;
background: #555; /* Color */
}
You can set height to inherit for the height of the table or calc(inherit - 2px) for a 2px smaller border.
Remember, inherit has no effect when the table height isn't set.
Use height: 50% for half a border.
Demo
table {
border-spacing: 10px 0px;
}
.rightborder {
border-right: 1px solid #fff;
}
Then with your code you can:
<td class="rightborder">whatever</td>
Hope that helps!
Currently, no, not without resorting to trickery. borders on elements are supposed to run the entire length of whatever side of the element box they apply to.
.main-box{
border: solid 10px;
}
.sub-box{
border-right: 1px solid;
}
//draws a line on right side of the box.
later add a margin-top and margin-bottom.
i.e.,
.sub-box{
border-right: 1px solid;
margin-top: 10px;;
margin-bottom: 10px;
}
This might help in drawing a line on the right-side of the box with a gap on top and bottom.
table td {
border-right:1px solid #000;
height: 100%;
}
Just you add height under the border property.