Just a short question
Is there a shorter way of writing this code so that all 3 are covered in one rule?
border-left: 2px solid #006699;
border-right: 2px solid #006699;
border-bottom: 2px solid #006699;
You would use the border shorthand and then set border-top to none. (example here)
border: 2px solid #006699;
border-top: none;
Related
I have looked at similar questions asked before and did not find this to be the same.
I wanted to create row border on hover and added css with left and right borders for the first and last cells in the row respectively.
My HTML:
<table>
<tr><td>1111111</td><td>22222222</td><td>3333333333</td></tr>
<tr><td>4444444</td><td>55555555</td><td>6666666666</td></tr>
<tr><td>7777777</td><td>88888888</td><td>9999999999</td></tr>
</table>
My css:
table {
border-collapse: seperate;
border-spacing:0;
}
tr:hover td {
border-top: 1px groove #E8E8E8;
border-bottom: 1px groove #E8E8E8;
}
tr:hover td:first-child {
border-left: 1px groove #E8E8E8;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
tr:hover td:last-child {
border-right: 1px groove #E8E8E8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
But adding the border radius makes the border for the cells on the ends lighter.
I have created a JSFiddle for it at Border radius changes color
I have been using Chrome 55 which changed the color for the first and last cells, but only on top. Using Safari 10 changes the color for both bottom and top borders.
I'm not quite sure, but it seems to be some wonky anti-aliasing, worsened by the use of a groove at 1px. Using either a groove at 2px or a solid 1px seems to fix it, although it still lops off a bit on the sides. Is that intentional or also unwanted?
try this css code
table {
border-collapse: seperate;
border-spacing:0;
}
tr:hover td {
border-top: 1px groove #E8E8E8;
border-bottom: 2px groove #E8E8E8;
}
tr:hover td:first-child {
border-left: 1px groove #E8E8E8;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
tr:hover td:last-child {
border-right: 2px groove #E8E8E8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
change the right and bottom borders width to 2 pixels
i'm new to gnome-shell modding. i've been struggling to make some modification to my gnome-shell theme. i like the concept of old-ish, simple *box desktop. so i tried to modified my gnome-shell to looks like one.
i tried to make some bevel on my gnome-shell, and it turned out to be like this. i don't know what's wrong with my code, i tried many combination.
http://i.stack.imgur.com/E0aRq.png
i want to make at least like this one, is it possible?
http://i.stack.imgur.com/gFuL1.png
here's my code
.panel-button {
-natural-hpadding: 12px;
-minimum-hpadding: 8px;
font-weight: bold;
color: #4A4A4A;
border: 3px solid #000000;
border-top: 3px solid transparent;
border-bottom: 5px solid #000000;
box-shadow:
1.5px 1.5px 0px rgba(0,0,0,1), /*bottom external highlight*/
0px 0px 3px #666, /*top external shadow*/
inset 0 -1px 1px #000000, /*bottom internal shadow*/
-1px -1px 1px rgba(255,255,255,1); /*top internal highlight*/;
}
sorry for my bad English.
I dont know if there is something special to gnome shell when it comes to styling but expect this to work.
JSFiddle
button {
height: 25px;
background: #ddd;
border-bottom: solid 1px #aaa;
border-right: solid 1px #aaa;
border-top: solid 1px #fff;
border-left: solid 1px #fff;
}
button.active {
border-bottom: solid 1px #fff;
border-right: solid 1px #fff;
border-top: solid 1px #aaa;
border-left: solid 1px #aaa;
}
Is there a way to make the border bigger than the div that it's attached to? For example, if the div dimensions were 10x10, could I make the border 20x10?
Yes you can:- check this link - http://jsfiddle.net/QnTqh/2/
div{
width:100px;
height:100px;
border:1px solid red;
border-width:200px 200px 10px 10px;
}
You can use the following to control each side independently:
border-top: 10px solid #000;
border-right: 20px solid #000;
border-bottom: 10px solid #000;
border-left: 20px solid #000;
Or make them all the same:
border: 20px solid #000;
There is this triangle that is made with css: http://jsfiddle.net/W3hNx/1/
How can I make it face up? :)
Thanks!!
Just change border-top to border-bottom in .triangle. updated jsFiddle
Change
border-top: 30px solid green;
to
border-bottom: 30px solid green;
in .triangle selector.
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 30px solid green;
this will make the triangle face up
Is there a way of combining border-top,border-right,border-left,border-bottom in CSS like a super shorthand style.
eg:
border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
No, you cannot set them all in a single statement.
At the general case, you need at least three properties:
border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;
However, that would be quite messy. It would be more readable and maintainable with four:
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
Your case is an extreme one, but here is a solution for others that fits a more common scenario of wanting to style fewer than 4 borders exactly the same.
border: 1px dashed red; border-width: 1px 1px 0 1px;
that is a little shorter, and maybe easier to read than
border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red;
or
border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;
I can relate to the problem, there should be a shorthand like...
border: 1px solid red top bottom left;
Of course that doesn't work! Kobi's answer gave me an idea. Let's say you want to do top, bottom and left, but not right. Instead of doing border-top: border-left: border-bottom: (three statements) you could do two like this, the zero cancels out the right side.
border: 1px dashed yellow;
border-width:1px 0 1px 1px;
Two statements instead of three, small improvement :-D
No you can't set them as single one
for example if you have
div{
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
same properties for all fours then you can set them in single line
div{border:2px solid red;}