Stacked Text

import java.lang.reflect.Modifier;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
import java.util.stream.Collectors;
import java.util.stream.Stream;

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    public static final int size = 10;

    public void start(Stage stage) throws Exception {
        List<Color> colors = Stream.of(Color.class.getDeclaredFields())
                .filter(f -> f.getType() == Color.class && Modifier.isStatic(f.getModifiers()) && Modifier.isPublic(f.getModifiers()))
                .map(f -> {
                    try {
                        return (Color)f.get(null);
                    } catch (IllegalArgumentException | IllegalAccessException e) {}
                    return null;
                })
                .collect(Collectors.toList());

        Collections.shuffle(colors);

        Font font = Font.font("Berlin Sans FB Demi", 100);
        int[] pos = {0, 0};
        final int density = 5;
        Text[] texts = colors.stream().limit(size)
                .flatMap(color -> Stream.generate(() -> {
                    Text t = new Text("TEXT");
                    t.setFont(font);
                    t.setFill(color);
                    t.setX(pos[0]+=1);
                    t.setY(pos[1]+=1);
                    return t;
                }).limit(density))
                .toArray(Text[]::new);

        Group grp = new Group();
        for (int i = texts.length - 1; i >= density; i--) {
            grp.getChildren().add(texts[i]);
            if(i <= density) {
                texts[i].setFill(Color.WHITE);
                texts[i].setStroke(Color.BLACK);
            }
        };
        Text[] texts2 = Arrays.copyOfRange(texts, density+1, texts.length);
        texts = null;

        VBox root = new VBox(grp);
        root.setAlignment(Pos.CENTER);
        stage.setScene(new Scene(root, 500, 500));
        stage.getScene().getAccelerators().put(new KeyCodeCombination(KeyCode.ESCAPE), () -> System.exit(0));
        stage.show();

        new AnimationTimer() {

            @Override
            public void handle(long now) {
                Paint fill = texts2[texts2.length - 1].getFill();
                for (int i = texts2.length - 1; i >= 1 ; i--) {
                    texts2[i].setFill(texts2[i - 1].getFill());
                }
                texts2[0].setFill(fill);
            }
        }.start();
    }
}

javafx - Form Element _001

