Project Details
Changes Log
Who We Are

JavaFX CSS properties types

    1  Fonts
       1.1  Example
    2  General properties
       2.1  Sizes
          2.1.1  Example
       2.2  Dash patterns
          2.2.1  Example
       2.3  Haloing
          2.3.1  Example
       2.4  Padding
          2.4.1  Example
    3  Notes

This article explains a few useful CSS proerties type for the JavaFX CSS configuration.


The following CSS elements can be define for a font: Note that fonts used in the CSS configuration are defined by their font family. Therefore if you want to use a font which is not installed on the platform in the CSS configuation file, you will have to define it in the Graphics configuration to perform the binding[1]


      −fx−font−family: 'MyFontFamily';  
      −fx−font−size: 14.4;  

General properties


The Pattern for sizes can be one of the following:


      −fx−stroke−width: 12mm;  

Dash patterns

The dash Patterns can define a series of visible and invisible segments. The Pattern is: <size> [<size>]+. Every element of the Pattern define the size of one visible and invisible segment. On the case of only one value, each segment will have the same size.


      −fx−dash−array: 2mm 1mm;  


Haloing around a Shape can be defined with the −fx−effect property, with an associated dropShadow:
      −fx−effect : dropshadow(<type>, <color>, <radius>, <spread>, <offsetX>, <offsetY>)  

The meaning of the arguments is:


      −fx−effect: dropshadow(gaussian, black, 0.3, 1.0, 0, 0);  


The padding of a widget define the spacing between the widget (usually a text) and its bouding box. The format is: <size> <size> <size> <size>. The order of the elements is: top, right, bottom, left. If only one size is defined, all sizes will be identical.
The following diagram present a top left padding:


      −fx−effect: −fx−padding: 2mm 2mm 1mm 1mm;  


  1. ^ See resolving fonts used in the Look and Feel
  2. ^ gaussian seems to have the best results
  3. ^ Normally you would want to use "black" for the color
  4. ^ For the value 0, all the halo will be blurred (on all the radius). For the value 1, all the halo will be sharp (on all the radius)
  5. ^ [1] [2] Choose 0 for a better result

See Also

Categories: jfx | lookandfeel | server | user

Copyright 2016-2017 Dassault Aviation. All Rights Reserved. Documentation and source under the LGPL v2 licence

Project Web Hosted by SourceForge.net Copyright 1999-2010 - Geeknet, Inc., All Rights Reserved About - Legal - Help