1 <!doctype html>
2
3 <!--
4 /*
5 * Copyright (c) 2012, 2017, Oracle and/or its affiliates. All rights reserved.
6 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
7 *
8 * This code is free software; you can redistribute it and/or modify it
9 * under the terms of the GNU General Public License version 2 only, as
10 * published by the Free Software Foundation. Oracle designates this
11 * particular file as subject to the "Classpath" exception as provided
12 * by Oracle in the LICENSE file that accompanied this code.
13 *
14 * This code is distributed in the hope that it will be useful, but WITHOUT
15 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
16 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
17 * version 2 for more details (a copy is included in the LICENSE file that
18 * accompanied this code).
19 *
20 * You should have received a copy of the GNU General Public License version
21 * 2 along with this work; if not, write to the Free Software Foundation,
22 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
23 *
24 * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
25 * or visit www.oracle.com if you need additional information or have any
744 <p class="example">.my-rect {<br>
745 -fx-fill: yellow;<br>
746 -fx-stroke: green;<br>
747 -fx-stroke-width: 5;<br>
748 -fx-stroke-dash-array: 12 2 4 2;<br>
749 -fx-stroke-dash-offset: 6;<br>
750 -fx-stroke-line-cap: butt;<br>
751 }<br>
752 </p>
753 <p>the result will be a yellow rectangle with a nicely dashed green border:
754 </p>
755 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p>
756 <h3><a id="introparserwarnings">Understanding
757 Parser Warnings</a></h3>
758 <p>When the JavaFX CSS parser encounters a syntax error, a warning message
759 is emitted which conveys as much information as is available to help
760 resolve the error. For example </p>
761 <p class="example"> WARNING: javafx.css.CssParser declaration
762 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]
763 </p>
764 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the
765 location of the error. The format of the location string is </p>
766 <p class="grammar"><url>[line, position]</p>
767 <p>If the error is found while parsing a file, the file URL will be given.
768 If the error is from an inline style (as in the example above), the URL is
769 given as a question mark. The line and position give an offset into the
770 file or string where the token begins. <em>Please note that the line and
771 position may not be accurate in releases prior to JavaFX 2.2.</em><br>
772 </p>
773 <p>Applications needing to detect errors from the parser can add a listener
774 to the errors property of javafx.css.CssParser. <br>
775 </p>
776 <h3><a id="introlimitations">Limitations</a></h3>
777 <ol>
778 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a
779 fully compliant CSS parser. One should not expect the parser to handle
780 syntax not specified in this document.</li>
781 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li>
782 <li>The <media-query-list> of the @import statement is not parsed.</li>
783 <li>The structural pseudo‑classes are not supported. </li>
784 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported.
866 </ul>
867 <h4><a id="typepercentage"><percentage></a></h4>
868 <p>These are a percentage of some length, typically to the width or height
869 of a node.</p>
870 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p>
871 <h3><a id="typeangle"><angle></a></h3>
872 <p>An angle is a <a href="#typenumber" class="typeref"><number></a>
873 with one of the following units.</p>
874 <p> </p>
875 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad |
876 grad | turn ]</p>
877 <ul>
878 <li><strong>deg</strong>: angle in degrees — all other angle units are
879 converted to degrees.</li>
880 <li><strong>rad</strong>: angle in radians</li>
881 <li><strong>grad</strong>: angle in gradians</li>
882 <li><strong>turn</strong>: angle in turns</li>
883 </ul>
884 <h3><a id="typeduration"><duration></a></h3>
885 <p>A duration is a <a href="#typenumber" class="typeref"><number></a>
886 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
887 <p> </p>
888 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p>
889 <ul>
890 <li><strong>s</strong>: duration in seconds</li>
891 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li>
892 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li>
893 </ul>
894 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p>
895 <h3><a id="typepoint"><point></a></h3>
896 <p>A point is an {x,y} coordinate.</p>
897 <p class="grammar">[ [ <length> <length> ] | [
898 <percentage> | <percentage> ] ]</p>
899 <h3><a id="typecolorstop"><color-stop></a></h3>
900 <p>Stops are per <a href="https://www.w3.org/TR/css3-images/#color-stop-syntax"
901 class="typelink">W3C
902 color-stop syntax</a>.</p>
903 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a>
904 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a
905 href="#typelength"
906 class="typeref"><length></a>]?
907 ]</p>
908 <p>In a series of <color-stop>, stop distance values must all be
909 <percentage> or <length>. Furthermore, if <length>
910 values are used, then the distance value for first and last stop in the
911 series must be specified. This restriction may be removed in a future
912 release.</p>
913 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the
914 distance for red and blue is assumed to be 0% and 100%, respectively.</p>
915 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because
916 distance for red and blue is 10 and 90, respectively, the distance for
917 white can be calculated.</p>
918 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid
919 since distance units do not agree.</p>
920 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are
921 distributed evenly between 0% and 100%.</p>
922 <h3><a id="typeurl"><uri></a></h3>
923 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p>
924 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>.
925 For example:</p>
926 <p class="example">
927 url(http://example.com/images/Duke.png)<br>
928 url(/com/example/javafx/app/images/Duke.png)<br>
929 </p>
930 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span>
931 is considered to be the [path] component only.
932 A leading '/' character indicates that the [path] is relative to the
933 root of the classpath. If the the style appears in a stylesheet and
934 has no leading '/' character, the path is relative to the base URI of
935 the stylesheet. If the style appears in an inline style, the path is
936 relative to the root of the classpath (regardless of whether or not
937 there is a leading '/').
938 </p>
939 <table class="cssmisctable">
940 <caption>Examples of Resolving URLs in Stylesheets</caption>
941 <thead>
942 <tr>
943 <th scope="col">Stylesheet URL</th><th scope="col">URL in Style</th><th scope="col">Resolves to</th>
944 </tr>
945 </thead>
946 <tbody>
947 <tr>
948 <th scope="row">file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</th>
949 <td>url(images/Duke.png)</td>
950 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td>
987 <p>As an example, the code snippet below creates a scene filled with a fictional 'Duke.png' image, located in an
988 'image' directory:</p>
989 <textarea rows="9" cols="132">
990
991 @Override public void start(Stage stage) {
992 StackPane root = new StackPane();
993 root.setStyle("-fx-background-image: url(images/Duke.png);");
994 Scene scene = new Scene(root, 300, 250);
995 stage.setScene(scene);
996 stage.show();
997 }
998 </textarea>
999 <p>The same style would work equally as well from a stylesheet.</p>
1000 <h3><a id="typeeffect"><effect></a></h3>
1001 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from
1002 the JavaFX platform. See the class documentation in javafx.scene.effect
1003 for further details about the semantics of the various effect parameters.</p>
1004 <h4>Drop Shadow</h4>
1005 <p>A high-level effect that renders a shadow of the given content behind the
1006 content.</p>
1007 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor"
1008 class="typelink"><color></a>
1009 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1010 class="typelink"><number></a>
1011 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1012 class="typelink"><number></a>
1013 )</span></p>
1014 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
1015 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1016 <a href="#typecolor" class="typelink"><color></a></span> The
1017 shadow Color.<br>
1018 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1019 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
1020 typical value 10.<br>
1021 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1022 The spread of the shadow. The spread is the portion of the radius where
1023 the contribution of the source material will be 100%. The remaining
1024 portion of the radius will have a contribution controlled by the blur
1025 kernel. A spread of 0.0 will result in a distribution of the shadow
1026 determined entirely by the blur algorithm. A spread of 1.0 will result in
1027 a solid growth outward of the source material opacity to the limit of the
1028 radius with a very sharp cutoff to transparency at the radius. Values
1029 should be in the range [0.0 ... 1.0].<br>
1030 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1031 The shadow offset in the x direction, in pixels. <br>
1032 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1033 The shadow offset in the y direction, in pixels. </p>
1034 <h4>Inner Shadow</h4>
1035 <p>A high-level effect that renders a shadow inside the edges of the given
1036 content.</p>
1037 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor"
1038 class="typelink"><color></a>
1039 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1040 class="typelink"><number></a>
1041 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1042 class="typelink"><number></a>
1043 )</span></p>
1044 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
1045 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1046 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span>
1047 The shadow Color.<br>
1048 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1049 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
1050 typical value 10.<br>
1051 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1052 The choke of the shadow. The choke is the portion of the radius where the
1053 contribution of the source material will be 100%. The remaining portion of
1054 the radius will have a contribution controlled by the blur kernel. A choke
1055 of 0.0 will result in a distribution of the shadow determined entirely by
1056 the blur algorithm. A choke of 1.0 will result in a solid growth inward of
1057 the shadow from the edges to the limit of the radius with a very sharp
1058 cutoff to transparency inside the radius. Values should be in the range
1059 [0.0 ... 1.0].<br>
1060 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1061 The shadow offset in the x direction, in pixels. <br>
1062 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1063 The shadow offset in the y direction, in pixels. </p>
1064 <h3><a id="typefont"><font></a></h3>
1065 <p>JavaFX CSS supports the ability to specify fonts using separate family,
1066 size, style, and weight properties, as well as the ability to specify a
1067 font using a single shorthand property. There are four value types related
1068 to fonts plus a shorthand property that encompasses all four properties.
1069 The font-related types are as follows. </p>
1070 <p><span class="grammar"><font-family></span>The string name of the
1071 font family. An actual font family name available on the system can be
1072 used, or one of the following generic family names can be used:</p>
1073 <ul>
1074 <li>'serif' (e.g., Times)</li>
1075 <li>'sans-serif' (e.g., Helvetica)</li>
1076 <li>'cursive' (e.g., Zapf-Chancery)</li>
1077 <li>'fantasy' (e.g., Western)</li>
1078 <li>'monospace' (e.g., Courier)</li>
1079 </ul>
1080 <p><span class="grammar"><font-size></span> The size of the font,
1081 using the <span class="grammar"><size></span> syntax.</p>
1082 <p><span class="grammar"><font-style></span> The font's style, using
1083 the following syntax:<br>
1084 <span class="grammar">[ normal | italic | oblique ]</span></p>
1085 <p><span class="grammar"><font-weight></span> The font's weight, using
1086 the following syntax:<br>
1087 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300
1088 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p>
1089 <p><span class="grammar"><font></span> This font shorthand property
1090 can be used in place of the above properties. It uses the following
1091 syntax:<br>
1092 <span class="grammar">[[ <font-style> || <font-weight> ]?
1093 <font-size> <font-family> ]</span></p>
1094 <h4><a id="fontprops">Font Properties</a></h4>
1095 <p>Most classes that use text will support the following font properties. In
1096 some cases a similar set of properties will be supported but with a
1097 different prefix instead of "-fx-font".</p>
1098 <table class="csspropertytable">
1099 <caption>Available CSS Properties</caption>
1100 <thead>
1101 <tr>
1102 <th class="propertyname" scope="col">CSS Property</th>
1103 <th class="value" scope="col">Values</th>
1104 <th scope="col">Default</th>
1105 <th scope="col">Comments</th>
1106 </tr>
1107 </thead>
1108 <tbody>
1109 <tr>
1110 <th class="propertyname" scope="row">-fx-font</th>
1111 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
1112 <td>inherit</td>
1130 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td>
1131 <td>inherit</td>
1132 <td> </td>
1133 </tr>
1134 <tr>
1135 <th class="propertyname" scope="row">-fx-font-weight</th>
1136 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td>
1137 <td>inherit</td>
1138 <td> </td>
1139 </tr>
1140 </tbody>
1141 </table>
1142 <h3><a id="typepaint"><paint></a></h3>
1143 <p>Paint values can either be a solid color specified in one of the color
1144 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
1145 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> |
1146 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> |
1147 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> |
1148 <a href="#typeimage-pattern" class="typelink"><image-pattern></a>
1149 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p>
1150 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1151 <a id="typelinear-gradient"><linear-gradient></a>
1152 </span></h4>
1153 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a>
1154 to <a href="#typepoint" class="typelink"><point></a>] | [ to
1155 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1156 class="typelink"><color-stop></a>[,
1157 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br>
1158 <br>
1159 where <side-or-corner> = [left | right] || [top | bottom] </p>
1160 <p> </p>
1161 <p>Linear gradient creates a gradient going though all the stop colors along
1162 the line between the "from" <a href="#typepoint" class="typelink"><point></a>
1163 and the "to" <a href="#typepoint" class="typelink"><point></a>. If
1164 the points are percentages, then they are relative to the size of the area
1165 being filled. Percentage and length sizes can not be mixed in a single
1166 gradient function.</p>
1167 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1168 "NO_CYCLE".<br>
1169 If neither [from <point> to <point>] nor [ to
1170 <side-or-corner> ] are given, then the gradient direction defaults
1172 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1173 class="typelink">W3C
1174 color-stop syntax</a> and are normalized accordingly. </p>
1175 <p>This example will create a gradient from top left to bottom right of the
1176 filled area with red at the top left corner and black at the bottom right.</p>
1177 <p class="example">linear-gradient(to bottom right, red, black)</p>
1178 <p>This is equivalent to: </p>
1179 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black
1180 100%)</p>
1181 <p>This more complex example will create a 50px high bar at the top with a 3
1182 color gradient with white underneath for the rest of the filled area.</p>
1183 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray
1184 50%, dimgray 99%, white)</p>
1185 <p><span style="color: #af0000; ">The following syntax for linear gradient does not
1186 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1187 2.0 CSS parser supports the syntax but this support may be removed in
1188 later releases.</span></p>
1189 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>)
1190 to (<size>, <size>) stops [ (<number>,<color>)
1191 ]+ [ repeat | reflect ]?</span></p>
1192 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1193 <a id="typeradial-gradient"><radial-gradient></a>
1194 </span></h4>
1195 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>,
1196 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>,
1197 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]?
1198 radius [ <a href="#typelength" class="typelink"><length></a> | <a
1199 href="#typepercentage"
1200 class="typelink"><percentage></a>
1201 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[,
1202 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p>
1203 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from
1204 the <a href="#typepoint" class="typelink">center point</a>
1205 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given,
1206 the center defaults to (0,0). Percentage values are relative to the size of the area
1207 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p>
1208 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1209 "NO_CYCLE".<br>
1210 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1211 class="typelink">W3C
1212 color-stop syntax</a> and are normalized accordingly. </p>
1213 <p>Following are examples of the use of radial-gradient:</p>
1214 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p>
1215 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%,
1216 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p>
1217 <p><span style="color: #af0000; ">The following syntax for radial gradient does not
1218 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1219 2.0 CSS parser supports the syntax but this support may be removed in
1220 later releases.</span></p>
1221 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number>
1222 | <number> ] ]? [ focus-distance <size> ]? [ center
1223 <size,size> ]? <size> stops [ ( <number>,
1224 <color> ) ]+ [ repeat | reflect ]?</span></p>
1225 <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1226 <a id="typeimage-pattern"><image-pattern></a>
1227 </span></h4>
1228 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>,
1229 [<a href="#typesize" class="typelink"><size></a>,
1230 <a href="#typesize" class="typelink"><size></a>,
1231 <a href="#typesize" class="typelink"><size></a>,
1232 <a href="#typesize" class="typelink"><size></a>[,
1233 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p>
1234 <p>The parameters, in order, are:<br>
1235 <p style="margin-left: 40px;">
1236 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span>
1237 The URL of the image.<br>
1238 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1239 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br>
1240 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1241 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br>
1242 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1243 The width of the anchor rectangle.<br>
1244 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1245 The height of the anchor rectangle.<br>
1246 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span>
1247 The proportional flag which indicates whether start and end locations are proportional or absolute<br>
1248 </p>
1249 <p>For a full explanation of the parameters, refer to the
1250 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>
1251 <p>Following are examples of the use of image-pattern:</p>
1252 <p class="example">image-pattern("images/Duke.png")</p>
1253 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p>
1254 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p>
1255 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>
1256
1257 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand
1258 for producing tiled image based fills. It is equivalent to
1259 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p>
1260
1261 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p>
1262 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p>
1263 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p>
1264
1265
1266
1267 <h3><a id="typecolor"><color></a></h3>
1268 <p class="grammar"><named-color> | <looked-up-color> |
1269 <rgb-color> | <hsb-color> | <color-function></p>
1270 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4>
1271 <p>CSS supports a bunch of named constant colors. Named colors can be
1272 specified with just their unquoted name for example: </p>
1273 <p class="example">.button {<br>
1274 -fx-background-color: red;<br>
1275 }</p>
1276 <p>The named colors that are available in CSS are:</p>
1277
1278 <div style="margin:0 3em">
1279 <div class="colorsquare"><span style="background-color:aliceblue;"> </span>aliceblue = #f0f8ff</div>
1280 <div class="colorsquare"><span style="background-color:antiquewhite;"> </span>antiquewhite = #faebd7</div>
1281 <div class="colorsquare"><span style="background-color:aqua;"> </span>aqua = #00ffff</div>
1282 <div class="colorsquare"><span style="background-color:aquamarine;"> </span>aquamarine = #7fffd4</div>
1283 <div class="colorsquare"><span style="background-color:azure;"> </span>azure = #f0ffff</div>
1284 <div class="colorsquare"><span style="background-color:beige;"> </span>beige = #f5f5dc</div>
1285 <div class="colorsquare"><span style="background-color:bisque;"> </span>bisque = #ffe4c4</div>
1286 <div class="colorsquare"><span style="background-color:black;"> </span>black = #000000</div>
1287 <div class="colorsquare"><span style="background-color:blanchedalmond;"> </span>blanchedalmond = #ffebcd</div>
1288 <div class="colorsquare"><span style="background-color:blue;"> </span>blue = #0000ff</div>
1289 <div class="colorsquare"><span style="background-color:blueviolet;"> </span>blueviolet = #8a2be2</div>
1290 <div class="colorsquare"><span style="background-color:brown;"> </span>brown = #a52a2a</div>
1408 <div class="colorsquare"><span style="background-color:skyblue;"> </span>skyblue = #87ceeb</div>
1409 <div class="colorsquare"><span style="background-color:slateblue;"> </span>slateblue = #6a5acd</div>
1410 <div class="colorsquare"><span style="background-color:slategray;"> </span>slategray = #708090</div>
1411 <div class="colorsquare"><span style="background-color:slategrey;"> </span>slategrey = #708090</div>
1412 <div class="colorsquare"><span style="background-color:snow;"> </span>snow = #fffafa</div>
1413 <div class="colorsquare"><span style="background-color:springgreen;"> </span>springgreen = #00ff7f</div>
1414 <div class="colorsquare"><span style="background-color:steelblue;"> </span>steelblue = #4682b4</div>
1415 <div class="colorsquare"><span style="background-color:tan;"> </span>tan = #d2b48c</div>
1416 <div class="colorsquare"><span style="background-color:teal;"> </span>teal = #008080</div>
1417 <div class="colorsquare"><span style="background-color:thistle;"> </span>thistle = #d8bfd8</div>
1418 <div class="colorsquare"><span style="background-color:tomato;"> </span>tomato = #ff6347</div>
1419 <div class="colorsquare"><span style="background-color:turquoise;"> </span>turquoise = #40e0d0</div>
1420 <div class="colorsquare"><span style="background-color:violet;"> </span>violet = #ee82ee</div>
1421 <div class="colorsquare"><span style="background-color:wheat;"> </span>wheat = #f5deb3</div>
1422 <div class="colorsquare"><span style="background-color:white;"> </span>white = #ffffff</div>
1423 <div class="colorsquare"><span style="background-color:whitesmoke;"> </span>whitesmoke = #f5f5f5</div>
1424 <div class="colorsquare"><span style="background-color:yellow;"> </span>yellow = #ffff00</div>
1425 <div class="colorsquare"><span style="background-color:yellowgreen;"> </span>yellowgreen = #9acd32</div>
1426 <div class="colorsquare"><span style="background-color:transparent;"> </span>transparent = rgba(0,0,0,0)</div>
1427 </div>
1428 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4>
1429 <p>With looked-up colors you can refer to any other color property that is
1430 set on the current node or any of its parents. This is a very powerful
1431 feature, as it allows a generic palette of colors to be specified on the
1432 scene then used thoughout the application. If you want to change one of
1433 those palette colors you can do so at any level in the scene tree and it
1434 will affect that node and all its decendents. Looked-up colors are not
1435 looked up until they are applied, so they are live and react to any style
1436 changes that might occur, such as replacing a palette color at runtime
1437 with the "style" property on a node.</p>
1438 <p>In the following example, all background color of all buttons uses the
1439 looked up color "abc".</p>
1440 <p class="example">.root { abc: #f00 }<br>
1441 .button { -fx-background-color: abc }</p>
1442 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4>
1443 <p>The RGB color model is used in numerical color specifications. It has a
1444 number of different supported forms.</p>
1445 <p class="grammar">#<digit><digit><digit><br>
1446 |
1447 #<digit><digit><digit><digit><digit><digit><br>
1448 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1449 class="typelink"><integer></a>
1450 , <a href="#typenumber" class="typelink"><integer></a> )<br>
1451 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a
1452 href="#typenumber"
1453 class="typelink"><integer></a>%
1454 , <a href="#typenumber" class="typelink"><integer></a>% )<br>
1455 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a
1456 href="#typenumber"
1457 class="typelink"><integer></a>
1458 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1459 class="typelink"><number></a>
1460 ) <br>
1461 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a
1462 href="#typenumber"
1490 space characters are allowed around the numerical values.</p>
1491 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model
1492 to include an ‘alpha’ value that specifies the opacity of a
1493 color. This is accomplished via a functional syntax of the form rgba(...)
1494 form that takes a fourth parameter which is the alpha value. The alpha
1495 value must be a number in the range 0.0 (representing completely
1496 transparent) and 1.0 (completely opaque). As with the rgb() function, the
1497 red, green, and blue values may be decimal integers or percentages. The
1498 following examples all specify the same color:</p>
1499 <p class="example"> </p>
1500 <ul style="list-style: none;">
1501 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li>
1502 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
1503 opacity of 1 */</li>
1504 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% —
1505 100.0% */</li>
1506 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
1507 explicit opacity of 1 */</li>
1508 </ul>
1509 <p> </p>
1510 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4>
1511 <p>Colors can be specified using the HSB (sometimes called HSV) color model,
1512 as follows:</p>
1513 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a>
1514 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1515 class="typelink"><number></a>%
1516 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a
1517 href="#typenumber"
1518 class="typelink"><number></a>%
1519 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1520 class="typelink"><number></a>
1521 )</p>
1522 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360
1523 degrees. The second number is <em>saturation,</em> a percentage in the
1524 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a
1525 percentage in the range 0% to 100%. The hsba(...) form takes a fourth
1526 parameter at the end which is a alpha value in the range 0.0 to 1.0,
1527 specifying completely transparent and completely opaque, respectively.</p>
1528 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4>
1529 <p>JavaFX supports some color computation functions. These compute new
1530 colors from input colors at the time the color style is applied. This
1531 enables a color theme to be specified using a single base color and to
1532 have variant colors computed from that base color. There are two color
1533 functions: derive() and ladder().</p>
1534 <p class="grammar"><derive> | <ladder></p>
1535 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p>
1536 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a>
1537 , <a href="#typenumber" class="typelink"><number></a>% )</p>
1538 <p>The derive function takes a color and computes a brighter or darker
1539 version of that color. The second parameter is the brightness offset,
1540 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors
1541 and negative percentages indicate darker colors. A value of -100% means
1542 completely black, 0% means no change in brightness, and 100% means
1543 completely white.</p>
1544 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p>
1545 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a>
1546 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a
1547 href="#typecolorstop"
1548 class="typelink"><color-stop></a>]+)</p>
1549 <p>The ladder function interpolates between colors. The effect is as if a
1550 gradient is created using the stops provided, and then the brightness of
1551 the provided <a href="#typecolor" class="typelink"><color></a> is
1552 used to index a color value within that gradient. At 0% brightness, the
1553 color at the 0.0 end of the gradient is used; at 100% brightness, the
1554 color at the 1.0 end of the gradient is used; and at 50% brightness, the
1555 color at 0.5, the midway point of the gradient, is used. Note that no
1556 gradient is actually rendered. This is merely an interpolation function
1557 that results in a single color.</p>
1558 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1559 class="typelink">W3C
1560 color-stop syntax</a> and are normalized accordingly.</p>
1561 <p>For example, you could use the following if you want the text color to be
1562 black or white depending upon the brightness of the background.</p>
1563 <p class="example">background: white;<br>
1564 -fx-text-fill: ladder(background, white 49%, black 50%);</p>
2105 <h4><a id="region">Region</a></h4>
2106 <p class="styleclass">Style class: empty by default</p>
2107 <p>A Region is a Node (extending from Parent) with backgrounds and borders
2108 that are styleable via CSS. A Region is typically a rounded rectangle,
2109 though this can be modified through CSS to be an arbitrary shape. Regions
2110 can contain other Region objects (sub-regions) or they can contain
2111 sub-controls. All Regions have the same set of CSS properties as described
2112 below. </p>
2113 <p>Each Region consists of several layers, painted from bottom to top, in
2114 this order:</p>
2115 <ol>
2116 <li>background fills</li>
2117 <li>background images</li>
2118 <li>border strokes</li>
2119 <li>border images</li>
2120 <li>contents</li>
2121 </ol>
2122 <p>The background and border mechanisms are patterned after the CSS 3 draft
2123 backgrounds and borders module. See <a href="#references">[4]</a> for a
2124 detailed description.</p>
2125 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>,
2126 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>.
2127 The -fx-background-color property is a series of one or more
2128 comma-separated <paint> values. The number of values in the series
2129 determines the number of background rectangles that are painted.
2130 Background rectangles are painted in the order specified using the given
2131 <paint> value. Each background rectangle can have different radii
2132 and insets. The -fx-background-radius and -fx-background-insets properties
2133 are series of comma-separated values (or sets of values). The radius and
2134 insets values used for a particular background are the found in the
2135 corresponding position in the -fx-background-radius and
2136 -fx-background-insets series. For example, suppose a series of three
2137 values is given for the -fx-background-color property. A series of three
2138 values should also be specified for the -fx-background-radius and
2139 -fx-background-insets properties. The first background will be painted
2140 using the first radius value and first insets value, the second background
2141 will be painted with the second radius value and second insets value, and
2142 so forth.</p>
2143 <p>Note also that properties such as -fx-background-radius and
2144 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of
2145 four values. A set of values is separated by whitespace, whereas the
2146 values or sets-of-values in a series are separated by commas. For
2147 -fx-background-radius, a single value indicates that the value should be
2148 used for the radius of all four corners of the background rectangle. A set
2149 of four values indicates that different radius values are to be used for
2150 the top-left, top-right, bottom-right, and bottom-left corners, in that
2151 order. Similarly, the -fx-background-insets property can also contain a
2152 series of values or sets of values. A set of four values for
2153 -fx-background-insets indicates that different insets are to be used for
2154 the top, right, bottom, and left edges of the rectangle, in that order.</p>
2155 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>,
2156 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span>
2157 and <span class="propertyname">-fx-background-size</span>. The number of
2158 images in the series of -fx-background-image values determines the number
2159 of background images that are painted. The -fx-background-repeat,
2160 -fx-background-position, and -fx-background-size properties each can
2161 contain a series of values. For each item in the -fx-background-image
2162 series, the corresponding items in the -fx-background-repeat,
2163 -fx-background-position, and -fx-background-size properties are applied to
2164 that background image.</p>
2165 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>,
2166 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>,
2167 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>.
2168 Each property contains a series of items. The maximum number of items in the -fx-
2169 border-color or -fx-border-style property determines the number of border layers that are painted..
2170 Each border in the series is painted using information from the
2171 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width,
2172 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black.
2173 if there is no -fx-border-style, the default style is solid. </p>
2174 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>,
2175 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>,
2176 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>.
2177 Each property contains a series of items. The number of items in the
2178 -fx-border-image-source property determines the number of images that are
2179 painted. Each image in the series is painted using information from the
2180 corresponding series items of the -fx-border-image-repeat,
2181 -fx-border-image-slice, -fx-border-image-width, and
2182 -fx-border-image-insets properties.</p>
2183 <p>The region's contents are a sequence of nodes, like any other container.
2184 The contents are set programmatically and cannot be set via CSS.</p>
2185 <table class="csspropertytable">
2186 <caption>Available CSS Properties</caption>
2187 <thead>
2188 <tr>
2189 <th class="propertyname" scope="col">CSS Property</th>
2190 <th class="value" scope="col">Values</th>
2191 <th scope="col">Default</th>
2192 <th scope="col">Comments</th>
2193 </tr>
2194 </thead>
2195 <tbody>
2196 <tr>
|
1 <!doctype html>
2
3 <!--
4 /*
5 * Copyright (c) 2012, 2018, Oracle and/or its affiliates. All rights reserved.
6 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
7 *
8 * This code is free software; you can redistribute it and/or modify it
9 * under the terms of the GNU General Public License version 2 only, as
10 * published by the Free Software Foundation. Oracle designates this
11 * particular file as subject to the "Classpath" exception as provided
12 * by Oracle in the LICENSE file that accompanied this code.
13 *
14 * This code is distributed in the hope that it will be useful, but WITHOUT
15 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
16 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
17 * version 2 for more details (a copy is included in the LICENSE file that
18 * accompanied this code).
19 *
20 * You should have received a copy of the GNU General Public License version
21 * 2 along with this work; if not, write to the Free Software Foundation,
22 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
23 *
24 * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
25 * or visit www.oracle.com if you need additional information or have any
744 <p class="example">.my-rect {<br>
745 -fx-fill: yellow;<br>
746 -fx-stroke: green;<br>
747 -fx-stroke-width: 5;<br>
748 -fx-stroke-dash-array: 12 2 4 2;<br>
749 -fx-stroke-dash-offset: 6;<br>
750 -fx-stroke-line-cap: butt;<br>
751 }<br>
752 </p>
753 <p>the result will be a yellow rectangle with a nicely dashed green border:
754 </p>
755 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p>
756 <h3><a id="introparserwarnings">Understanding
757 Parser Warnings</a></h3>
758 <p>When the JavaFX CSS parser encounters a syntax error, a warning message
759 is emitted which conveys as much information as is available to help
760 resolve the error. For example </p>
761 <p class="example"> WARNING: javafx.css.CssParser declaration
762 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]
763 </p>
764 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the
765 location of the error. The format of the location string is </p>
766 <p class="grammar"><url>[line, position]</p>
767 <p>If the error is found while parsing a file, the file URL will be given.
768 If the error is from an inline style (as in the example above), the URL is
769 given as a question mark. The line and position give an offset into the
770 file or string where the token begins. <em>Please note that the line and
771 position may not be accurate in releases prior to JavaFX 2.2.</em><br>
772 </p>
773 <p>Applications needing to detect errors from the parser can add a listener
774 to the errors property of javafx.css.CssParser. <br>
775 </p>
776 <h3><a id="introlimitations">Limitations</a></h3>
777 <ol>
778 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a
779 fully compliant CSS parser. One should not expect the parser to handle
780 syntax not specified in this document.</li>
781 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li>
782 <li>The <media-query-list> of the @import statement is not parsed.</li>
783 <li>The structural pseudo‑classes are not supported. </li>
784 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported.
866 </ul>
867 <h4><a id="typepercentage"><percentage></a></h4>
868 <p>These are a percentage of some length, typically to the width or height
869 of a node.</p>
870 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p>
871 <h3><a id="typeangle"><angle></a></h3>
872 <p>An angle is a <a href="#typenumber" class="typeref"><number></a>
873 with one of the following units.</p>
874 <p> </p>
875 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad |
876 grad | turn ]</p>
877 <ul>
878 <li><strong>deg</strong>: angle in degrees — all other angle units are
879 converted to degrees.</li>
880 <li><strong>rad</strong>: angle in radians</li>
881 <li><strong>grad</strong>: angle in gradians</li>
882 <li><strong>turn</strong>: angle in turns</li>
883 </ul>
884 <h3><a id="typeduration"><duration></a></h3>
885 <p>A duration is a <a href="#typenumber" class="typeref"><number></a>
886 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
887 <p> </p>
888 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p>
889 <ul>
890 <li><strong>s</strong>: duration in seconds</li>
891 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li>
892 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li>
893 </ul>
894 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p>
895 <h3><a id="typepoint"><point></a></h3>
896 <p>A point is an {x,y} coordinate.</p>
897 <p class="grammar">[ [ <length> <length> ] | [
898 <percentage> | <percentage> ] ]</p>
899 <h3><a id="typecolorstop"><color-stop></a></h3>
900 <p>Stops are per <a href="https://www.w3.org/TR/css3-images/#color-stop-syntax"
901 class="typelink">W3C
902 color-stop syntax</a>.</p>
903 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a>
904 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a
905 href="#typelength"
906 class="typeref"><length></a>]?
907 ]</p>
908 <p>In a series of <color-stop>, stop distance values must all be
909 <percentage> or <length>. Furthermore, if <length>
910 values are used, then the distance value for first and last stop in the
911 series must be specified. This restriction may be removed in a future
912 release.</p>
913 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the
914 distance for red and blue is assumed to be 0% and 100%, respectively.</p>
915 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because
916 distance for red and blue is 10 and 90, respectively, the distance for
917 white can be calculated.</p>
918 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid
919 since distance units do not agree.</p>
920 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are
921 distributed evenly between 0% and 100%.</p>
922 <h3><a id="typeurl"><uri></a></h3>
923 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p>
924 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>.
925 For example:</p>
926 <p class="example">
927 url(http://example.com/images/Duke.png)<br>
928 url(/com/example/javafx/app/images/Duke.png)<br>
929 </p>
930 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span>
931 is considered to be the [path] component only.
932 A leading '/' character indicates that the [path] is relative to the
933 root of the classpath. If the the style appears in a stylesheet and
934 has no leading '/' character, the path is relative to the base URI of
935 the stylesheet. If the style appears in an inline style, the path is
936 relative to the root of the classpath (regardless of whether or not
937 there is a leading '/').
938 </p>
939 <table class="cssmisctable">
940 <caption>Examples of Resolving URLs in Stylesheets</caption>
941 <thead>
942 <tr>
943 <th scope="col">Stylesheet URL</th><th scope="col">URL in Style</th><th scope="col">Resolves to</th>
944 </tr>
945 </thead>
946 <tbody>
947 <tr>
948 <th scope="row">file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</th>
949 <td>url(images/Duke.png)</td>
950 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td>
987 <p>As an example, the code snippet below creates a scene filled with a fictional 'Duke.png' image, located in an
988 'image' directory:</p>
989 <textarea rows="9" cols="132">
990
991 @Override public void start(Stage stage) {
992 StackPane root = new StackPane();
993 root.setStyle("-fx-background-image: url(images/Duke.png);");
994 Scene scene = new Scene(root, 300, 250);
995 stage.setScene(scene);
996 stage.show();
997 }
998 </textarea>
999 <p>The same style would work equally as well from a stylesheet.</p>
1000 <h3><a id="typeeffect"><effect></a></h3>
1001 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from
1002 the JavaFX platform. See the class documentation in javafx.scene.effect
1003 for further details about the semantics of the various effect parameters.</p>
1004 <h4>Drop Shadow</h4>
1005 <p>A high-level effect that renders a shadow of the given content behind the
1006 content.</p>
1007 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor"
1008 class="typelink"><color></a>
1009 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1010 class="typelink"><number></a>
1011 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1012 class="typelink"><number></a>
1013 )</span></p>
1014 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
1015 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1016 <a href="#typecolor" class="typelink"><color></a></span> The
1017 shadow Color.<br>
1018 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1019 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
1020 typical value 10.<br>
1021 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1022 The spread of the shadow. The spread is the portion of the radius where
1023 the contribution of the source material will be 100%. The remaining
1024 portion of the radius will have a contribution controlled by the blur
1025 kernel. A spread of 0.0 will result in a distribution of the shadow
1026 determined entirely by the blur algorithm. A spread of 1.0 will result in
1027 a solid growth outward of the source material opacity to the limit of the
1028 radius with a very sharp cutoff to transparency at the radius. Values
1029 should be in the range [0.0 ... 1.0].<br>
1030 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1031 The shadow offset in the x direction, in pixels. <br>
1032 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1033 The shadow offset in the y direction, in pixels. </p>
1034 <h4>Inner Shadow</h4>
1035 <p>A high-level effect that renders a shadow inside the edges of the given
1036 content.</p>
1037 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor"
1038 class="typelink"><color></a>
1039 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1040 class="typelink"><number></a>
1041 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1042 class="typelink"><number></a>
1043 )</span></p>
1044 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
1045 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1046 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span>
1047 The shadow Color.<br>
1048 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1049 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
1050 typical value 10.<br>
1051 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1052 The choke of the shadow. The choke is the portion of the radius where the
1053 contribution of the source material will be 100%. The remaining portion of
1054 the radius will have a contribution controlled by the blur kernel. A choke
1055 of 0.0 will result in a distribution of the shadow determined entirely by
1056 the blur algorithm. A choke of 1.0 will result in a solid growth inward of
1057 the shadow from the edges to the limit of the radius with a very sharp
1058 cutoff to transparency inside the radius. Values should be in the range
1059 [0.0 ... 1.0].<br>
1060 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1061 The shadow offset in the x direction, in pixels. <br>
1062 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1063 The shadow offset in the y direction, in pixels. </p>
1064 <h3><a id="typefont"><font></a></h3>
1065 <p>JavaFX CSS supports the ability to specify fonts using separate family,
1066 size, style, and weight properties, as well as the ability to specify a
1067 font using a single shorthand property. There are four value types related
1068 to fonts plus a shorthand property that encompasses all four properties.
1069 The font-related types are as follows. </p>
1070 <p><span class="grammar"><font-family></span>The string name of the
1071 font family. An actual font family name available on the system can be
1072 used, or one of the following generic family names can be used:</p>
1073 <ul>
1074 <li>'serif' (e.g., Times)</li>
1075 <li>'sans-serif' (e.g., Helvetica)</li>
1076 <li>'cursive' (e.g., Zapf-Chancery)</li>
1077 <li>'fantasy' (e.g., Western)</li>
1078 <li>'monospace' (e.g., Courier)</li>
1079 </ul>
1080 <p><span class="grammar"><font-size></span> The size of the font,
1081 using the <span class="grammar"><size></span> syntax.</p>
1082 <p><span class="grammar"><font-style></span> The font's style, using
1083 the following syntax:<br>
1084 <span class="grammar">[ normal | italic | oblique ]</span></p>
1085 <p><span class="grammar"><font-weight></span> The font's weight, using
1086 the following syntax:<br>
1087 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300
1088 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p>
1089 <p><span class="grammar"><font></span> This font shorthand property
1090 can be used in place of the above properties. It uses the following
1091 syntax:<br>
1092 <span class="grammar">[[ <font-style> || <font-weight> ]?
1093 <font-size> <font-family> ]</span></p>
1094 <h4><a id="fontprops">Font Properties</a></h4>
1095 <p>Most classes that use text will support the following font properties. In
1096 some cases a similar set of properties will be supported but with a
1097 different prefix instead of "-fx-font".</p>
1098 <table class="csspropertytable">
1099 <caption>Available CSS Properties</caption>
1100 <thead>
1101 <tr>
1102 <th class="propertyname" scope="col">CSS Property</th>
1103 <th class="value" scope="col">Values</th>
1104 <th scope="col">Default</th>
1105 <th scope="col">Comments</th>
1106 </tr>
1107 </thead>
1108 <tbody>
1109 <tr>
1110 <th class="propertyname" scope="row">-fx-font</th>
1111 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
1112 <td>inherit</td>
1130 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td>
1131 <td>inherit</td>
1132 <td> </td>
1133 </tr>
1134 <tr>
1135 <th class="propertyname" scope="row">-fx-font-weight</th>
1136 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td>
1137 <td>inherit</td>
1138 <td> </td>
1139 </tr>
1140 </tbody>
1141 </table>
1142 <h3><a id="typepaint"><paint></a></h3>
1143 <p>Paint values can either be a solid color specified in one of the color
1144 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
1145 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> |
1146 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> |
1147 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> |
1148 <a href="#typeimage-pattern" class="typelink"><image-pattern></a>
1149 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p>
1150 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1151 <a id="typelinear-gradient"><linear-gradient></a>
1152 </span></h4>
1153 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a>
1154 to <a href="#typepoint" class="typelink"><point></a>] | [ to
1155 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1156 class="typelink"><color-stop></a>[,
1157 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br>
1158 <br>
1159 where <side-or-corner> = [left | right] || [top | bottom] </p>
1160 <p> </p>
1161 <p>Linear gradient creates a gradient going though all the stop colors along
1162 the line between the "from" <a href="#typepoint" class="typelink"><point></a>
1163 and the "to" <a href="#typepoint" class="typelink"><point></a>. If
1164 the points are percentages, then they are relative to the size of the area
1165 being filled. Percentage and length sizes can not be mixed in a single
1166 gradient function.</p>
1167 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1168 "NO_CYCLE".<br>
1169 If neither [from <point> to <point>] nor [ to
1170 <side-or-corner> ] are given, then the gradient direction defaults
1172 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1173 class="typelink">W3C
1174 color-stop syntax</a> and are normalized accordingly. </p>
1175 <p>This example will create a gradient from top left to bottom right of the
1176 filled area with red at the top left corner and black at the bottom right.</p>
1177 <p class="example">linear-gradient(to bottom right, red, black)</p>
1178 <p>This is equivalent to: </p>
1179 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black
1180 100%)</p>
1181 <p>This more complex example will create a 50px high bar at the top with a 3
1182 color gradient with white underneath for the rest of the filled area.</p>
1183 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray
1184 50%, dimgray 99%, white)</p>
1185 <p><span style="color: #af0000; ">The following syntax for linear gradient does not
1186 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1187 2.0 CSS parser supports the syntax but this support may be removed in
1188 later releases.</span></p>
1189 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>)
1190 to (<size>, <size>) stops [ (<number>,<color>)
1191 ]+ [ repeat | reflect ]?</span></p>
1192 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1193 <a id="typeradial-gradient"><radial-gradient></a>
1194 </span></h4>
1195 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>,
1196 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>,
1197 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]?
1198 radius [ <a href="#typelength" class="typelink"><length></a> | <a
1199 href="#typepercentage"
1200 class="typelink"><percentage></a>
1201 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[,
1202 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p>
1203 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from
1204 the <a href="#typepoint" class="typelink">center point</a>
1205 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given,
1206 the center defaults to (0,0). Percentage values are relative to the size of the area
1207 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p>
1208 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1209 "NO_CYCLE".<br>
1210 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1211 class="typelink">W3C
1212 color-stop syntax</a> and are normalized accordingly. </p>
1213 <p>Following are examples of the use of radial-gradient:</p>
1214 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p>
1215 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%,
1216 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p>
1217 <p><span style="color: #af0000; ">The following syntax for radial gradient does not
1218 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1219 2.0 CSS parser supports the syntax but this support may be removed in
1220 later releases.</span></p>
1221 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number>
1222 | <number> ] ]? [ focus-distance <size> ]? [ center
1223 <size,size> ]? <size> stops [ ( <number>,
1224 <color> ) ]+ [ repeat | reflect ]?</span></p>
1225 <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1226 <a id="typeimage-pattern"><image-pattern></a>
1227 </span></h4>
1228 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>,
1229 [<a href="#typesize" class="typelink"><size></a>,
1230 <a href="#typesize" class="typelink"><size></a>,
1231 <a href="#typesize" class="typelink"><size></a>,
1232 <a href="#typesize" class="typelink"><size></a>[,
1233 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p>
1234 <p>The parameters, in order, are:<br>
1235 <p style="margin-left: 40px;">
1236 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span>
1237 The URL of the image.<br>
1238 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1239 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br>
1240 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1241 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br>
1242 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1243 The width of the anchor rectangle.<br>
1244 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1245 The height of the anchor rectangle.<br>
1246 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span>
1247 The proportional flag which indicates whether start and end locations are proportional or absolute<br>
1248 </p>
1249 <p>For a full explanation of the parameters, refer to the
1250 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>
1251 <p>Following are examples of the use of image-pattern:</p>
1252 <p class="example">image-pattern("images/Duke.png")</p>
1253 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p>
1254 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p>
1255 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>
1256
1257 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand
1258 for producing tiled image based fills. It is equivalent to
1259 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p>
1260
1261 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p>
1262 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p>
1263 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p>
1264
1265
1266
1267 <h3><a id="typecolor"><color></a></h3>
1268 <p class="grammar"><named-color> | <looked-up-color> |
1269 <rgb-color> | <hsb-color> | <color-function></p>
1270 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4>
1271 <p>CSS supports a bunch of named constant colors. Named colors can be
1272 specified with just their unquoted name for example: </p>
1273 <p class="example">.button {<br>
1274 -fx-background-color: red;<br>
1275 }</p>
1276 <p>The named colors that are available in CSS are:</p>
1277
1278 <div style="margin:0 3em">
1279 <div class="colorsquare"><span style="background-color:aliceblue;"> </span>aliceblue = #f0f8ff</div>
1280 <div class="colorsquare"><span style="background-color:antiquewhite;"> </span>antiquewhite = #faebd7</div>
1281 <div class="colorsquare"><span style="background-color:aqua;"> </span>aqua = #00ffff</div>
1282 <div class="colorsquare"><span style="background-color:aquamarine;"> </span>aquamarine = #7fffd4</div>
1283 <div class="colorsquare"><span style="background-color:azure;"> </span>azure = #f0ffff</div>
1284 <div class="colorsquare"><span style="background-color:beige;"> </span>beige = #f5f5dc</div>
1285 <div class="colorsquare"><span style="background-color:bisque;"> </span>bisque = #ffe4c4</div>
1286 <div class="colorsquare"><span style="background-color:black;"> </span>black = #000000</div>
1287 <div class="colorsquare"><span style="background-color:blanchedalmond;"> </span>blanchedalmond = #ffebcd</div>
1288 <div class="colorsquare"><span style="background-color:blue;"> </span>blue = #0000ff</div>
1289 <div class="colorsquare"><span style="background-color:blueviolet;"> </span>blueviolet = #8a2be2</div>
1290 <div class="colorsquare"><span style="background-color:brown;"> </span>brown = #a52a2a</div>
1408 <div class="colorsquare"><span style="background-color:skyblue;"> </span>skyblue = #87ceeb</div>
1409 <div class="colorsquare"><span style="background-color:slateblue;"> </span>slateblue = #6a5acd</div>
1410 <div class="colorsquare"><span style="background-color:slategray;"> </span>slategray = #708090</div>
1411 <div class="colorsquare"><span style="background-color:slategrey;"> </span>slategrey = #708090</div>
1412 <div class="colorsquare"><span style="background-color:snow;"> </span>snow = #fffafa</div>
1413 <div class="colorsquare"><span style="background-color:springgreen;"> </span>springgreen = #00ff7f</div>
1414 <div class="colorsquare"><span style="background-color:steelblue;"> </span>steelblue = #4682b4</div>
1415 <div class="colorsquare"><span style="background-color:tan;"> </span>tan = #d2b48c</div>
1416 <div class="colorsquare"><span style="background-color:teal;"> </span>teal = #008080</div>
1417 <div class="colorsquare"><span style="background-color:thistle;"> </span>thistle = #d8bfd8</div>
1418 <div class="colorsquare"><span style="background-color:tomato;"> </span>tomato = #ff6347</div>
1419 <div class="colorsquare"><span style="background-color:turquoise;"> </span>turquoise = #40e0d0</div>
1420 <div class="colorsquare"><span style="background-color:violet;"> </span>violet = #ee82ee</div>
1421 <div class="colorsquare"><span style="background-color:wheat;"> </span>wheat = #f5deb3</div>
1422 <div class="colorsquare"><span style="background-color:white;"> </span>white = #ffffff</div>
1423 <div class="colorsquare"><span style="background-color:whitesmoke;"> </span>whitesmoke = #f5f5f5</div>
1424 <div class="colorsquare"><span style="background-color:yellow;"> </span>yellow = #ffff00</div>
1425 <div class="colorsquare"><span style="background-color:yellowgreen;"> </span>yellowgreen = #9acd32</div>
1426 <div class="colorsquare"><span style="background-color:transparent;"> </span>transparent = rgba(0,0,0,0)</div>
1427 </div>
1428 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4>
1429 <p>With looked-up colors you can refer to any other color property that is
1430 set on the current node or any of its parents. This is a very powerful
1431 feature, as it allows a generic palette of colors to be specified on the
1432 scene then used thoughout the application. If you want to change one of
1433 those palette colors you can do so at any level in the scene tree and it
1434 will affect that node and all its decendents. Looked-up colors are not
1435 looked up until they are applied, so they are live and react to any style
1436 changes that might occur, such as replacing a palette color at runtime
1437 with the "style" property on a node.</p>
1438 <p>In the following example, all background color of all buttons uses the
1439 looked up color "abc".</p>
1440 <p class="example">.root { abc: #f00 }<br>
1441 .button { -fx-background-color: abc }</p>
1442 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4>
1443 <p>The RGB color model is used in numerical color specifications. It has a
1444 number of different supported forms.</p>
1445 <p class="grammar">#<digit><digit><digit><br>
1446 |
1447 #<digit><digit><digit><digit><digit><digit><br>
1448 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1449 class="typelink"><integer></a>
1450 , <a href="#typenumber" class="typelink"><integer></a> )<br>
1451 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a
1452 href="#typenumber"
1453 class="typelink"><integer></a>%
1454 , <a href="#typenumber" class="typelink"><integer></a>% )<br>
1455 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a
1456 href="#typenumber"
1457 class="typelink"><integer></a>
1458 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1459 class="typelink"><number></a>
1460 ) <br>
1461 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a
1462 href="#typenumber"
1490 space characters are allowed around the numerical values.</p>
1491 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model
1492 to include an ‘alpha’ value that specifies the opacity of a
1493 color. This is accomplished via a functional syntax of the form rgba(...)
1494 form that takes a fourth parameter which is the alpha value. The alpha
1495 value must be a number in the range 0.0 (representing completely
1496 transparent) and 1.0 (completely opaque). As with the rgb() function, the
1497 red, green, and blue values may be decimal integers or percentages. The
1498 following examples all specify the same color:</p>
1499 <p class="example"> </p>
1500 <ul style="list-style: none;">
1501 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li>
1502 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
1503 opacity of 1 */</li>
1504 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% —
1505 100.0% */</li>
1506 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
1507 explicit opacity of 1 */</li>
1508 </ul>
1509 <p> </p>
1510 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4>
1511 <p>Colors can be specified using the HSB (sometimes called HSV) color model,
1512 as follows:</p>
1513 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a>
1514 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1515 class="typelink"><number></a>%
1516 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a
1517 href="#typenumber"
1518 class="typelink"><number></a>%
1519 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1520 class="typelink"><number></a>
1521 )</p>
1522 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360
1523 degrees. The second number is <em>saturation,</em> a percentage in the
1524 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a
1525 percentage in the range 0% to 100%. The hsba(...) form takes a fourth
1526 parameter at the end which is a alpha value in the range 0.0 to 1.0,
1527 specifying completely transparent and completely opaque, respectively.</p>
1528 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4>
1529 <p>JavaFX supports some color computation functions. These compute new
1530 colors from input colors at the time the color style is applied. This
1531 enables a color theme to be specified using a single base color and to
1532 have variant colors computed from that base color. There are two color
1533 functions: derive() and ladder().</p>
1534 <p class="grammar"><derive> | <ladder></p>
1535 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p>
1536 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a>
1537 , <a href="#typenumber" class="typelink"><number></a>% )</p>
1538 <p>The derive function takes a color and computes a brighter or darker
1539 version of that color. The second parameter is the brightness offset,
1540 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors
1541 and negative percentages indicate darker colors. A value of -100% means
1542 completely black, 0% means no change in brightness, and 100% means
1543 completely white.</p>
1544 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p>
1545 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a>
1546 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a
1547 href="#typecolorstop"
1548 class="typelink"><color-stop></a>]+)</p>
1549 <p>The ladder function interpolates between colors. The effect is as if a
1550 gradient is created using the stops provided, and then the brightness of
1551 the provided <a href="#typecolor" class="typelink"><color></a> is
1552 used to index a color value within that gradient. At 0% brightness, the
1553 color at the 0.0 end of the gradient is used; at 100% brightness, the
1554 color at the 1.0 end of the gradient is used; and at 50% brightness, the
1555 color at 0.5, the midway point of the gradient, is used. Note that no
1556 gradient is actually rendered. This is merely an interpolation function
1557 that results in a single color.</p>
1558 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1559 class="typelink">W3C
1560 color-stop syntax</a> and are normalized accordingly.</p>
1561 <p>For example, you could use the following if you want the text color to be
1562 black or white depending upon the brightness of the background.</p>
1563 <p class="example">background: white;<br>
1564 -fx-text-fill: ladder(background, white 49%, black 50%);</p>
2105 <h4><a id="region">Region</a></h4>
2106 <p class="styleclass">Style class: empty by default</p>
2107 <p>A Region is a Node (extending from Parent) with backgrounds and borders
2108 that are styleable via CSS. A Region is typically a rounded rectangle,
2109 though this can be modified through CSS to be an arbitrary shape. Regions
2110 can contain other Region objects (sub-regions) or they can contain
2111 sub-controls. All Regions have the same set of CSS properties as described
2112 below. </p>
2113 <p>Each Region consists of several layers, painted from bottom to top, in
2114 this order:</p>
2115 <ol>
2116 <li>background fills</li>
2117 <li>background images</li>
2118 <li>border strokes</li>
2119 <li>border images</li>
2120 <li>contents</li>
2121 </ol>
2122 <p>The background and border mechanisms are patterned after the CSS 3 draft
2123 backgrounds and borders module. See <a href="#references">[4]</a> for a
2124 detailed description.</p>
2125 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>,
2126 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>.
2127 The -fx-background-color property is a series of one or more
2128 comma-separated <paint> values. The number of values in the series
2129 determines the number of background rectangles that are painted.
2130 Background rectangles are painted in the order specified using the given
2131 <paint> value. Each background rectangle can have different radii
2132 and insets. The -fx-background-radius and -fx-background-insets properties
2133 are series of comma-separated values (or sets of values). The radius and
2134 insets values used for a particular background are the found in the
2135 corresponding position in the -fx-background-radius and
2136 -fx-background-insets series. For example, suppose a series of three
2137 values is given for the -fx-background-color property. A series of three
2138 values should also be specified for the -fx-background-radius and
2139 -fx-background-insets properties. The first background will be painted
2140 using the first radius value and first insets value, the second background
2141 will be painted with the second radius value and second insets value, and
2142 so forth.</p>
2143 <p>Note also that properties such as -fx-background-radius and
2144 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of
2145 four values. A set of values is separated by whitespace, whereas the
2146 values or sets-of-values in a series are separated by commas. For
2147 -fx-background-radius, a single value indicates that the value should be
2148 used for the radius of all four corners of the background rectangle. A set
2149 of four values indicates that different radius values are to be used for
2150 the top-left, top-right, bottom-right, and bottom-left corners, in that
2151 order. Similarly, the -fx-background-insets property can also contain a
2152 series of values or sets of values. A set of four values for
2153 -fx-background-insets indicates that different insets are to be used for
2154 the top, right, bottom, and left edges of the rectangle, in that order.</p>
2155 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>,
2156 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span>
2157 and <span class="propertyname">-fx-background-size</span>. The number of
2158 images in the series of -fx-background-image values determines the number
2159 of background images that are painted. The -fx-background-repeat,
2160 -fx-background-position, and -fx-background-size properties each can
2161 contain a series of values. For each item in the -fx-background-image
2162 series, the corresponding items in the -fx-background-repeat,
2163 -fx-background-position, and -fx-background-size properties are applied to
2164 that background image.</p>
2165 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>,
2166 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>,
2167 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>.
2168 Each property contains a series of items. The maximum number of items in the -fx-
2169 border-color or -fx-border-style property determines the number of border layers that are painted..
2170 Each border in the series is painted using information from the
2171 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width,
2172 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black.
2173 if there is no -fx-border-style, the default style is solid. </p>
2174 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>,
2175 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>,
2176 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>.
2177 Each property contains a series of items. The number of items in the
2178 -fx-border-image-source property determines the number of images that are
2179 painted. Each image in the series is painted using information from the
2180 corresponding series items of the -fx-border-image-repeat,
2181 -fx-border-image-slice, -fx-border-image-width, and
2182 -fx-border-image-insets properties.</p>
2183 <p>The region's contents are a sequence of nodes, like any other container.
2184 The contents are set programmatically and cannot be set via CSS.</p>
2185 <table class="csspropertytable">
2186 <caption>Available CSS Properties</caption>
2187 <thead>
2188 <tr>
2189 <th class="propertyname" scope="col">CSS Property</th>
2190 <th class="value" scope="col">Values</th>
2191 <th scope="col">Default</th>
2192 <th scope="col">Comments</th>
2193 </tr>
2194 </thead>
2195 <tbody>
2196 <tr>
|