Practiced  (http://codepen.io/kaezarrex/pen/EmzVLM by David)

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.ParallelTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.Timeline;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ChangeListener;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {
 public static void main(String[] args) {
  launch(args);
 }

 final Font DEFAULT_FONT = Font.font("Candara", 15);

 @Override
 public void start(Stage stage) throws Exception {
  VBox root = new VBox(20, new InputField("First Name"), new InputField("Last Name"), new CustomButton("Submit"));
  root.setAlignment(Pos.CENTER);
  root.setStyle("-fx-background-color:white");

  Scene scene = new Scene(root, 300, 300, Color.WHITE);
  stage.setScene(scene);
  stage.show();
  scene.getAccelerators().put(new KeyCodeCombination(KeyCode.ESCAPE), () -> System.exit(0));
  scene.getStylesheets().add("style.css");
 }

 class CustomButton extends HBox {
  Button btn;
  public CustomButton(String name) {
   setAlignment(Pos.CENTER);

   btn = new Button(name);
   getChildren().add(btn);

   btn.getStyleClass().clear();
   btn.getStyleClass().add("button-2");
   btn.setFont(DEFAULT_FONT);
   animations();
  }
  private void animations() {
   SimpleIntegerProperty lineLength = new SimpleIntegerProperty(0);
   lineLength.addListener((p, o, n) -> {
    String color = "linear-gradient(to right, red "+n+"%, gray "+(n.doubleValue()+1)+"%, gray 100%)";
    btn.setStyle("-fx-border-color:"+color);
   });

   Timeline tl = new Timeline(
     new KeyFrame(Duration.ZERO, new KeyValue(lineLength, 0, Interpolator.EASE_OUT)),
     new KeyFrame(Duration.millis(600), new KeyValue(lineLength, 100, Interpolator.EASE_OUT))
     );
   
   btn.hoverProperty().addListener((p, o, n) -> {
    if(n)
     tl.playFromStart();
    else {
     tl.stop();
     btn.setStyle("-fx-border-color:gray");
    }
   });
  }
 }

 class InputField extends Group {
  final TextField field;
  final Label label;

  public InputField(String name) {
   field = new TextField();
   label = new Label(name);

   field.setFont(DEFAULT_FONT);
   label.setFont(DEFAULT_FONT);

   label.getStyleClass().clear();
   field.getStyleClass().clear();

   getStyleClass().add("input-field");
   field.getStyleClass().add("text-field-2");
   label.getStyleClass().add("label-2");

   getChildren().addAll(label, field);
   animations();
  }

  private void animations() {
   TranslateTransition translateField = new TranslateTransition(Duration.millis(300), field);
   TranslateTransition translateLabel = new TranslateTransition(Duration.millis(300), label);
   ScaleTransition scaleLabel = new ScaleTransition(Duration.millis(300), label);

   SimpleIntegerProperty lineLength = new SimpleIntegerProperty(0);
   lineLength.addListener((p, o, n) -> {
    String color = "linear-gradient(to right, red "+n+"%, gray "+(n.doubleValue()+1)+"%, gray 100%)";
    label.setStyle("-fx-text-fill:"+color);
    field.setStyle("-fx-border-color:"+color);
   });

   Timeline tl = new Timeline(
     new KeyFrame(Duration.ZERO, new KeyValue(lineLength, 0, Interpolator.EASE_OUT)),
     new KeyFrame(Duration.millis(600), new KeyValue(lineLength, 100, Interpolator.EASE_OUT))
     );

   ParallelTransition pt = new ParallelTransition(translateField, scaleLabel, translateLabel);

   Runnable focused = () -> {
    pt.pause();
    translateField.setToY(17);
    scaleLabel.setToY(0.6);
    scaleLabel.setToX(0.6);
    translateLabel.setToX(-10);
    pt.playFromStart();
    tl.playFromStart();
    pt.setOnFinished(e -> {});
   };

   Runnable focuslost = () ->{
    if(field.isFocused())
     return;

    pt.pause();
    translateField.setToY(0);
    scaleLabel.setToY(1);
    scaleLabel.setToX(1);
    translateLabel.setToX(0);
    pt.playFromStart();
    tl.stop();
    pt.setOnFinished(e -> {
     label.setStyle("-fx-text-fill:gray");
     field.setStyle("-fx-border-color:gray");
    });
   };
   
   ChangeListener<Boolean> cl =  (p, o, n) -> {
    if(n)
     focused.run();
    else
     focuslost.run();
   };
    
   hoverProperty().addListener(cl);
   field.focusedProperty().addListener(cl);
  }
 }
}

.input-field .text-field-2 {
 -fx-border-width:0 0 2 0;
 -fx-border-color:gray;
 -fx-padding:2;
}

.button-2 {
 -fx-padding: 0.3em 1.4em 0.3em 1.4em;
 -fx-border-width:2;
 -fx-border-color:gray; 
}

javafx - NHS Spinner

Forked (http://codepen.io/csswizardry/pen/PjPXrg by Harry Roberts)

import javafx.animation.Animation;
import javafx.animation.Interpolator;
import javafx.animation.RotateTransition;
import javafx.animation.SequentialTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {

 @Override
 public void start(Stage stage) throws Exception {
  int radius = 20;
  Color fill = Color.WHITE;
  
  Circle center = new Circle(150, 150, radius, fill);
  Circle c1 = new Circle(150 - radius*2, 150 - radius*2, radius, fill);
  Circle c2 = new Circle(150 + radius*2, 150 + radius*2, radius, fill);
  Circle c3 = new Circle(150 - radius*2, 150 + radius*2, radius, fill);
  
  Group root = new Group(center, c1, c2, c3);
  
  RotateTransition rt = new RotateTransition(Duration.seconds(1.5), root);
  rt.setInterpolator(Interpolator.EASE_BOTH);
  rt.setFromAngle(-360*5);
  rt.setToAngle(-50);
  
  rt.setCycleCount(Animation.INDEFINITE);
  rt.setAutoReverse(true);
  rt.play();
  
  stage.setScene(new Scene(root, 300, 300, Color.web("#272727")));
  stage.show();
  stage.getScene().getAccelerators().put(new KeyCodeCombination(KeyCode.ESCAPE), () -> System.exit(0));
 }

 public static void main(String[] args) {
  launch(args);
 }

}

styled using hilite.me

download code

javafx - Neon Button

import java.nio.file.Files;
import java.nio.file.Path;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.Bloom;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

 public static void main(String[] args) {
  launch(args);
 }
 
 @Override
 public void start(Stage stage) throws Exception {
  Path p = Files.createTempFile("prefix", "suffix");
  p.toFile().deleteOnExit();
  setUserAgentStylesheet(p.toUri().toURL().toString()); // remove default stylesheet
  
  Button b = new Button("Neon button");
  b.setEffect(new Bloom());
   
  VBox root = new VBox(20, b);
  root.setAlignment(Pos.CENTER);
  Scene scene = new Scene(root, 300, 300); 
  stage.setScene(scene);
  scene.getStylesheets().add("style.css");
  stage.getScene().getAccelerators().put(new KeyCodeCombination(KeyCode.ESCAPE), () -> System.exit(0));
  stage.show();
 }
}

.root {
 -fx-background-color: darkblue;
}

.button {
  -fx-font-size:2em;
 -fx-font-family: "Eras Medium ITC";
 -fx-padding:15px 20px;
 -fx-text-alignment: center;
 -fx-border-width: 2px; 
 -fx-border-color: cyan;
 -fx-text-fill:cyan;
 -fx-border-radius: 50%;
 -fx-padding:1em 2em 0.9em 2em;
}

.button:hover {
 -fx-border-color: derive(cyan, -20%);
 -fx-text-fill:derive(cyan, -20%);
}

styled using hilite.me

particle explosion

Practiced http://codepen.io/thebabydino/pen/vgXrZm
https://netopyr.com/2012/06/14/using-the-javafx-animationtimer/

import java.time.Duration;
import java.util.Random;

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Main extends Application {

 public static void main(String[] args) {
  launch(args);
 }

 @Override
 public void start(Stage stage) throws Exception {
  final int size = 400;
  final Rectangle[] rectangles = new Rectangle[size];
  final long[] delays = new long[size];
  final double[] angles = new double[size];
  final long duration = Duration.ofSeconds(3).toNanos();
  final Random random = new Random();

  for (int i = 0; i < size; i++) {
   rectangles[i] = new Rectangle(5, 5, Color.hsb(random.nextInt(360), 1, 1));
   delays[i] = (long) (Math.random()*duration);
   angles[i] = 2 * Math.PI * random.nextDouble();
  }
  stage.setScene(new Scene(new Pane(rectangles), 500, 500, Color.BLACK));
  stage.getScene().getAccelerators().put(new KeyCodeCombination(KeyCode.ESCAPE), () -> System.exit(0)); 
  stage.show();

  new AnimationTimer() {
   @Override
   public void handle(long now) {
    final double width = 0.5 * stage.getWidth();
    final double height = 0.5 * stage.getHeight();
    final double radius = Math.sqrt(2) * Math.max(width, height);

    for (int i = 0; i < size; i++) {
     Rectangle r = rectangles[i];
     double angle = angles[i];
     long t = (now - delays[i]) % duration;
     double d = t*radius/duration;
     
     r.setOpacity((duration - t)/(double)duration);
     r.setTranslateX(Math.cos(angle)*d + width);
     r.setTranslateY(Math.sin(angle)*d + height);
    }
   }
  }.start();
 }



}

styled using hilite.me

download code

menu-hover-line-effect

recreated  https://codepen.io/jonneal/pen/vxvzxZ

download code

JavaFx - TextField with placeholder

1 2 3 4 5 6 7 8 9 10

TextField searchBox = new TextField(); Text text = new Text(" Search"); text.setStyle("-fx-fill:gray"); text.visibleProperty().bind(searchBox.focusedProperty().not().and(searchBox.textProperty().isEmpty())); StackPane pane = new StackPane(text, searchBox); searchBox.setStyle("-fx-background-color:transparent;-fx-border-color:lightgray;-fx-border-radius:2%;"); pane.setStyle("-fx-background-color:white;"); pane.setAlignment(Pos.CENTER_LEFT);