Skip to content

Instantly share code, notes, and snippets.

@jewelsea
Last active June 24, 2021 10:27
Show Gist options
  • Save jewelsea/5241095 to your computer and use it in GitHub Desktop.
Save jewelsea/5241095 to your computer and use it in GitHub Desktop.
Applies CSS to a JavaFX pane to create a page turn style shadow effect.
import static javafx.application.Application.launch;
import javafx.application.*;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class CSSBoxStyles extends Application {
@Override public void start(Stage stage) {
StackPane shadowPane = new StackPane();
shadowPane.getStyleClass().add("right-page-turn");
AnchorPane anchorPane = new AnchorPane();
anchorPane.getStyleClass().add("content-pane");
anchorPane.setMinSize(400, 200);
StackPane layout = new StackPane();
layout.getChildren().setAll(
shadowPane,
anchorPane
);
stage.setScene(new Scene(layout));
stage.getScene().getStylesheets().add(
getClass().getResource("shadow-styles.css").toExternalForm()
);
stage.show();
}
public static void main(String[] args) { launch(args); }
}
/**
* file: shadow-styles.css
* Place in same directory as CSSBoxStyles.java
* Have your build system copy this file to your build output directory.
*/
.root {
-fx-app-background: cornsilk;
-fx-background-color: -fx-app-background;
-fx-padding: 20;
}
.right-page-turn {
-fx-rotate: 3;
-fx-translate-y: -2;
-fx-background-insets: 20 10 15 80;
-fx-background-color: -fx-app-background;
-fx-effect: dropshadow(three-pass-box, grey, 10, 0, 0, 15);
}
.content-pane {
-fx-background-color: whitesmoke;
}
@jewelsea
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment