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;
}
Related
Am trying to make the bottom line tab become transparent (blue here) when the tab is selected.
On the picture below it works on the "active" state, when I click, but once selected, the tab still show the blue lie at the bottom, cf. second picture.
Below is my CSS code.
.tab-pane {
border-left: 3px solid #ff6a00;
border-right: 3px solid #ff6a00;
border-bottom: 3px solid #ff6a00;
border-radius: 0px 0px 0px 0px;
padding: 0px;
}
.nav-item {
background-color: #efefef;
border-left: 3px solid #007BFF;
border-right: 3px solid #007BFF;
border-top: 3px solid #007BFF;
border-bottom: 3px solid #007BFF;
}
.nav-item:active {
border-bottom-color: transparent;
}
.nav-item:current {
border-bottom-color: transparent;
}
.nav-tabs {
margin-bottom: 0;
}
Since the .active class is set on nav-link, the custom borders should also be set on nav-link...
.nav-tabs .nav-link {
background-color: #efefef;
border-left: 3px solid #007BFF;
border-right: 3px solid #007BFF;
border-top: 3px solid #007BFF;
border-bottom: 3px solid #007BFF;
}
.nav-tabs .nav-link.active {
border: 3px solid #007BFF;
border-bottom-color: transparent;
}
Demo
I’m trying to adapt some css code I found, however my table seems ugly (according to me). I'll explain this on a picture.
css:
td, th {
border-left: 1px solid #494437;
border-top: 1px solid #494437;
padding: 10px;
text-align: left;
}
th {
background-color: #b8ae9c;
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
td:first-child, th:first-child {
border-left: none;
}
I explained what I want by an image:
EDIT: For example I expect white area on right side, when I add padding-right: 0.2em; into "th". But it doesn't change anything.
Is this what you are expecting?
.table {
border: 1px solid #000;
float: left;
}
.header {
border: 2px solid #ccc;
border-width: 2px 0 0 2px;
background-color: #b8ae9c;
margin: 2px;
float: left;
}
<div class="table">
<div class="header">Header</div>
<div class="header">Header</div>
</div>
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;
I would like simply an effect like is shown with the Sign in / register buttons on this website:
http://css-tricks.com/forums/entry/register
I've tried "Inspect Element" on this page but can't figure out how its being achieved.
i.e. hover over them and they change subtly. Click them and they appear to be "pressed in" for as long as you hold the mouse key down. Release mouse key and they pop back out.
Using a javascript solution at the moment but not very happy with it. Would prefer to leave javascript out. Far too much effort trying to get it to work in Chrome as well as IE.
I suppose you mean the active state. Fiddle.
.button, #rcp_submit {
display: inline-block;
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
font-family:'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
padding: 9px 16px;
line-height: 1.4;
position: relative;
top: -5px;
}
.button:hover, .button:focus, #rcp_submit:hover, #rcp_submit:focus {
color: white;
background: #3d57b4;
}
.button:active, #rcp_submit:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-webkit-transform: translate(3px, 3px);
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-o-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
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;}