I usually put 0 as value when i want to remove something in css. For example:
border: 0;
background: 0;
Is there any difference between 0 and none?
When used with composite styles like border and background, the values will correspond to different properties.
border: 0 will set border-width: 0 while border: none will set border-style: none.
background: 0 will set background-position: 0 while background: none will set background-image: none.
So, there is a difference. In the case of the border, the difference doesn't make any visual difference as both remove the border, but for the background it can make a difference if you also set any other background properties.
Related
I'm looking to "cut" the top left corner of a tab, like if you had folded the corner of a page down.
Are there any methods?
My code:
.tab:before {
-fx-position: absolute;
-fx-top: 0;
-fx-right: 0;
-fx-border-top: 300px solid white;
-fx-border-left: 200px solid red;
-fx-width: 0;
-fx-background-color: transparent;}
return:
.jar!/css/tabs.css: expected series of while parsing '-fx-border-top' at [9,20]
Many of these properties are not supported: I don't know where you are getting them from.
There is no -fx-position, -fx-top, -fx-right property (in general, JavaFX CSS is used for style, not for layout).
There is no -fx-border-top or -fx-border-right property: border sizes are specified by -fx-border-width: top right bottom left syntax, and similarly border colors are specified by -fx-border-color. There is a -fx-border-radius property, which I think is the one you are looking for.
There is no :before pseudoclass.
So you can try something like this (which is not tested; provide a complete example in your question if you want tested code in the answers):
.tab {
-fx-border-color: white, red ;
-fx-border-width: 1 0 0 0, 0 0 0 1 ;
-fx-border-radius: 5 0 0 0 ;
}
Refer to the JavaFX CSS reference guide for an actual list of defined properties.
It's also worth noting that in the default styles, borders are almost never used directly. The preferred way of creating a border effect in modena is to use "nested backgrounds". Using this approach your CSS might look like:
.tab {
-fx-background-color: white, red, -fx-body-color ;
-fx-background-insets: 0, 1 0 0 0, 1 0 0 1 ;
-fx-background-radius: 10 0 0 0 ;
}
For more complex shapes (other than just rectangles with rounded corners), you could also use the -fx-shape property, using SVG syntax to define the shape of the tab.
It's useful to look at the source code for the default stylesheet to see how this all works. You probably want to change the styles for .tab:selected to make selection play nicely with your styles.
I decided to do it a lazy way, set the image in the background in the format I wanted and left the background transparent.
.tab {
-fx-background-image: url("../icons/pane.png");
-fx-background-size: stretch;
-fx-background-color: transparent;
-fx-padding: 0px 20px 0px 20px;
Tab
I have a select form in Bootstrap 4 with dark background, when I select an option I want the background after selection to stay dark. My example works in Chrome and Firefox. But in IE and Edge the background stays white while in focus. Check my jsfiddle, any ideas?
.form-control:focus {
background-color: #121212;
border-color: #121212;
outline: 0;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
https://jsfiddle.net/cd1eyqvr/3/
Keep the .form-control:focus part and add this in your css:
.form-control:focus::-ms-value {
background-color: #242424 !important;
border-color: #121212 !important;
color: #ffffff !important;
outline: 0 !important;
box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}
This part will work in IE11 and Edge.
You can refer to the demo I made: https://jsfiddle.net/yuzhou0602/ofwvuzyr/4/
Check this link from offical docs:
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/
It seems the edge has problems with box shadow and you must add extra css to your stylesheet Check the links blow for more help about your problem Box shadow not working in microsoft edge
And also check this link for complete box shadow in edge solutions
https://css-tricks.com/snippets/css/css-box-shadow/
I've always used the notation border: 0 none, presumably that means border-width: 0 and border-style: none.
Does anybody else use write it this way? Is it really necessary to declare both style and width for safe removal?
border:none; should achieve the same effect according to the spec.
The border property can be set with the following values:
<line-width> || <line-style> || <color>
When one of these values is omitted its value is set to its initial value. So border:none; will actually have the initial line-width value added:
border: medium none;
However, the line-style value of none will cause the color and width values to be ignored as stated in the CSS Specification:
‘none’
No border. Color and width are ignored (i.e., the border has width 0).
Just having border: none; or border: 0; is enough. You can find more information about the border shorthand here.
Is there a way to influence only separate box-shadow properties?
For instance I have these classes to set button size and button color
.btn {
background: gray;
font-size: 15px;
box-shadow: 0 2px 0 0 dark-gray;
}
.btn--primary {
background: blue;
box-shadow: 0 2px 0 0 dark-blue;
}
.btn--secondary {
background: red;
box-shadow: 0 2px 0 0 dark-red;
}
.btn--large {
font-size: 20px;
}
But now, I also want a larger box shadow on .btn--large
Problem is, I have multiple colored buttons, so I would need some sort of "box-shadow-y-size property"
How do you work around this problem? The only way I can think of right now is to do something like this...
.btn--large.btn--primary {
box-shadow: 0 4px 0 0 dark-blue;
}
.btn--large.btn--secondary {
box-shadow: 0 4px 0 0 dark-red;
}
There is sadly only one way to define a box-shadow, but in your case there might be a work-around. If you don't specify a colour for your box-shadow it will default to the colour of the color attribute. Perhaps this is something you can make use of.
For example, if you want to be able to have a differently coloured box-shadow while still retaining the original text color, one way you can achieve this by applying the box-shadow to a :before pseudo element instead of the element itself.
JSFiddle with pseudo element solution
I have an HTML table with collapsed and adjacent borders and a standard border on all cells and I want to change the border color of a specific row to something else. The problem is that when the borders are collapsed and neighboring cells have different colors (or styles in general I assume) the browser does not render in a visually acceptable manner.
Here's my HTML:
<table>
<tr><td>Lorem</td><td>Ipsum</td></tr>
<tr><td>Lorem</td><td>Ipsum</td></tr>
<tr id="foo"><td>The border of these cells</td>
<td>is not uniformly red!</td></tr>
<tr><td>Lorem</td><td>Ipsum</td></tr>
</table>
The CSS:
table { border-collapse: collapse; border-spacing: 0 }
td { padding: 5px; border: 3px black solid; }
#foo td { border: 3px red solid; }
There is also a JSFiddle of the above.
How different browsers render it:
IE 7 (standards):
IE 8 and 9 (standards):
Firefox 11 (note the subtle visual artifact on the left red border and the quirky way it chooses to render the corners):
Chrome 18:
The question: What can I do to get a visually acceptable render? Can that render be the ideal of "red borders always take precedence over black ones"?
Clarification:
I am first and foremost looking for a pure CSS solution.
If this is not possible, I would work with something that requires small and localized modifications (i.e. not something I 'd have to do on every table everywhere).
Javascript is acceptable, since in the actual website the styles that control the borders are applied dynamically based on user interaction. The event handlers are set up by code almost identical to this.
I came to this solution without extra-markup : http://jsfiddle.net/fcalderan/PAJzK/12/
the idea is to avoid using border-collapse and using border top/right for table cells and border bottom-left for table element.
tried with IE8, FX11 and CH17, here's the relevant CSS
table {
border-spacing : 0;
border-left : 3px black solid;
border-bottom : 3px black solid;
}
td {
padding : 5px;
border-right : 3px black solid;
border-top : 3px black solid;
}
#foo td { border-color:red; }
/* border left red-coloured using :before pseudoelement */
#foo td:first-child:before {
content : "";
position : relative;
margin-left : -8px;
padding : 8px 0 8px 5px;
border-left : 3px red solid;
}
/* top border of next rows red coloured */
#foo + tr td {
border-top: 3px red solid;
}
here an issue occurs if the highlighted row is the last one: in that case #foo + tr td wouldn't match anything : in that case you could write instead this rule
#foo td:after {
content : "";
position : relative;
margin : 0 0 0 -8px;
display : block;
width : 100%;
height : 3px;
padding : 0 8px;
top : 2px;
margin-bottom : -6px;
border-bottom : 3px red solid;
}
see example in http://jsfiddle.net/fcalderan/PAJzK/14/
You need extra markup, setting e.g. id=before-foo on the preceding row and id=after-foo on the next, with a style sheet addition like
#before-foo td {
border-bottom-color: red; }
#after-foo td {
border-top-color: red; }
Demo: http://jsfiddle.net/8C8Rd/
There can still be issues at cell corners (a corner can be black).
The reason why this cannot be done in a simpler way is that the effect of border collapse had been vaguely defined and inconsistently implemented in browsers. CSS 2.1 drafts even used to leave the color in situations like this browser-dependent. Even though the final CSS 2.1 specification has requirements on this in its border conflict resolution rules, they are not universally implemented—and in this case, they say that the border of the cells of the upper row wins (as in most browsers you tested), so there is no direct way to specify the rendering you describe. That is, you would need to set some styles on the preceding row as well anyway.