1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html lang="en-US">
3 <head>
4 <meta name="description" content="This document describes the JavaFX
5 Cascading Style Sheets (CSS) for JavaFX 9 and explains the
6 styles, values, properties and associated grammar.">
7 <meta name="keywords" content="JavaFX, JavaFX CSS, JavaFX CSS reference,
8 JavaFX CSS guide, JavaFX styling, CSS styles, CSS, cascading style sheets,
9 JavaFX GUI development, JavaFX application development">
10 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
11 <title>JavaFX CSS Reference Guide</title>
12 <style type="text/css">
13 body {
14 font-family: Helvetica, Arial, sans-serif;
15 font-size: 14px;
16 }
17 h1 {
18 font-size: 28px;
19 color:#385E76
20 }
21 h2 {
682 <p class="example">.my-rect {<br>
683 -fx-fill: yellow;<br>
684 -fx-stroke: green;<br>
685 -fx-stroke-width: 5;<br>
686 -fx-stroke-dash-array: 12 2 4 2;<br>
687 -fx-stroke-dash-offset: 6;<br>
688 -fx-stroke-line-cap: butt;<br>
689 }<br>
690 </p>
691 <p>the result will be a yellow rectangle with a nicely dashed green border:
692 </p>
693 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p>
694 <h3><a name="introparserwarnings" id="introparserwarnings">Understanding
695 Parser Warnings</a></h3>
696 <p>When the JavaFX CSS parser encounters a syntax error, a warning message
697 is emitted which conveys as much information as is available to help
698 resolve the error. For example </p>
699 <p class="example"> WARNING: javafx.css.CssParser declaration
700 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]
701 </p>
702 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the
703 location of the error. The format of the location string is </p>
704 <p class="grammar"><url>[line, position]</p>
705 <p>If the error is found while parsing a file, the file URL will be given.
706 If the error is from an inline style (as in the example above), the URL is
707 given as a question mark. The line and position give an offset into the
708 file or string where the token begins. <em>Please note that the line and
709 position may not be accurate in releases prior to JavaFX 2.2.</em><br>
710 </p>
711 <p>Applications needing to detect errors from the parser can add a listener
712 to the errors property of javafx.css.CssParser. <br>
713 </p>
714 <h3><a name="introlimitations" id="introlimitations">Limitations</a></h3>
715 <ol>
716 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a
717 fully compliant CSS parser. One should not expect the parser to handle
718 syntax not specified in this document.</li>
719 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li>
720 <li>The <media-query-list> of the @import statement is not parsed.</li>
721 <li>The structural pseudo‑classes are not supported. </li>
722 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported.
804 </ul>
805 <h4><a name="typepercentage" id="typepercentage"><percentage></a></h4>
806 <p>These are a percentage of some length, typically to the width or height
807 of a node.</p>
808 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p>
809 <h3><a name="typeangle" id="typeangle"><angle></a></h3>
810 <p>An angle is a <a href="#typenumber" class="typeref"><number></a>
811 with one of the following units.</p>
812 <p> </p>
813 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad |
814 grad | turn ]</p>
815 <ul>
816 <li><strong>deg</strong>: angle in degrees — all other angle units are
817 converted to degrees.</li>
818 <li><strong>rad</strong>: angle in radians</li>
819 <li><strong>grad</strong>: angle in gradians</li>
820 <li><strong>turn</strong>: angle in turns</li>
821 </ul>
822 <h3><a name="typeduration" id="typeduration"><duration></a></h3>
823 <p>A duration is a <a href="#typenumber" class="typeref"><number></a>
824 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
825 <p> </p>
826 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p>
827 <ul>
828 <li><strong>s</strong>: duration in seconds</li>
829 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li>
830 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li>
831 </ul>
832 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p>
833 <h3><a name="typepoint" id="typepoint"><point></a></h3>
834 <p>A point is an {x,y} coordinate.</p>
835 <p class="grammar">[ [ <length> <length> ] | [
836 <percentage> | <percentage> ] ]</p>
837 <h3><a name="typecolorstop" id="typecolorstop"><color-stop></a></h3>
838 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
839 class="typelink">W3C
840 color-stop syntax</a>.</p>
841 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a>
842 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a
843 href="#typelength"
844 class="typeref"><length></a>]?
845 ]</p>
846 <p>In a series of <color-stop>, stop distance values must all be
847 <percentage> or <length>. Furthermore, if <length>
848 values are used, then the distance value for first and last stop in the
849 series must be specified. This restriction may be removed in a future
850 release.</p>
851 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the
852 distance for red and blue is assumed to be 0% and 100%, respectively.</p>
853 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because
854 distance for red and blue is 10 and 90, respectively, the distance for
855 white can be calculated.</p>
856 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid
857 since distance units do not agree.</p>
858 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are
859 distributed evenly between 0% and 100%.</p>
860 <h3><a name="typeurl" id="typeurl"><uri></a></h3>
861 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p>
862 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>.
863 For example:</p>
864 <p class="example">
865 url(http://example.com/images/Duke.png)<br>
866 url(/com/example/javafx/app/images/Duke.png)<br>
867 </p>
868 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span>
869 is considered to be the [path] component only.
870 A leading '/' character indicates that the [path] is relative to the
871 root of the classpath. If the the style appears in a stylesheet and
872 has no leading '/' character, the path is relative to the base URI of
873 the stylesheet. If the style appears in an inline style, the path is
874 relative to the root of the classpath (regardless of whether or not
875 there is a leading '/').
876 </p>
877 <table class="csspropertytable" cellspacing="3" cellpadding="4">
878 <caption>Examples of Resolving URLs in Stylesheets</caption>
879 <tr>
880 <th>Stylesheet URL</th><th>URL in Style</th><th>Resolves to</th>
881 </tr>
882 <tr>
883 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
884 <td>url(images/Duke.png)</td>
885 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td>
886 </tr>
887 <tr>
888 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
897 </table>
898 <p></p>
899 <table class="csspropertytable" cellspacing="3" cellpadding="4">
900 <caption>Examples of Resolving URLs in Inline Styles</caption>
901 <tr>
902 <th>Classpath</th><th>URL in Style</th><th>Resolved URL</th>
903 </tr>
904 <tr>
905 <td>file:///some/path/build/classes</td>
906 <td>url(/com/mycompany/resources/images/Duke.png)</td>
907 <td>file:///some/path/build/classes/com/mycompany/resources/images/Duke.png</td>
908 </tr>
909 <tr>
910 <td>file:///some/path/build/myapp.jar</td>
911 <td>url(/com/mycompany/resources/images/Duke.png)</td>
912 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.png</td>
913 </tr>
914 </table>
915 <p>Note that for inline styles, leading dot-segments (e.g. '..' or '.') do resolve since the path is always
916 anchored at the root of the classpath.</p>
917 <p>This snippet of code creates a scene filled with the "paste" image from HTMLEditor which is found in jfxrt.jar.</p>
918 <textarea rows="9" cols="132">
919
920 @Override public void start(Stage stage) {
921 StackPane root = new StackPane();
922 root.setStyle("-fx-background-image: url(/com/sun/javafx/scene/control/skin/modena/HTMLEditor-Paste.png);");
923 Scene scene = new Scene(root, 300, 250);
924 stage.setScene(scene);
925 stage.show();
926 }
927 </textarea>
928 <p>The same style would work equally as well from a stylesheet.</p>
929 <h3><a name="typeeffect" id="typeeffect"><effect></a></h3>
930 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from
931 the JavaFX platform. See the class documentation in javafx.scene.effect
932 for further details about the semantics of the various effect parameters.</p>
933 <h4>Drop Shadow</h4>
934 <p>A high-level effect that renders a shadow of the given content behind the
935 content.</p>
936 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor"
937 class="typelink"><color></a>
938 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
939 class="typelink"><number></a>
940 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
941 class="typelink"><number></a>
942 )</span></p>
943 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
944 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
945 <a href="#typecolor" class="typelink"><color></a></span> The
946 shadow Color.<br>
947 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
948 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
949 typical value 10.<br>
950 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
951 The spread of the shadow. The spread is the portion of the radius where
952 the contribution of the source material will be 100%. The remaining
953 portion of the radius will have a contribution controlled by the blur
954 kernel. A spread of 0.0 will result in a distribution of the shadow
955 determined entirely by the blur algorithm. A spread of 1.0 will result in
956 a solid growth outward of the source material opacity to the limit of the
957 radius with a very sharp cutoff to transparency at the radius. Values
958 should be in the range [0.0 ... 1.0].<br>
959 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
960 The shadow offset in the x direction, in pixels. <br>
961 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
962 The shadow offset in the y direction, in pixels. </p>
963 <h4>Inner Shadow</h4>
964 <p>A high-level effect that renders a shadow inside the edges of the given
965 content.</p>
966 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor"
967 class="typelink"><color></a>
968 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
969 class="typelink"><number></a>
970 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
971 class="typelink"><number></a>
972 )</span></p>
973 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
974 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
975 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span>
976 The shadow Color.<br>
977 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
978 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
979 typical value 10.<br>
980 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
981 The choke of the shadow. The choke is the portion of the radius where the
982 contribution of the source material will be 100%. The remaining portion of
983 the radius will have a contribution controlled by the blur kernel. A choke
984 of 0.0 will result in a distribution of the shadow determined entirely by
985 the blur algorithm. A choke of 1.0 will result in a solid growth inward of
986 the shadow from the edges to the limit of the radius with a very sharp
987 cutoff to transparency inside the radius. Values should be in the range
988 [0.0 ... 1.0].<br>
989 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
990 The shadow offset in the x direction, in pixels. <br>
991 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
992 The shadow offset in the y direction, in pixels. </p>
993 <h3><a name="typefont" id="typefont"><font></a></h3>
994 <p>JavaFX CSS supports the ability to specify fonts using separate family,
995 size, style, and weight properties, as well as the ability to specify a
996 font using a single shorthand property. There are four value types related
997 to fonts plus a shorthand property that encompasses all four properties.
998 The font-related types are as follows. </p>
999 <p><span class="grammar"><font-family></span>The string name of the
1000 font family. An actual font family name available on the system can be
1001 used, or one of the following generic family names can be used:</p>
1002 <ul>
1003 <li>'serif' (e.g., Times)</li>
1004 <li>'sans-serif' (e.g., Helvetica)</li>
1005 <li>'cursive' (e.g., Zapf-Chancery)</li>
1006 <li>'fantasy' (e.g., Western)</li>
1007 <li>'monospace' (e.g., Courier)</li>
1008 </ul>
1009 <p><span class="grammar"><font-size></span> The size of the font,
1010 using the <span class="grammar"><size></span> syntax.</p>
1011 <p><span class="grammar"><font-style></span> The font's style, using
1012 the following syntax:<br>
1013 <span class="grammar">[ normal | italic | oblique ]</span></p>
1014 <p><span class="grammar"><font-weight></span> The font's weight, using
1015 the following syntax:<br>
1016 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300
1017 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p>
1018 <p><span class="grammar"><font></span> This font shorthand property
1019 can be used in place of the above properties. It uses the following
1020 syntax:<br>
1021 <span class="grammar">[[ <font-style> || <font-weight> ]?
1022 <font-size> <font-family> ]</span></p>
1023 <h4><a name="fontprops" id="fontprops">Font Properties</a></h4>
1024 <p>Most classes that use text will support the following font properties. In
1025 some cases a similar set of properties will be supported but with a
1026 different prefix instead of "-fx-font".</p>
1027 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
1028 <thead>
1029 <tr>
1030 <th class="propertyname">CSS Property</th>
1031 <th class="value">Values</th>
1032 <th>Default</th>
1033 <th>Comments</th>
1034 </tr>
1035 </thead>
1036 <tbody>
1037 <tr>
1038 <td class="propertyname">-fx-font</td>
1039 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
1040 <td>inherit</td>
1041 <td>shorthand property for font-size, font-family, font-weight and
1058 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td>
1059 <td>inherit</td>
1060 <td> </td>
1061 </tr>
1062 <tr>
1063 <td class="propertyname">-fx-font-weight</td>
1064 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td>
1065 <td>inherit</td>
1066 <td> </td>
1067 </tr>
1068 </tbody>
1069 </table>
1070 <h3><a name="typepaint" id="typepaint"><paint></a></h3>
1071 <p>Paint values can either be a solid color specified in one of the color
1072 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
1073 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> |
1074 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> |
1075 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> |
1076 <a href="#typeimage-pattern" class="typelink"><image-pattern></a>
1077 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p>
1078 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1079 <a name="typelinear-gradient" id="typelinear-gradient"><linear-gradient></a>
1080 </span></h4>
1081 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a>
1082 to <a href="#typepoint" class="typelink"><point></a>] | [ to
1083 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1084 class="typelink"><color-stop></a>[,
1085 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br>
1086 <br>
1087 where <side-or-corner> = [left | right] || [top | bottom] </p>
1088 <p> </p>
1089 <p>Linear gradient creates a gradient going though all the stop colors along
1090 the line between the "from" <a href="#typepoint" class="typelink"><point></a>
1091 and the "to" <a href="#typepoint" class="typelink"><point></a>. If
1092 the points are percentages, then they are relative to the size of the area
1093 being filled. Percentage and length sizes can not be mixed in a single
1094 gradient function.</p>
1095 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1096 "NO_CYCLE".<br>
1097 If neither [from <point> to <point>] nor [ to
1098 <side-or-corner> ] are given, then the gradient direction defaults
1100 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1101 class="typelink">W3C
1102 color-stop syntax</a> and are normalized accordingly. </p>
1103 <p>This example will create a gradient from top left to bottom right of the
1104 filled area with red at the top left corner and black at the bottom right.</p>
1105 <p class="example">linear-gradient(to bottom right, red, black)</p>
1106 <p>This is equivalent to: </p>
1107 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black
1108 100%)</p>
1109 <p>This more complex example will create a 50px high bar at the top with a 3
1110 color gradient with white underneath for the rest of the filled area.</p>
1111 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray
1112 50%, dimgray 99%, white)</p>
1113 <p><span style="color: #af0000; ">The following syntax for linear gradient does not
1114 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1115 2.0 CSS parser supports the syntax but this support may be removed in
1116 later releases.</span></p>
1117 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>)
1118 to (<size>, <size>) stops [ (<number>,<color>)
1119 ]+ [ repeat | reflect ]?</span></p>
1120 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1121 <a name="typeradial-gradient" id="typeradial-gradient"><radial-gradient></a>
1122 </span></h4>
1123 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>,
1124 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>,
1125 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]?
1126 radius [ <a href="#typelength" class="typelink"><length></a> | <a
1127 href="#typepercentage"
1128 class="typelink"><percentage></a>
1129 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[,
1130 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p>
1131 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from
1132 the <a href="#typepoint" class="typelink">center point</a>
1133 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given,
1134 the center defaults to (0,0). Percentage values are relative to the size of the area
1135 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p>
1136 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1137 "NO_CYCLE".<br>
1138 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1139 class="typelink">W3C
1140 color-stop syntax</a> and are normalized accordingly. </p>
1141 <p>Following are examples of the use of radial-gradient:</p>
1142 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p>
1143 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%,
1144 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p>
1145 <p><span style="color: #af0000; ">The following syntax for radial gradient does not
1146 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1147 2.0 CSS parser supports the syntax but this support may be removed in
1148 later releases.</span></p>
1149 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number>
1150 | <number> ] ]? [ focus-distance <size> ]? [ center
1151 <size,size> ]? <size> stops [ ( <number>,
1152 <color> ) ]+ [ repeat | reflect ]?</span></p>
1153 <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1154 <a name="typeimage-pattern" id="typeimage-pattern"><image-pattern></a>
1155 </span></h4>
1156 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>,
1157 [<a href="#typesize" class="typelink"><size></a>,
1158 <a href="#typesize" class="typelink"><size></a>,
1159 <a href="#typesize" class="typelink"><size></a>,
1160 <a href="#typesize" class="typelink"><size></a>[,
1161 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p>
1162 <p>The parameters, in order, are:<br>
1163 <p style="margin-left: 40px;">
1164 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span>
1165 The URL of the image.<br>
1166 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1167 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br>
1168 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1169 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br>
1170 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1171 The width of the anchor rectangle.<br>
1172 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1173 The height of the anchor rectangle.<br>
1174 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span>
1175 The proportional flag which indicates whether start and end locations are proportional or absolute<br>
1176 </p>
1177 <p>For a full explanation of the parameters, refer to the
1178 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>
1179 <p>Following are examples of the use of image-pattern:</p>
1180 <p class="example">image-pattern("images/Duke.png")</p>
1181 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p>
1182 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p>
1183 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>
1184
1185 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand
1186 for producing tiled image based fills. It is equivalent to
1187 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p>
1188
1189 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p>
1190 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p>
1191 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p>
1192
1193
1194
1195 <h3><a name="typecolor" id="typecolor"><color></a></h3>
1196 <p class="grammar"><named-color> | <looked-up-color> |
1197 <rgb-color> | <hsb-color> | <color-function></p>
1198 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4>
1199 <p>CSS supports a bunch of named constant colors. Named colors can be
1200 specified with just their unquoted name for example: </p>
1201 <p class="example">.button {<br>
1202 -fx-background-color: red;<br>
1203 }</p>
1204 <p>The named colors that are available in CSS are:</p>
1205 <table summary="property table" class="html4colortable">
1206 <tbody>
1207 <tr>
1208 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;"></span><br>
1209 </td>
1210 <td>aliceblue = #f0f8ff</td>
1211 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;"></span><br>
1212 </td>
1213 <td>antiquewhite = #faebd7</td>
1214 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;"></span><br>
1215 </td>
1216 <td>aqua = #00ffff</td>
1217 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;"></span><br>
1218 </td>
1219 <td>aquamarine = #7fffd4</td>
1220 </tr>
1221 <tr>
1222 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;"></span><br>
1223 </td>
1224 <td>azure = #f0ffff</td>
1225 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;"></span><br>
1226 </td>
1227 <td>beige = #f5f5dc</td>
1228 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;"></span><br>
1229 </td>
1230 <td>bisque = #ffe4c4</td>
1231 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;"></span><br>
1232 </td>
1233 <td>black = #000000</td>
1234 </tr>
1235 <tr>
1236 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;"></span><br>
1237 </td>
1238 <td>blanchedalmond = #ffebcd</td>
1239 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;"></span><br>
1240 </td>
1241 <td>blue = #0000ff</td>
1242 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;"></span><br>
1243 </td>
1244 <td>blueviolet = #8a2be2</td>
1245 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;"></span><br>
1246 </td>
1247 <td>brown = #a52a2a</td>
1248 </tr>
1249 <tr>
1250 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;"></span><br>
1251 </td>
1252 <td>burlywood = #deb887</td>
1253 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;"></span><br>
1254 </td>
1255 <td>cadetblue = #5f9ea0</td>
1256 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;"></span><br>
1257 </td>
1258 <td>chartreuse = #7fff00</td>
1259 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;"></span><br>
1260 </td>
1261 <td>chocolate = #d2691e</td>
1262 </tr>
1263 <tr>
1264 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;"></span><br>
1265 </td>
1266 <td>coral = #ff7f50</td>
1267 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;"></span><br>
1268 </td>
1269 <td>cornflowerblue = #6495ed</td>
1270 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;"></span><br>
1271 </td>
1272 <td>cornsilk = #fff8dc</td>
1273 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;"></span><br>
1274 </td>
1275 <td>crimson = #dc143c</td>
1276 </tr>
1277 <tr>
1278 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;"></span><br>
1279 </td>
1280 <td>cyan = #00ffff</td>
1281 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;"></span><br>
1282 </td>
1283 <td>darkblue = #00008b</td>
1284 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;"></span><br>
1285 </td>
1286 <td>darkcyan = #008b8b</td>
1287 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;"></span><br>
1288 </td>
1289 <td>darkgoldenrod = #b8860b</td>
1290 </tr>
1291 <tr>
1292 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;"></span><br>
1293 </td>
1294 <td>darkgray = #a9a9a9</td>
1295 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;"></span><br>
1296 </td>
1297 <td>darkgreen = #006400</td>
1298 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;"></span><br>
1299 </td>
1300 <td>darkgrey = #a9a9a9</td>
1301 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;"></span><br>
1302 </td>
1303 <td>darkkhaki = #bdb76b</td>
1304 </tr>
1305 <tr>
1306 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;"></span><br>
1307 </td>
1308 <td>darkmagenta = #8b008b</td>
1309 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;"></span><br>
1310 </td>
1311 <td>darkolivegreen = #556b2f</td>
1312 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;"></span><br>
1313 </td>
1314 <td>darkorange = #ff8c00</td>
1315 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;"></span><br>
1316 </td>
1317 <td>darkorchid = #9932cc</td>
1318 </tr>
1319 <tr>
1320 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;"></span><br>
1321 </td>
1322 <td>darkred = #8b0000</td>
1323 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;"></span><br>
1324 </td>
1325 <td>darksalmon = #e9967a</td>
1326 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;"></span><br>
1327 </td>
1328 <td>darkseagreen = #8fbc8f</td>
1329 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;"></span><br>
1330 </td>
1331 <td>darkslateblue = #483d8b</td>
1332 </tr>
1333 <tr>
1334 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;"></span><br>
1335 </td>
1336 <td>darkslategray = #2f4f4f</td>
1337 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;"></span><br>
1338 </td>
1339 <td>darkslategrey = #2f4f4f</td>
1340 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;"></span><br>
1341 </td>
1342 <td>darkturquoise = #00ced1</td>
1343 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;"></span><br>
1344 </td>
1345 <td>darkviolet = #9400d3</td>
1346 </tr>
1347 <tr>
1348 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;"></span><br>
1349 </td>
1350 <td>deeppink = #ff1493</td>
1351 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;"></span><br>
1352 </td>
1353 <td>deepskyblue = #00bfff</td>
1354 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;"></span><br>
1355 </td>
1356 <td>dimgray = #696969</td>
1357 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;"></span><br>
1358 </td>
1359 <td>dimgrey = #696969</td>
1360 </tr>
1361 <tr>
1362 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;"></span><br>
1363 </td>
1364 <td>dodgerblue = #1e90ff</td>
1365 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;"></span><br>
1366 </td>
1367 <td>firebrick = #b22222</td>
1368 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;"></span><br>
1369 </td>
1370 <td>floralwhite = #fffaf0</td>
1371 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;"></span><br>
1372 </td>
1373 <td>forestgreen = #228b22</td>
1374 </tr>
1375 <tr>
1376 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;"></span><br>
1377 </td>
1378 <td>fuchsia = #ff00ff</td>
1379 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;"></span><br>
1380 </td>
1381 <td>gainsboro = #dcdcdc</td>
1382 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;"></span><br>
1383 </td>
1384 <td>ghostwhite = #f8f8ff</td>
1385 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;"></span><br>
1386 </td>
1387 <td>gold = #ffd700</td>
1388 </tr>
1389 <tr>
1390 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;"></span><br>
1391 </td>
1392 <td>goldenrod = #daa520</td>
1393 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;"></span><br>
1394 </td>
1395 <td>gray = #808080</td>
1396 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;"></span><br>
1397 </td>
1398 <td>green = #008000</td>
1399 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;"></span><br>
1400 </td>
1401 <td>greenyellow = #adff2f</td>
1402 </tr>
1403 <tr>
1404 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;"></span><br>
1405 </td>
1406 <td>grey = #808080</td>
1407 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;"></span><br>
1408 </td>
1409 <td>honeydew = #f0fff0</td>
1410 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;"></span><br>
1411 </td>
1412 <td>hotpink = #ff69b4</td>
1413 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;"></span><br>
1414 </td>
1415 <td>indianred = #cd5c5c</td>
1416 </tr>
1417 <tr>
1418 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;"></span><br>
1419 </td>
1420 <td>indigo = #4b0082</td>
1421 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;"></span><br>
1422 </td>
1423 <td>ivory = #fffff0</td>
1424 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;"></span><br>
1425 </td>
1426 <td>khaki = #f0e68c</td>
1427 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;"></span><br>
1428 </td>
1429 <td>lavender = #e6e6fa</td>
1430 </tr>
1431 <tr>
1432 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;"></span><br>
1433 </td>
1434 <td>lavenderblush = #fff0f5</td>
1435 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;"></span><br>
1436 </td>
1437 <td>lawngreen = #7cfc00</td>
1438 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;"></span><br>
1439 </td>
1440 <td>lemonchiffon = #fffacd</td>
1441 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;"></span><br>
1442 </td>
1443 <td>lightblue = #add8e6</td>
1444 </tr>
1445 <tr>
1446 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;"></span><br>
1447 </td>
1448 <td>lightcoral = #f08080</td>
1449 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;"></span><br>
1450 </td>
1451 <td>lightcyan = #e0ffff</td>
1452 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;"></span><br>
1453 </td>
1454 <td>lightgoldenrodyellow = #fafad2</td>
1455 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;"></span><br>
1456 </td>
1457 <td>lightgray = #d3d3d3</td>
1458 </tr>
1459 <tr>
1460 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;"></span><br>
1461 </td>
1462 <td>lightgreen = #90ee90</td>
1463 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;"></span><br>
1464 </td>
1465 <td>lightgrey = #d3d3d3</td>
1466 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;"></span><br>
1467 </td>
1468 <td>lightpink = #ffb6c1</td>
1469 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;"></span><br>
1470 </td>
1471 <td>lightsalmon = #ffa07a</td>
1472 </tr>
1473 <tr>
1474 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;"></span><br>
1475 </td>
1476 <td>lightseagreen = #20b2aa</td>
1477 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;"></span><br>
1478 </td>
1479 <td>lightskyblue = #87cefa</td>
1480 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;"></span><br>
1481 </td>
1482 <td>lightslategray = #778899</td>
1483 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;"></span><br>
1484 </td>
1485 <td>lightslategrey = #778899</td>
1486 </tr>
1487 <tr>
1488 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;"></span><br>
1489 </td>
1490 <td>lightsteelblue = #b0c4de</td>
1491 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;"></span><br>
1492 </td>
1493 <td>lightyellow = #ffffe0</td>
1494 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;"></span><br>
1495 </td>
1496 <td>lime = #00ff00</td>
1497 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;"></span><br>
1498 </td>
1499 <td>limegreen = #32cd32</td>
1500 </tr>
1501 <tr>
1502 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;"></span><br>
1503 </td>
1504 <td>linen = #faf0e6</td>
1505 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;"></span><br>
1506 </td>
1507 <td>magenta = #ff00ff</td>
1508 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;"></span><br>
1509 </td>
1510 <td>maroon = #800000</td>
1511 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;"></span><br>
1512 </td>
1513 <td>mediumaquamarine = #66cdaa</td>
1514 </tr>
1515 <tr>
1516 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;"></span><br>
1517 </td>
1518 <td>mediumblue = #0000cd</td>
1519 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;"></span><br>
1520 </td>
1521 <td>mediumorchid = #ba55d3</td>
1522 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;"></span><br>
1523 </td>
1524 <td>mediumpurple = #9370db</td>
1525 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;"></span><br>
1526 </td>
1527 <td>mediumseagreen = #3cb371</td>
1528 </tr>
1529 <tr>
1530 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;"></span><br>
1531 </td>
1532 <td>mediumslateblue = #7b68ee</td>
1533 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;"></span><br>
1534 </td>
1535 <td>mediumspringgreen = #00fa9a</td>
1536 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;"></span><br>
1537 </td>
1538 <td>mediumturquoise = #48d1cc</td>
1539 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;"></span><br>
1540 </td>
1541 <td>mediumvioletred = #c71585</td>
1542 </tr>
1543 <tr>
1544 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;"></span><br>
1545 </td>
1546 <td>midnightblue = #191970</td>
1547 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;"></span><br>
1548 </td>
1549 <td>mintcream = #f5fffa</td>
1550 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;"></span><br>
1551 </td>
1552 <td>mistyrose = #ffe4e1</td>
1553 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;"></span><br>
1554 </td>
1555 <td>moccasin = #ffe4b5</td>
1556 </tr>
1557 <tr>
1558 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;"></span><br>
1559 </td>
1560 <td>navajowhite = #ffdead</td>
1561 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;"></span><br>
1562 </td>
1563 <td>navy = #000080</td>
1564 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;"></span><br>
1565 </td>
1566 <td>oldlace = #fdf5e6</td>
1567 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;"></span><br>
1568 </td>
1569 <td>olive = #808000</td>
1570 </tr>
1571 <tr>
1572 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;"></span><br>
1573 </td>
1574 <td>olivedrab = #6b8e23</td>
1575 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;"></span><br>
1576 </td>
1577 <td>orange = #ffa500</td>
1578 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;"></span><br>
1579 </td>
1580 <td>orangered = #ff4500</td>
1581 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;"></span><br>
1582 </td>
1583 <td>orchid = #da70d6</td>
1584 </tr>
1585 <tr>
1586 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;"></span><br>
1587 </td>
1588 <td>palegoldenrod = #eee8aa</td>
1589 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;"></span><br>
1590 </td>
1591 <td>palegreen = #98fb98</td>
1592 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;"></span><br>
1593 </td>
1594 <td>paleturquoise = #afeeee</td>
1595 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;"></span><br>
1596 </td>
1597 <td>palevioletred = #db7093</td>
1598 </tr>
1599 <tr>
1600 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;"></span><br>
1601 </td>
1602 <td>papayawhip = #ffefd5</td>
1603 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;"></span><br>
1604 </td>
1605 <td>peachpuff = #ffdab9</td>
1606 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;"></span><br>
1607 </td>
1608 <td>peru = #cd853f</td>
1609 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;"></span><br>
1610 </td>
1611 <td>pink = #ffc0cb</td>
1612 </tr>
1613 <tr>
1614 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;"></span><br>
1615 </td>
1616 <td>plum = #dda0dd</td>
1617 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;"></span><br>
1618 </td>
1619 <td>powderblue = #b0e0e6</td>
1620 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;"></span><br>
1621 </td>
1622 <td>purple = #800080</td>
1623 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;"></span><br>
1624 </td>
1625 <td>red = #ff0000</td>
1626 </tr>
1627 <tr>
1628 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;"></span><br>
1629 </td>
1630 <td>rosybrown = #bc8f8f</td>
1631 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;"></span><br>
1632 </td>
1633 <td>royalblue = #4169e1</td>
1634 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;"></span><br>
1635 </td>
1636 <td>saddlebrown = #8b4513</td>
1637 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;"></span><br>
1638 </td>
1639 <td>salmon = #fa8072</td>
1640 </tr>
1641 <tr>
1642 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;"></span><br>
1643 </td>
1644 <td>sandybrown = #f4a460</td>
1645 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;"></span><br>
1646 </td>
1647 <td>seagreen = #2e8b57</td>
1648 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;"></span><br>
1649 </td>
1650 <td>seashell = #fff5ee</td>
1651 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;"></span><br>
1652 </td>
1653 <td>sienna = #a0522d</td>
1654 </tr>
1655 <tr>
1656 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;"></span><br>
1657 </td>
1658 <td>silver = #c0c0c0</td>
1659 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;"></span><br>
1660 </td>
1661 <td>skyblue = #87ceeb</td>
1662 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;"></span><br>
1663 </td>
1664 <td>slateblue = #6a5acd</td>
1665 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;"></span><br>
1666 </td>
1667 <td>slategray = #708090</td>
1668 </tr>
1669 <tr>
1670 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;"></span><br>
1671 </td>
1672 <td>slategrey = #708090</td>
1673 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;"></span><br>
1674 </td>
1675 <td>snow = #fffafa</td>
1676 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;"></span><br>
1677 </td>
1678 <td>springgreen = #00ff7f</td>
1679 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;"></span><br>
1680 </td>
1681 <td>steelblue = #4682b4</td>
1682 </tr>
1683 <tr>
1684 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;"></span><br>
1685 </td>
1686 <td>tan = #d2b48c</td>
1687 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;"></span><br>
1688 </td>
1689 <td>teal = #008080</td>
1690 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;"></span><br>
1691 </td>
1692 <td>thistle = #d8bfd8</td>
1693 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;"></span><br>
1694 </td>
1695 <td>tomato = #ff6347</td>
1696 </tr>
1697 <tr>
1698 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;"></span><br>
1699 </td>
1700 <td>turquoise = #40e0d0</td>
1701 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;"></span><br>
1702 </td>
1703 <td>violet = #ee82ee</td>
1704 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;"></span><br>
1705 </td>
1706 <td>wheat = #f5deb3</td>
1707 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;"></span><br>
1708 </td>
1709 <td>white = #ffffff</td>
1710 </tr>
1711 <tr>
1712 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;"></span><br>
1713 </td>
1714 <td>whitesmoke = #f5f5f5</td>
1715 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;"></span><br>
1716 </td>
1717 <td>yellow = #ffff00</td>
1718 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;"></span><br>
1719 </td>
1720 <td>yellowgreen = #9acd32</td>
1721 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;"></span><br>
1722 </td>
1723 <td>transparent = rgba(0,0,0,0)</td>
1724 </tr>
1725 </tbody>
1726 </table>
1727 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4>
1728 <p>With looked-up colors you can refer to any other color property that is
1729 set on the current node or any of its parents. This is a very powerful
1730 feature, as it allows a generic palette of colors to be specified on the
1731 scene then used thoughout the application. If you want to change one of
1732 those palette colors you can do so at any level in the scene tree and it
1733 will affect that node and all its decendents. Looked-up colors are not
1734 looked up until they are applied, so they are live and react to any style
1735 changes that might occur, such as replacing a palette color at runtime
1736 with the "style" property on a node.</p>
1737 <p>In the following example, all background color of all buttons uses the
1738 looked up color "abc".</p>
1739 <p class="example">.root { abc: #f00 }<br>
1740 .button { -fx-background-color: abc }</p>
1741 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4>
1742 <p>The RGB color model is used in numerical color specifications. It has a
1743 number of different supported forms.</p>
1744 <p class="grammar">#<digit><digit><digit><br>
1745 |
1746 #<digit><digit><digit><digit><digit><digit><br>
1747 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1748 class="typelink"><integer></a>
1749 , <a href="#typenumber" class="typelink"><integer></a> )<br>
1750 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a
1751 href="#typenumber"
1752 class="typelink"><integer></a>%
1753 , <a href="#typenumber" class="typelink"><integer></a>% )<br>
1754 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a
1755 href="#typenumber"
1756 class="typelink"><integer></a>
1757 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1758 class="typelink"><number></a>
1759 ) <br>
1760 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a
1761 href="#typenumber"
1789 space characters are allowed around the numerical values.</p>
1790 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model
1791 to include an ‘alpha’ value that specifies the opacity of a
1792 color. This is accomplished via a functional syntax of the form rgba(...)
1793 form that takes a fourth parameter which is the alpha value. The alpha
1794 value must be a number in the range 0.0 (representing completely
1795 transparent) and 1.0 (completely opaque). As with the rgb() function, the
1796 red, green, and blue values may be decimal integers or percentages. The
1797 following examples all specify the same color:</p>
1798 <p class="example"></p>
1799 <ul style="list-style: none;">
1800 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li>
1801 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
1802 opacity of 1 */</li>
1803 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% —
1804 100.0% */</li>
1805 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
1806 explicit opacity of 1 */</li>
1807 </ul>
1808 <p></p>
1809 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4>
1810 <p>Colors can be specified using the HSB (sometimes called HSV) color model,
1811 as follows:</p>
1812 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a>
1813 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1814 class="typelink"><number></a>%
1815 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a
1816 href="#typenumber"
1817 class="typelink"><number></a>%
1818 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1819 class="typelink"><number></a>
1820 )</p>
1821 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360
1822 degrees. The second number is <em>saturation,</em> a percentage in the
1823 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a
1824 percentage in the range 0% to 100%. The hsba(...) form takes a fourth
1825 parameter at the end which is a alpha value in the range 0.0 to 1.0,
1826 specifying completely transparent and completely opaque, respectively.</p>
1827 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4>
1828 <p>JavaFX supports some color computation functions. These compute new
1829 colors from input colors at the time the color style is applied. This
1830 enables a color theme to be specified using a single base color and to
1831 have variant colors computed from that base color. There are two color
1832 functions: derive() and ladder().</p>
1833 <p class="grammar"><derive> | <ladder></p>
1834 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p>
1835 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a>
1836 , <a href="#typenumber" class="typelink"><number></a>% )</p>
1837 <p>The derive function takes a color and computes a brighter or darker
1838 version of that color. The second parameter is the brightness offset,
1839 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors
1840 and negative percentages indicate darker colors. A value of -100% means
1841 completely black, 0% means no change in brightness, and 100% means
1842 completely white.</p>
1843 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p>
1844 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a>
1845 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a
1846 href="#typecolorstop"
1847 class="typelink"><color-stop></a>]+)</p>
1848 <p>The ladder function interpolates between colors. The effect is as if a
1849 gradient is created using the stops provided, and then the brightness of
1850 the provided <a href="#typecolor" class="typelink"><color></a> is
1851 used to index a color value within that gradient. At 0% brightness, the
1852 color at the 0.0 end of the gradient is used; at 100% brightness, the
1853 color at the 1.0 end of the gradient is used; and at 50% brightness, the
1854 color at 0.5, the midway point of the gradient, is used. Note that no
1855 gradient is actually rendered. This is merely an interpolation function
1856 that results in a single color.</p>
1857 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1858 class="typelink">W3C
1859 color-stop syntax</a> and are normalized accordingly.</p>
1860 <p>For example, you could use the following if you want the text color to be
1861 black or white depending upon the brightness of the background.</p>
1862 <p class="example">background: white;<br>
1863 -fx-text-fill: ladder(background, white 49%, black 50%);</p>
2397 <h4><a name="region" id="region">Region</a></h4>
2398 <p class="styleclass">Style class: empty by default</p>
2399 <p>A Region is a Node (extending from Parent) with backgrounds and borders
2400 that are styleable via CSS. A Region is typically a rounded rectangle,
2401 though this can be modified through CSS to be an arbitrary shape. Regions
2402 can contain other Region objects (sub-regions) or they can contain
2403 sub-controls. All Regions have the same set of CSS properties as described
2404 below. </p>
2405 <p>Each Region consists of several layers, painted from bottom to top, in
2406 this order:</p>
2407 <ol>
2408 <li>background fills</li>
2409 <li>background images</li>
2410 <li>border strokes</li>
2411 <li>border images</li>
2412 <li>contents</li>
2413 </ol>
2414 <p>The background and border mechanisms are patterned after the CSS 3 draft
2415 backgrounds and borders module. See <a href="#references">[4]</a> for a
2416 detailed description.</p>
2417 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>,
2418 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>.
2419 The -fx-background-color property is a series of one or more
2420 comma-separated <paint> values. The number of values in the series
2421 determines the number of background rectangles that are painted.
2422 Background rectangles are painted in the order specified using the given
2423 <paint> value. Each background rectangle can have different radii
2424 and insets. The -fx-background-radius and -fx-background-insets properties
2425 are series of comma-separated values (or sets of values). The radius and
2426 insets values used for a particular background are the found in the
2427 corresponding position in the -fx-background-radius and
2428 -fx-background-insets series. For example, suppose a series of three
2429 values is given for the -fx-background-color property. A series of three
2430 values should also be specified for the -fx-background-radius and
2431 -fx-background-insets properties. The first background will be painted
2432 using the first radius value and first insets value, the second background
2433 will be painted with the second radius value and second insets value, and
2434 so forth.</p>
2435 <p>Note also that properties such as -fx-background-radius and
2436 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of
2437 four values. A set of values is separated by whitespace, whereas the
2438 values or sets-of-values in a series are separated by commas. For
2439 -fx-background-radius, a single value indicates that the value should be
2440 used for the radius of all four corners of the background rectangle. A set
2441 of four values indicates that different radius values are to be used for
2442 the top-left, top-right, bottom-right, and bottom-left corners, in that
2443 order. Similarly, the -fx-background-insets property can also contain a
2444 series of values or sets of values. A set of four values for
2445 -fx-background-insets indicates that different insets are to be used for
2446 the top, right, bottom, and left edges of the rectangle, in that order.</p>
2447 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>,
2448 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span>
2449 and <span class="propertyname">-fx-background-size</span>. The number of
2450 images in the series of -fx-background-image values determines the number
2451 of background images that are painted. The -fx-background-repeat,
2452 -fx-background-position, and -fx-background-size properties each can
2453 contain a series of values. For each item in the -fx-background-image
2454 series, the corresponding items in the -fx-background-repeat,
2455 -fx-background-position, and -fx-background-size properties are applied to
2456 that background image.</p>
2457 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>,
2458 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>,
2459 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>.
2460 Each property contains a series of items. The maximum number of items in the -fx-
2461 border-color or -fx-border-style property determines the number of border layers that are painted..
2462 Each border in the series is painted using information from the
2463 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width,
2464 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black.
2465 if there is no -fx-border-style, the default style is solid. </p>
2466 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>,
2467 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>,
2468 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>.
2469 Each property contains a series of items. The number of items in the
2470 -fx-border-image-source property determines the number of images that are
2471 painted. Each image in the series is painted using information from the
2472 corresponding series items of the -fx-border-image-repeat,
2473 -fx-border-image-slice, -fx-border-image-width, and
2474 -fx-border-image-insets properties.</p>
2475 <p>The region's contents are a sequence of nodes, like any other container.
2476 The contents are set programmatically and cannot be set via CSS.</p>
2477 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2478 <thead>
2479 <tr>
2480 <th class="propertyname">CSS Property</th>
2481 <th class="value">Values</th>
2482 <th class="default">Default</th>
2483 <th>Comments</th>
2484 </tr>
2485 </thead>
2486 <tbody>
2487 <tr>
2488 <td colspan="4" class="propertyname"><em>BACKGROUND FILLS</em> (see <a
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <!-- FIXME: KCR SDK -->
3 <html lang="en-US">
4 <head>
5 <meta name="description" content="This document describes the JavaFX
6 Cascading Style Sheets (CSS) for JavaFX 9 and explains the
7 styles, values, properties and associated grammar.">
8 <meta name="keywords" content="JavaFX, JavaFX CSS, JavaFX CSS reference,
9 JavaFX CSS guide, JavaFX styling, CSS styles, CSS, cascading style sheets,
10 JavaFX GUI development, JavaFX application development">
11 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
12 <title>JavaFX CSS Reference Guide</title>
13 <style type="text/css">
14 body {
15 font-family: Helvetica, Arial, sans-serif;
16 font-size: 14px;
17 }
18 h1 {
19 font-size: 28px;
20 color:#385E76
21 }
22 h2 {
683 <p class="example">.my-rect {<br>
684 -fx-fill: yellow;<br>
685 -fx-stroke: green;<br>
686 -fx-stroke-width: 5;<br>
687 -fx-stroke-dash-array: 12 2 4 2;<br>
688 -fx-stroke-dash-offset: 6;<br>
689 -fx-stroke-line-cap: butt;<br>
690 }<br>
691 </p>
692 <p>the result will be a yellow rectangle with a nicely dashed green border:
693 </p>
694 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p>
695 <h3><a name="introparserwarnings" id="introparserwarnings">Understanding
696 Parser Warnings</a></h3>
697 <p>When the JavaFX CSS parser encounters a syntax error, a warning message
698 is emitted which conveys as much information as is available to help
699 resolve the error. For example </p>
700 <p class="example"> WARNING: javafx.css.CssParser declaration
701 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]
702 </p>
703 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the
704 location of the error. The format of the location string is </p>
705 <p class="grammar"><url>[line, position]</p>
706 <p>If the error is found while parsing a file, the file URL will be given.
707 If the error is from an inline style (as in the example above), the URL is
708 given as a question mark. The line and position give an offset into the
709 file or string where the token begins. <em>Please note that the line and
710 position may not be accurate in releases prior to JavaFX 2.2.</em><br>
711 </p>
712 <p>Applications needing to detect errors from the parser can add a listener
713 to the errors property of javafx.css.CssParser. <br>
714 </p>
715 <h3><a name="introlimitations" id="introlimitations">Limitations</a></h3>
716 <ol>
717 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a
718 fully compliant CSS parser. One should not expect the parser to handle
719 syntax not specified in this document.</li>
720 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li>
721 <li>The <media-query-list> of the @import statement is not parsed.</li>
722 <li>The structural pseudo‑classes are not supported. </li>
723 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported.
805 </ul>
806 <h4><a name="typepercentage" id="typepercentage"><percentage></a></h4>
807 <p>These are a percentage of some length, typically to the width or height
808 of a node.</p>
809 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p>
810 <h3><a name="typeangle" id="typeangle"><angle></a></h3>
811 <p>An angle is a <a href="#typenumber" class="typeref"><number></a>
812 with one of the following units.</p>
813 <p> </p>
814 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad |
815 grad | turn ]</p>
816 <ul>
817 <li><strong>deg</strong>: angle in degrees — all other angle units are
818 converted to degrees.</li>
819 <li><strong>rad</strong>: angle in radians</li>
820 <li><strong>grad</strong>: angle in gradians</li>
821 <li><strong>turn</strong>: angle in turns</li>
822 </ul>
823 <h3><a name="typeduration" id="typeduration"><duration></a></h3>
824 <p>A duration is a <a href="#typenumber" class="typeref"><number></a>
825 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
826 <p> </p>
827 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p>
828 <ul>
829 <li><strong>s</strong>: duration in seconds</li>
830 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li>
831 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li>
832 </ul>
833 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p>
834 <h3><a name="typepoint" id="typepoint"><point></a></h3>
835 <p>A point is an {x,y} coordinate.</p>
836 <p class="grammar">[ [ <length> <length> ] | [
837 <percentage> | <percentage> ] ]</p>
838 <h3><a name="typecolorstop" id="typecolorstop"><color-stop></a></h3>
839 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
840 class="typelink">W3C
841 color-stop syntax</a>.</p>
842 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a>
843 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a
844 href="#typelength"
845 class="typeref"><length></a>]?
846 ]</p>
847 <p>In a series of <color-stop>, stop distance values must all be
848 <percentage> or <length>. Furthermore, if <length>
849 values are used, then the distance value for first and last stop in the
850 series must be specified. This restriction may be removed in a future
851 release.</p>
852 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the
853 distance for red and blue is assumed to be 0% and 100%, respectively.</p>
854 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because
855 distance for red and blue is 10 and 90, respectively, the distance for
856 white can be calculated.</p>
857 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid
858 since distance units do not agree.</p>
859 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are
860 distributed evenly between 0% and 100%.</p>
861 <h3><a name="typeurl" id="typeurl"><uri></a></h3>
862 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p>
863 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>.
864 For example:</p>
865 <p class="example">
866 url(http://example.com/images/Duke.png)<br>
867 url(/com/example/javafx/app/images/Duke.png)<br>
868 </p>
869 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span>
870 is considered to be the [path] component only.
871 A leading '/' character indicates that the [path] is relative to the
872 root of the classpath. If the the style appears in a stylesheet and
873 has no leading '/' character, the path is relative to the base URI of
874 the stylesheet. If the style appears in an inline style, the path is
875 relative to the root of the classpath (regardless of whether or not
876 there is a leading '/').
877 </p>
878 <table class="csspropertytable" cellspacing="3" cellpadding="4">
879 <caption>Examples of Resolving URLs in Stylesheets</caption>
880 <tr>
881 <th>Stylesheet URL</th><th>URL in Style</th><th>Resolves to</th>
882 </tr>
883 <tr>
884 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
885 <td>url(images/Duke.png)</td>
886 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td>
887 </tr>
888 <tr>
889 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
898 </table>
899 <p></p>
900 <table class="csspropertytable" cellspacing="3" cellpadding="4">
901 <caption>Examples of Resolving URLs in Inline Styles</caption>
902 <tr>
903 <th>Classpath</th><th>URL in Style</th><th>Resolved URL</th>
904 </tr>
905 <tr>
906 <td>file:///some/path/build/classes</td>
907 <td>url(/com/mycompany/resources/images/Duke.png)</td>
908 <td>file:///some/path/build/classes/com/mycompany/resources/images/Duke.png</td>
909 </tr>
910 <tr>
911 <td>file:///some/path/build/myapp.jar</td>
912 <td>url(/com/mycompany/resources/images/Duke.png)</td>
913 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.png</td>
914 </tr>
915 </table>
916 <p>Note that for inline styles, leading dot-segments (e.g. '..' or '.') do resolve since the path is always
917 anchored at the root of the classpath.</p>
918 <!-- FIXME: this is no longer allowed and should be removed or redone -->
919 <p>This snippet of code creates a scene filled with the "paste" image from HTMLEditor which is found in jfxrt.jar.</p>
920 <textarea rows="9" cols="132">
921
922 @Override public void start(Stage stage) {
923 StackPane root = new StackPane();
924 root.setStyle("-fx-background-image: url(/com/sun/javafx/scene/control/skin/modena/HTMLEditor-Paste.png);");
925 Scene scene = new Scene(root, 300, 250);
926 stage.setScene(scene);
927 stage.show();
928 }
929 </textarea>
930 <p>The same style would work equally as well from a stylesheet.</p>
931 <h3><a name="typeeffect" id="typeeffect"><effect></a></h3>
932 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from
933 the JavaFX platform. See the class documentation in javafx.scene.effect
934 for further details about the semantics of the various effect parameters.</p>
935 <h4>Drop Shadow</h4>
936 <p>A high-level effect that renders a shadow of the given content behind the
937 content.</p>
938 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor"
939 class="typelink"><color></a>
940 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
941 class="typelink"><number></a>
942 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
943 class="typelink"><number></a>
944 )</span></p>
945 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
946 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
947 <a href="#typecolor" class="typelink"><color></a></span> The
948 shadow Color.<br>
949 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
950 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
951 typical value 10.<br>
952 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
953 The spread of the shadow. The spread is the portion of the radius where
954 the contribution of the source material will be 100%. The remaining
955 portion of the radius will have a contribution controlled by the blur
956 kernel. A spread of 0.0 will result in a distribution of the shadow
957 determined entirely by the blur algorithm. A spread of 1.0 will result in
958 a solid growth outward of the source material opacity to the limit of the
959 radius with a very sharp cutoff to transparency at the radius. Values
960 should be in the range [0.0 ... 1.0].<br>
961 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
962 The shadow offset in the x direction, in pixels. <br>
963 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
964 The shadow offset in the y direction, in pixels. </p>
965 <h4>Inner Shadow</h4>
966 <p>A high-level effect that renders a shadow inside the edges of the given
967 content.</p>
968 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor"
969 class="typelink"><color></a>
970 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
971 class="typelink"><number></a>
972 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
973 class="typelink"><number></a>
974 )</span></p>
975 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
976 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
977 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span>
978 The shadow Color.<br>
979 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
980 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
981 typical value 10.<br>
982 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
983 The choke of the shadow. The choke is the portion of the radius where the
984 contribution of the source material will be 100%. The remaining portion of
985 the radius will have a contribution controlled by the blur kernel. A choke
986 of 0.0 will result in a distribution of the shadow determined entirely by
987 the blur algorithm. A choke of 1.0 will result in a solid growth inward of
988 the shadow from the edges to the limit of the radius with a very sharp
989 cutoff to transparency inside the radius. Values should be in the range
990 [0.0 ... 1.0].<br>
991 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
992 The shadow offset in the x direction, in pixels. <br>
993 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
994 The shadow offset in the y direction, in pixels. </p>
995 <h3><a name="typefont" id="typefont"><font></a></h3>
996 <p>JavaFX CSS supports the ability to specify fonts using separate family,
997 size, style, and weight properties, as well as the ability to specify a
998 font using a single shorthand property. There are four value types related
999 to fonts plus a shorthand property that encompasses all four properties.
1000 The font-related types are as follows. </p>
1001 <p><span class="grammar"><font-family></span>The string name of the
1002 font family. An actual font family name available on the system can be
1003 used, or one of the following generic family names can be used:</p>
1004 <ul>
1005 <li>'serif' (e.g., Times)</li>
1006 <li>'sans-serif' (e.g., Helvetica)</li>
1007 <li>'cursive' (e.g., Zapf-Chancery)</li>
1008 <li>'fantasy' (e.g., Western)</li>
1009 <li>'monospace' (e.g., Courier)</li>
1010 </ul>
1011 <p><span class="grammar"><font-size></span> The size of the font,
1012 using the <span class="grammar"><size></span> syntax.</p>
1013 <p><span class="grammar"><font-style></span> The font's style, using
1014 the following syntax:<br>
1015 <span class="grammar">[ normal | italic | oblique ]</span></p>
1016 <p><span class="grammar"><font-weight></span> The font's weight, using
1017 the following syntax:<br>
1018 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300
1019 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p>
1020 <p><span class="grammar"><font></span> This font shorthand property
1021 can be used in place of the above properties. It uses the following
1022 syntax:<br>
1023 <span class="grammar">[[ <font-style> || <font-weight> ]?
1024 <font-size> <font-family> ]</span></p>
1025 <h4><a name="fontprops" id="fontprops">Font Properties</a></h4>
1026 <p>Most classes that use text will support the following font properties. In
1027 some cases a similar set of properties will be supported but with a
1028 different prefix instead of "-fx-font".</p>
1029 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
1030 <thead>
1031 <tr>
1032 <th class="propertyname">CSS Property</th>
1033 <th class="value">Values</th>
1034 <th>Default</th>
1035 <th>Comments</th>
1036 </tr>
1037 </thead>
1038 <tbody>
1039 <tr>
1040 <td class="propertyname">-fx-font</td>
1041 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
1042 <td>inherit</td>
1043 <td>shorthand property for font-size, font-family, font-weight and
1060 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td>
1061 <td>inherit</td>
1062 <td> </td>
1063 </tr>
1064 <tr>
1065 <td class="propertyname">-fx-font-weight</td>
1066 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td>
1067 <td>inherit</td>
1068 <td> </td>
1069 </tr>
1070 </tbody>
1071 </table>
1072 <h3><a name="typepaint" id="typepaint"><paint></a></h3>
1073 <p>Paint values can either be a solid color specified in one of the color
1074 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
1075 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> |
1076 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> |
1077 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> |
1078 <a href="#typeimage-pattern" class="typelink"><image-pattern></a>
1079 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p>
1080 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1081 <a name="typelinear-gradient" id="typelinear-gradient"><linear-gradient></a>
1082 </span></h4>
1083 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a>
1084 to <a href="#typepoint" class="typelink"><point></a>] | [ to
1085 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1086 class="typelink"><color-stop></a>[,
1087 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br>
1088 <br>
1089 where <side-or-corner> = [left | right] || [top | bottom] </p>
1090 <p> </p>
1091 <p>Linear gradient creates a gradient going though all the stop colors along
1092 the line between the "from" <a href="#typepoint" class="typelink"><point></a>
1093 and the "to" <a href="#typepoint" class="typelink"><point></a>. If
1094 the points are percentages, then they are relative to the size of the area
1095 being filled. Percentage and length sizes can not be mixed in a single
1096 gradient function.</p>
1097 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1098 "NO_CYCLE".<br>
1099 If neither [from <point> to <point>] nor [ to
1100 <side-or-corner> ] are given, then the gradient direction defaults
1102 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1103 class="typelink">W3C
1104 color-stop syntax</a> and are normalized accordingly. </p>
1105 <p>This example will create a gradient from top left to bottom right of the
1106 filled area with red at the top left corner and black at the bottom right.</p>
1107 <p class="example">linear-gradient(to bottom right, red, black)</p>
1108 <p>This is equivalent to: </p>
1109 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black
1110 100%)</p>
1111 <p>This more complex example will create a 50px high bar at the top with a 3
1112 color gradient with white underneath for the rest of the filled area.</p>
1113 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray
1114 50%, dimgray 99%, white)</p>
1115 <p><span style="color: #af0000; ">The following syntax for linear gradient does not
1116 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1117 2.0 CSS parser supports the syntax but this support may be removed in
1118 later releases.</span></p>
1119 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>)
1120 to (<size>, <size>) stops [ (<number>,<color>)
1121 ]+ [ repeat | reflect ]?</span></p>
1122 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1123 <a name="typeradial-gradient" id="typeradial-gradient"><radial-gradient></a>
1124 </span></h4>
1125 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>,
1126 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>,
1127 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]?
1128 radius [ <a href="#typelength" class="typelink"><length></a> | <a
1129 href="#typepercentage"
1130 class="typelink"><percentage></a>
1131 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[,
1132 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p>
1133 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from
1134 the <a href="#typepoint" class="typelink">center point</a>
1135 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given,
1136 the center defaults to (0,0). Percentage values are relative to the size of the area
1137 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p>
1138 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1139 "NO_CYCLE".<br>
1140 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1141 class="typelink">W3C
1142 color-stop syntax</a> and are normalized accordingly. </p>
1143 <p>Following are examples of the use of radial-gradient:</p>
1144 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p>
1145 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%,
1146 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p>
1147 <p><span style="color: #af0000; ">The following syntax for radial gradient does not
1148 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1149 2.0 CSS parser supports the syntax but this support may be removed in
1150 later releases.</span></p>
1151 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number>
1152 | <number> ] ]? [ focus-distance <size> ]? [ center
1153 <size,size> ]? <size> stops [ ( <number>,
1154 <color> ) ]+ [ repeat | reflect ]?</span></p>
1155 <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1156 <a name="typeimage-pattern" id="typeimage-pattern"><image-pattern></a>
1157 </span></h4>
1158 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>,
1159 [<a href="#typesize" class="typelink"><size></a>,
1160 <a href="#typesize" class="typelink"><size></a>,
1161 <a href="#typesize" class="typelink"><size></a>,
1162 <a href="#typesize" class="typelink"><size></a>[,
1163 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p>
1164 <p>The parameters, in order, are:<br>
1165 <p style="margin-left: 40px;">
1166 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span>
1167 The URL of the image.<br>
1168 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1169 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br>
1170 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1171 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br>
1172 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1173 The width of the anchor rectangle.<br>
1174 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1175 The height of the anchor rectangle.<br>
1176 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span>
1177 The proportional flag which indicates whether start and end locations are proportional or absolute<br>
1178 </p>
1179 <p>For a full explanation of the parameters, refer to the
1180 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>
1181 <p>Following are examples of the use of image-pattern:</p>
1182 <p class="example">image-pattern("images/Duke.png")</p>
1183 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p>
1184 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p>
1185 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>
1186
1187 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand
1188 for producing tiled image based fills. It is equivalent to
1189 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p>
1190
1191 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p>
1192 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p>
1193 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p>
1194
1195
1196
1197 <h3><a name="typecolor" id="typecolor"><color></a></h3>
1198 <p class="grammar"><named-color> | <looked-up-color> |
1199 <rgb-color> | <hsb-color> | <color-function></p>
1200 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4>
1201 <p>CSS supports a bunch of named constant colors. Named colors can be
1202 specified with just their unquoted name for example: </p>
1203 <p class="example">.button {<br>
1204 -fx-background-color: red;<br>
1205 }</p>
1206 <p>The named colors that are available in CSS are:</p>
1207 <table summary="property table" class="html4colortable">
1208 <tbody>
1209 <tr>
1210 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;"></span><br>
1211 </td>
1212 <td>aliceblue = #f0f8ff</td>
1213 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;"></span><br>
1214 </td>
1215 <td>antiquewhite = #faebd7</td>
1216 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;"></span><br>
1217 </td>
1218 <td>aqua = #00ffff</td>
1219 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;"></span><br>
1220 </td>
1221 <td>aquamarine = #7fffd4</td>
1222 </tr>
1223 <tr>
1224 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;"></span><br>
1225 </td>
1226 <td>azure = #f0ffff</td>
1227 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;"></span><br>
1228 </td>
1229 <td>beige = #f5f5dc</td>
1230 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;"></span><br>
1231 </td>
1232 <td>bisque = #ffe4c4</td>
1233 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;"></span><br>
1234 </td>
1235 <td>black = #000000</td>
1236 </tr>
1237 <tr>
1238 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;"></span><br>
1239 </td>
1240 <td>blanchedalmond = #ffebcd</td>
1241 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;"></span><br>
1242 </td>
1243 <td>blue = #0000ff</td>
1244 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;"></span><br>
1245 </td>
1246 <td>blueviolet = #8a2be2</td>
1247 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;"></span><br>
1248 </td>
1249 <td>brown = #a52a2a</td>
1250 </tr>
1251 <tr>
1252 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;"></span><br>
1253 </td>
1254 <td>burlywood = #deb887</td>
1255 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;"></span><br>
1256 </td>
1257 <td>cadetblue = #5f9ea0</td>
1258 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;"></span><br>
1259 </td>
1260 <td>chartreuse = #7fff00</td>
1261 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;"></span><br>
1262 </td>
1263 <td>chocolate = #d2691e</td>
1264 </tr>
1265 <tr>
1266 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;"></span><br>
1267 </td>
1268 <td>coral = #ff7f50</td>
1269 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;"></span><br>
1270 </td>
1271 <td>cornflowerblue = #6495ed</td>
1272 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;"></span><br>
1273 </td>
1274 <td>cornsilk = #fff8dc</td>
1275 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;"></span><br>
1276 </td>
1277 <td>crimson = #dc143c</td>
1278 </tr>
1279 <tr>
1280 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;"></span><br>
1281 </td>
1282 <td>cyan = #00ffff</td>
1283 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;"></span><br>
1284 </td>
1285 <td>darkblue = #00008b</td>
1286 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;"></span><br>
1287 </td>
1288 <td>darkcyan = #008b8b</td>
1289 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;"></span><br>
1290 </td>
1291 <td>darkgoldenrod = #b8860b</td>
1292 </tr>
1293 <tr>
1294 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;"></span><br>
1295 </td>
1296 <td>darkgray = #a9a9a9</td>
1297 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;"></span><br>
1298 </td>
1299 <td>darkgreen = #006400</td>
1300 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;"></span><br>
1301 </td>
1302 <td>darkgrey = #a9a9a9</td>
1303 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;"></span><br>
1304 </td>
1305 <td>darkkhaki = #bdb76b</td>
1306 </tr>
1307 <tr>
1308 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;"></span><br>
1309 </td>
1310 <td>darkmagenta = #8b008b</td>
1311 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;"></span><br>
1312 </td>
1313 <td>darkolivegreen = #556b2f</td>
1314 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;"></span><br>
1315 </td>
1316 <td>darkorange = #ff8c00</td>
1317 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;"></span><br>
1318 </td>
1319 <td>darkorchid = #9932cc</td>
1320 </tr>
1321 <tr>
1322 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;"></span><br>
1323 </td>
1324 <td>darkred = #8b0000</td>
1325 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;"></span><br>
1326 </td>
1327 <td>darksalmon = #e9967a</td>
1328 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;"></span><br>
1329 </td>
1330 <td>darkseagreen = #8fbc8f</td>
1331 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;"></span><br>
1332 </td>
1333 <td>darkslateblue = #483d8b</td>
1334 </tr>
1335 <tr>
1336 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;"></span><br>
1337 </td>
1338 <td>darkslategray = #2f4f4f</td>
1339 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;"></span><br>
1340 </td>
1341 <td>darkslategrey = #2f4f4f</td>
1342 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;"></span><br>
1343 </td>
1344 <td>darkturquoise = #00ced1</td>
1345 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;"></span><br>
1346 </td>
1347 <td>darkviolet = #9400d3</td>
1348 </tr>
1349 <tr>
1350 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;"></span><br>
1351 </td>
1352 <td>deeppink = #ff1493</td>
1353 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;"></span><br>
1354 </td>
1355 <td>deepskyblue = #00bfff</td>
1356 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;"></span><br>
1357 </td>
1358 <td>dimgray = #696969</td>
1359 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;"></span><br>
1360 </td>
1361 <td>dimgrey = #696969</td>
1362 </tr>
1363 <tr>
1364 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;"></span><br>
1365 </td>
1366 <td>dodgerblue = #1e90ff</td>
1367 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;"></span><br>
1368 </td>
1369 <td>firebrick = #b22222</td>
1370 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;"></span><br>
1371 </td>
1372 <td>floralwhite = #fffaf0</td>
1373 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;"></span><br>
1374 </td>
1375 <td>forestgreen = #228b22</td>
1376 </tr>
1377 <tr>
1378 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;"></span><br>
1379 </td>
1380 <td>fuchsia = #ff00ff</td>
1381 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;"></span><br>
1382 </td>
1383 <td>gainsboro = #dcdcdc</td>
1384 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;"></span><br>
1385 </td>
1386 <td>ghostwhite = #f8f8ff</td>
1387 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;"></span><br>
1388 </td>
1389 <td>gold = #ffd700</td>
1390 </tr>
1391 <tr>
1392 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;"></span><br>
1393 </td>
1394 <td>goldenrod = #daa520</td>
1395 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;"></span><br>
1396 </td>
1397 <td>gray = #808080</td>
1398 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;"></span><br>
1399 </td>
1400 <td>green = #008000</td>
1401 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;"></span><br>
1402 </td>
1403 <td>greenyellow = #adff2f</td>
1404 </tr>
1405 <tr>
1406 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;"></span><br>
1407 </td>
1408 <td>grey = #808080</td>
1409 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;"></span><br>
1410 </td>
1411 <td>honeydew = #f0fff0</td>
1412 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;"></span><br>
1413 </td>
1414 <td>hotpink = #ff69b4</td>
1415 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;"></span><br>
1416 </td>
1417 <td>indianred = #cd5c5c</td>
1418 </tr>
1419 <tr>
1420 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;"></span><br>
1421 </td>
1422 <td>indigo = #4b0082</td>
1423 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;"></span><br>
1424 </td>
1425 <td>ivory = #fffff0</td>
1426 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;"></span><br>
1427 </td>
1428 <td>khaki = #f0e68c</td>
1429 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;"></span><br>
1430 </td>
1431 <td>lavender = #e6e6fa</td>
1432 </tr>
1433 <tr>
1434 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;"></span><br>
1435 </td>
1436 <td>lavenderblush = #fff0f5</td>
1437 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;"></span><br>
1438 </td>
1439 <td>lawngreen = #7cfc00</td>
1440 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;"></span><br>
1441 </td>
1442 <td>lemonchiffon = #fffacd</td>
1443 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;"></span><br>
1444 </td>
1445 <td>lightblue = #add8e6</td>
1446 </tr>
1447 <tr>
1448 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;"></span><br>
1449 </td>
1450 <td>lightcoral = #f08080</td>
1451 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;"></span><br>
1452 </td>
1453 <td>lightcyan = #e0ffff</td>
1454 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;"></span><br>
1455 </td>
1456 <td>lightgoldenrodyellow = #fafad2</td>
1457 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;"></span><br>
1458 </td>
1459 <td>lightgray = #d3d3d3</td>
1460 </tr>
1461 <tr>
1462 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;"></span><br>
1463 </td>
1464 <td>lightgreen = #90ee90</td>
1465 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;"></span><br>
1466 </td>
1467 <td>lightgrey = #d3d3d3</td>
1468 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;"></span><br>
1469 </td>
1470 <td>lightpink = #ffb6c1</td>
1471 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;"></span><br>
1472 </td>
1473 <td>lightsalmon = #ffa07a</td>
1474 </tr>
1475 <tr>
1476 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;"></span><br>
1477 </td>
1478 <td>lightseagreen = #20b2aa</td>
1479 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;"></span><br>
1480 </td>
1481 <td>lightskyblue = #87cefa</td>
1482 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;"></span><br>
1483 </td>
1484 <td>lightslategray = #778899</td>
1485 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;"></span><br>
1486 </td>
1487 <td>lightslategrey = #778899</td>
1488 </tr>
1489 <tr>
1490 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;"></span><br>
1491 </td>
1492 <td>lightsteelblue = #b0c4de</td>
1493 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;"></span><br>
1494 </td>
1495 <td>lightyellow = #ffffe0</td>
1496 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;"></span><br>
1497 </td>
1498 <td>lime = #00ff00</td>
1499 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;"></span><br>
1500 </td>
1501 <td>limegreen = #32cd32</td>
1502 </tr>
1503 <tr>
1504 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;"></span><br>
1505 </td>
1506 <td>linen = #faf0e6</td>
1507 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;"></span><br>
1508 </td>
1509 <td>magenta = #ff00ff</td>
1510 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;"></span><br>
1511 </td>
1512 <td>maroon = #800000</td>
1513 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;"></span><br>
1514 </td>
1515 <td>mediumaquamarine = #66cdaa</td>
1516 </tr>
1517 <tr>
1518 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;"></span><br>
1519 </td>
1520 <td>mediumblue = #0000cd</td>
1521 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;"></span><br>
1522 </td>
1523 <td>mediumorchid = #ba55d3</td>
1524 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;"></span><br>
1525 </td>
1526 <td>mediumpurple = #9370db</td>
1527 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;"></span><br>
1528 </td>
1529 <td>mediumseagreen = #3cb371</td>
1530 </tr>
1531 <tr>
1532 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;"></span><br>
1533 </td>
1534 <td>mediumslateblue = #7b68ee</td>
1535 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;"></span><br>
1536 </td>
1537 <td>mediumspringgreen = #00fa9a</td>
1538 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;"></span><br>
1539 </td>
1540 <td>mediumturquoise = #48d1cc</td>
1541 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;"></span><br>
1542 </td>
1543 <td>mediumvioletred = #c71585</td>
1544 </tr>
1545 <tr>
1546 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;"></span><br>
1547 </td>
1548 <td>midnightblue = #191970</td>
1549 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;"></span><br>
1550 </td>
1551 <td>mintcream = #f5fffa</td>
1552 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;"></span><br>
1553 </td>
1554 <td>mistyrose = #ffe4e1</td>
1555 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;"></span><br>
1556 </td>
1557 <td>moccasin = #ffe4b5</td>
1558 </tr>
1559 <tr>
1560 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;"></span><br>
1561 </td>
1562 <td>navajowhite = #ffdead</td>
1563 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;"></span><br>
1564 </td>
1565 <td>navy = #000080</td>
1566 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;"></span><br>
1567 </td>
1568 <td>oldlace = #fdf5e6</td>
1569 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;"></span><br>
1570 </td>
1571 <td>olive = #808000</td>
1572 </tr>
1573 <tr>
1574 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;"></span><br>
1575 </td>
1576 <td>olivedrab = #6b8e23</td>
1577 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;"></span><br>
1578 </td>
1579 <td>orange = #ffa500</td>
1580 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;"></span><br>
1581 </td>
1582 <td>orangered = #ff4500</td>
1583 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;"></span><br>
1584 </td>
1585 <td>orchid = #da70d6</td>
1586 </tr>
1587 <tr>
1588 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;"></span><br>
1589 </td>
1590 <td>palegoldenrod = #eee8aa</td>
1591 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;"></span><br>
1592 </td>
1593 <td>palegreen = #98fb98</td>
1594 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;"></span><br>
1595 </td>
1596 <td>paleturquoise = #afeeee</td>
1597 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;"></span><br>
1598 </td>
1599 <td>palevioletred = #db7093</td>
1600 </tr>
1601 <tr>
1602 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;"></span><br>
1603 </td>
1604 <td>papayawhip = #ffefd5</td>
1605 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;"></span><br>
1606 </td>
1607 <td>peachpuff = #ffdab9</td>
1608 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;"></span><br>
1609 </td>
1610 <td>peru = #cd853f</td>
1611 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;"></span><br>
1612 </td>
1613 <td>pink = #ffc0cb</td>
1614 </tr>
1615 <tr>
1616 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;"></span><br>
1617 </td>
1618 <td>plum = #dda0dd</td>
1619 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;"></span><br>
1620 </td>
1621 <td>powderblue = #b0e0e6</td>
1622 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;"></span><br>
1623 </td>
1624 <td>purple = #800080</td>
1625 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;"></span><br>
1626 </td>
1627 <td>red = #ff0000</td>
1628 </tr>
1629 <tr>
1630 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;"></span><br>
1631 </td>
1632 <td>rosybrown = #bc8f8f</td>
1633 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;"></span><br>
1634 </td>
1635 <td>royalblue = #4169e1</td>
1636 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;"></span><br>
1637 </td>
1638 <td>saddlebrown = #8b4513</td>
1639 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;"></span><br>
1640 </td>
1641 <td>salmon = #fa8072</td>
1642 </tr>
1643 <tr>
1644 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;"></span><br>
1645 </td>
1646 <td>sandybrown = #f4a460</td>
1647 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;"></span><br>
1648 </td>
1649 <td>seagreen = #2e8b57</td>
1650 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;"></span><br>
1651 </td>
1652 <td>seashell = #fff5ee</td>
1653 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;"></span><br>
1654 </td>
1655 <td>sienna = #a0522d</td>
1656 </tr>
1657 <tr>
1658 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;"></span><br>
1659 </td>
1660 <td>silver = #c0c0c0</td>
1661 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;"></span><br>
1662 </td>
1663 <td>skyblue = #87ceeb</td>
1664 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;"></span><br>
1665 </td>
1666 <td>slateblue = #6a5acd</td>
1667 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;"></span><br>
1668 </td>
1669 <td>slategray = #708090</td>
1670 </tr>
1671 <tr>
1672 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;"></span><br>
1673 </td>
1674 <td>slategrey = #708090</td>
1675 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;"></span><br>
1676 </td>
1677 <td>snow = #fffafa</td>
1678 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;"></span><br>
1679 </td>
1680 <td>springgreen = #00ff7f</td>
1681 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;"></span><br>
1682 </td>
1683 <td>steelblue = #4682b4</td>
1684 </tr>
1685 <tr>
1686 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;"></span><br>
1687 </td>
1688 <td>tan = #d2b48c</td>
1689 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;"></span><br>
1690 </td>
1691 <td>teal = #008080</td>
1692 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;"></span><br>
1693 </td>
1694 <td>thistle = #d8bfd8</td>
1695 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;"></span><br>
1696 </td>
1697 <td>tomato = #ff6347</td>
1698 </tr>
1699 <tr>
1700 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;"></span><br>
1701 </td>
1702 <td>turquoise = #40e0d0</td>
1703 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;"></span><br>
1704 </td>
1705 <td>violet = #ee82ee</td>
1706 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;"></span><br>
1707 </td>
1708 <td>wheat = #f5deb3</td>
1709 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;"></span><br>
1710 </td>
1711 <td>white = #ffffff</td>
1712 </tr>
1713 <tr>
1714 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;"></span><br>
1715 </td>
1716 <td>whitesmoke = #f5f5f5</td>
1717 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;"></span><br>
1718 </td>
1719 <td>yellow = #ffff00</td>
1720 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;"></span><br>
1721 </td>
1722 <td>yellowgreen = #9acd32</td>
1723 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;"></span><br>
1724 </td>
1725 <td>transparent = rgba(0,0,0,0)</td>
1726 </tr>
1727 </tbody>
1728 </table>
1729 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4>
1730 <p>With looked-up colors you can refer to any other color property that is
1731 set on the current node or any of its parents. This is a very powerful
1732 feature, as it allows a generic palette of colors to be specified on the
1733 scene then used thoughout the application. If you want to change one of
1734 those palette colors you can do so at any level in the scene tree and it
1735 will affect that node and all its decendents. Looked-up colors are not
1736 looked up until they are applied, so they are live and react to any style
1737 changes that might occur, such as replacing a palette color at runtime
1738 with the "style" property on a node.</p>
1739 <p>In the following example, all background color of all buttons uses the
1740 looked up color "abc".</p>
1741 <p class="example">.root { abc: #f00 }<br>
1742 .button { -fx-background-color: abc }</p>
1743 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4>
1744 <p>The RGB color model is used in numerical color specifications. It has a
1745 number of different supported forms.</p>
1746 <p class="grammar">#<digit><digit><digit><br>
1747 |
1748 #<digit><digit><digit><digit><digit><digit><br>
1749 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1750 class="typelink"><integer></a>
1751 , <a href="#typenumber" class="typelink"><integer></a> )<br>
1752 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a
1753 href="#typenumber"
1754 class="typelink"><integer></a>%
1755 , <a href="#typenumber" class="typelink"><integer></a>% )<br>
1756 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a
1757 href="#typenumber"
1758 class="typelink"><integer></a>
1759 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1760 class="typelink"><number></a>
1761 ) <br>
1762 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a
1763 href="#typenumber"
1791 space characters are allowed around the numerical values.</p>
1792 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model
1793 to include an ‘alpha’ value that specifies the opacity of a
1794 color. This is accomplished via a functional syntax of the form rgba(...)
1795 form that takes a fourth parameter which is the alpha value. The alpha
1796 value must be a number in the range 0.0 (representing completely
1797 transparent) and 1.0 (completely opaque). As with the rgb() function, the
1798 red, green, and blue values may be decimal integers or percentages. The
1799 following examples all specify the same color:</p>
1800 <p class="example"></p>
1801 <ul style="list-style: none;">
1802 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li>
1803 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
1804 opacity of 1 */</li>
1805 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% —
1806 100.0% */</li>
1807 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
1808 explicit opacity of 1 */</li>
1809 </ul>
1810 <p></p>
1811 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4>
1812 <p>Colors can be specified using the HSB (sometimes called HSV) color model,
1813 as follows:</p>
1814 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a>
1815 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1816 class="typelink"><number></a>%
1817 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a
1818 href="#typenumber"
1819 class="typelink"><number></a>%
1820 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1821 class="typelink"><number></a>
1822 )</p>
1823 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360
1824 degrees. The second number is <em>saturation,</em> a percentage in the
1825 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a
1826 percentage in the range 0% to 100%. The hsba(...) form takes a fourth
1827 parameter at the end which is a alpha value in the range 0.0 to 1.0,
1828 specifying completely transparent and completely opaque, respectively.</p>
1829 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4>
1830 <p>JavaFX supports some color computation functions. These compute new
1831 colors from input colors at the time the color style is applied. This
1832 enables a color theme to be specified using a single base color and to
1833 have variant colors computed from that base color. There are two color
1834 functions: derive() and ladder().</p>
1835 <p class="grammar"><derive> | <ladder></p>
1836 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p>
1837 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a>
1838 , <a href="#typenumber" class="typelink"><number></a>% )</p>
1839 <p>The derive function takes a color and computes a brighter or darker
1840 version of that color. The second parameter is the brightness offset,
1841 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors
1842 and negative percentages indicate darker colors. A value of -100% means
1843 completely black, 0% means no change in brightness, and 100% means
1844 completely white.</p>
1845 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p>
1846 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a>
1847 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a
1848 href="#typecolorstop"
1849 class="typelink"><color-stop></a>]+)</p>
1850 <p>The ladder function interpolates between colors. The effect is as if a
1851 gradient is created using the stops provided, and then the brightness of
1852 the provided <a href="#typecolor" class="typelink"><color></a> is
1853 used to index a color value within that gradient. At 0% brightness, the
1854 color at the 0.0 end of the gradient is used; at 100% brightness, the
1855 color at the 1.0 end of the gradient is used; and at 50% brightness, the
1856 color at 0.5, the midway point of the gradient, is used. Note that no
1857 gradient is actually rendered. This is merely an interpolation function
1858 that results in a single color.</p>
1859 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1860 class="typelink">W3C
1861 color-stop syntax</a> and are normalized accordingly.</p>
1862 <p>For example, you could use the following if you want the text color to be
1863 black or white depending upon the brightness of the background.</p>
1864 <p class="example">background: white;<br>
1865 -fx-text-fill: ladder(background, white 49%, black 50%);</p>
2399 <h4><a name="region" id="region">Region</a></h4>
2400 <p class="styleclass">Style class: empty by default</p>
2401 <p>A Region is a Node (extending from Parent) with backgrounds and borders
2402 that are styleable via CSS. A Region is typically a rounded rectangle,
2403 though this can be modified through CSS to be an arbitrary shape. Regions
2404 can contain other Region objects (sub-regions) or they can contain
2405 sub-controls. All Regions have the same set of CSS properties as described
2406 below. </p>
2407 <p>Each Region consists of several layers, painted from bottom to top, in
2408 this order:</p>
2409 <ol>
2410 <li>background fills</li>
2411 <li>background images</li>
2412 <li>border strokes</li>
2413 <li>border images</li>
2414 <li>contents</li>
2415 </ol>
2416 <p>The background and border mechanisms are patterned after the CSS 3 draft
2417 backgrounds and borders module. See <a href="#references">[4]</a> for a
2418 detailed description.</p>
2419 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>,
2420 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>.
2421 The -fx-background-color property is a series of one or more
2422 comma-separated <paint> values. The number of values in the series
2423 determines the number of background rectangles that are painted.
2424 Background rectangles are painted in the order specified using the given
2425 <paint> value. Each background rectangle can have different radii
2426 and insets. The -fx-background-radius and -fx-background-insets properties
2427 are series of comma-separated values (or sets of values). The radius and
2428 insets values used for a particular background are the found in the
2429 corresponding position in the -fx-background-radius and
2430 -fx-background-insets series. For example, suppose a series of three
2431 values is given for the -fx-background-color property. A series of three
2432 values should also be specified for the -fx-background-radius and
2433 -fx-background-insets properties. The first background will be painted
2434 using the first radius value and first insets value, the second background
2435 will be painted with the second radius value and second insets value, and
2436 so forth.</p>
2437 <p>Note also that properties such as -fx-background-radius and
2438 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of
2439 four values. A set of values is separated by whitespace, whereas the
2440 values or sets-of-values in a series are separated by commas. For
2441 -fx-background-radius, a single value indicates that the value should be
2442 used for the radius of all four corners of the background rectangle. A set
2443 of four values indicates that different radius values are to be used for
2444 the top-left, top-right, bottom-right, and bottom-left corners, in that
2445 order. Similarly, the -fx-background-insets property can also contain a
2446 series of values or sets of values. A set of four values for
2447 -fx-background-insets indicates that different insets are to be used for
2448 the top, right, bottom, and left edges of the rectangle, in that order.</p>
2449 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>,
2450 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span>
2451 and <span class="propertyname">-fx-background-size</span>. The number of
2452 images in the series of -fx-background-image values determines the number
2453 of background images that are painted. The -fx-background-repeat,
2454 -fx-background-position, and -fx-background-size properties each can
2455 contain a series of values. For each item in the -fx-background-image
2456 series, the corresponding items in the -fx-background-repeat,
2457 -fx-background-position, and -fx-background-size properties are applied to
2458 that background image.</p>
2459 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>,
2460 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>,
2461 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>.
2462 Each property contains a series of items. The maximum number of items in the -fx-
2463 border-color or -fx-border-style property determines the number of border layers that are painted..
2464 Each border in the series is painted using information from the
2465 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width,
2466 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black.
2467 if there is no -fx-border-style, the default style is solid. </p>
2468 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>,
2469 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>,
2470 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>.
2471 Each property contains a series of items. The number of items in the
2472 -fx-border-image-source property determines the number of images that are
2473 painted. Each image in the series is painted using information from the
2474 corresponding series items of the -fx-border-image-repeat,
2475 -fx-border-image-slice, -fx-border-image-width, and
2476 -fx-border-image-insets properties.</p>
2477 <p>The region's contents are a sequence of nodes, like any other container.
2478 The contents are set programmatically and cannot be set via CSS.</p>
2479 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2480 <thead>
2481 <tr>
2482 <th class="propertyname">CSS Property</th>
2483 <th class="value">Values</th>
2484 <th class="default">Default</th>
2485 <th>Comments</th>
2486 </tr>
2487 </thead>
2488 <tbody>
2489 <tr>
2490 <td colspan="4" class="propertyname"><em>BACKGROUND FILLS</em> (see <a
|