SIMPLE JAVAFX LOGIN FORM

              SIMPLE JAVAFX LOGIN FORM

I got inspired by viewing mockups in dribble .Well most of my UI starts with a wire frame thanks to Balsamiq Mockups for Desktop great  software for creating mockups.

This the process i used to design my login form

Login wireframe snapshots courtesy of Balsamiq

the process

the results

and the real deal now.

 JavaFx Login Form with three themes/css

I created three css files  namely aquastyle.css,lawngreenstyle.css and mediumbluestyle.css

Heres the aqua theme aquastyle.css

#center_circle{-fx-fill:gray;}

#mid_circle{-fx-fill:aqua;}

#outer_circle{-fx-fill:black;}

#title{-fx-font-size:32;-fx-font-style:italic;-fx-font-family:arial;-fx-background-color:lightgray;-fx-border-width:2;-fx-border-color:aqua;}

#submit{-fx-font-size:16;-fx-background-color:grey;-fx-text-fill:aqua;-fx-border-color:aqua;-fx-border-width:2;}

#username_txt,#password_txt{-fx-font-size:16;-fx-border-width:2;-fx-border-color:aqua;-fx-text-fill:aqua;-fx-background-color:black;}

#outer_circle1{-fx-fill:aqua;}

#root{-fx-background-color:black;}

#combo_box{-fx-background-color:grey;-fx-border-width:1;-fx-border-color:aqua;}

#label{-fx-text-fill:red;-fx-font-size:18;-fx-font-weight:bold;}

#user_name_label,#password_label{-fx-font-size:16;}

Heres the mediumblue theme mediumbluestyle.css

#center_circle{-fx-fill:gray;}

#mid_circle{-fx-fill:mediumblue;}

#outer_circle{-fx-fill:black;}

#title{-fx-font-size:32;-fx-font-style:italic;-fx-font-family:arial;-fx-background-color:lightgray;-fx-border-width:2;-fx-border-color:mediumblue;}

#submit{-fx-font-size:16;-fx-background-color:grey;-fx-text-fill:mediumblue;-fx-border-color:mediumblue;-fx-border-width:2;}

#username_txt,#password_txt{-fx-font-size:16;-fx-border-width:2;-fx-border-color:mediumblue;-fx-text-fill:mediumblue;-fx-background-color:black;}

#outer_circle1{-fx-fill:mediumblue;}

#root{-fx-background-color:black;}

#combo_box{-fx-background-color:grey;-fx-border-width:1;-fx-border-color:mediumblue;}

#label{-fx-text-fill:red;-fx-font-size:18;-fx-font-weight:bold;}

#user_name_label,#password_label{-fx-font-size:16;}

Heres the lawngreen theme lawngreenstyle.css

#center_circle{-fx-fill:gray;}

#mid_circle{-fx-fill:lawngreen }

#outer_circle{-fx-fill:black;}

#title{-fx-font-size:32;-fx-font-style:italic;-fx-font-family:arial;-fx-background-color:lightgray;-fx-border-width:2;-fx-border-color:lawngreen ;}

#submit{-fx-font-size:16;-fx-background-color:grey;-fx-text-fill:lawngreen ;-fx-border-color:lawngreen ;-fx-border-width:2;}

#username_txt,#password_txt{-fx-font-size:16;-fx-border-width:2;-fx-border-color:lawngreen;-fx-text-fill:lawngreen;-fx-background-color:black;}

#outer_circle1{-fx-fill:lawngreen ;}

#root{-fx-background-color:black;}

#combo_box{-fx-background-color:grey;-fx-border-width:1;-fx-border-color:lawngreen;}

#label{-fx-text-fill:red;-fx-font-size:18;-fx-font-weight:bold;}

#user_name_label,#password_label{-fx-font-size:16;}

My theme snapshots

aqua theme

aqua theme

mediumblue theme

mediumblue theme

lawngreen theme

lawngreen theme