Putting effect in effective way...JavaFX
Friday Jan 23, 2009
With me, it happens most of the time. The basic code is over and I stuck in giving a good color to a button or a text. Now a day, a good UI is as required as basic functionality. In my 7 year of Computer life including college + work I always ran away from animations and coloring.
Last day, I was making a button and it took me pretty much time to finish it off. But, I find a good observation from it. A simple and quick way to color a button or giving a glossy effect. Have a look at these buttons.
If you are not a grahics designer, then you probably like these buttons. These buttons has been made with very simple effort, just a small work of Linear Gradient. But the fight is which color to put in Linear Gradient. So, here is my observation, you need to put the color which are close to each other and can be easily merged with each other. Like .. hmm :
LIGHTBLUE, DARKBLUE, LIGHTBLUE.(3rd button)
This is actually the best pattern.
2nd button is also the result of same :
LIGHTGREEN, DARKGREEN, LIGHTGREEN.
So, check more with this simple code :
Stage {
title: "Some Cool Buttons"
width: 250
height: 280
scene: Scene {
fill:Color.BLACK
content: [
Rectangle {
x: 10,
y: 10
width: 90,
height: 30
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 0.0
endY: 1.0
proportional: true
stops: [
// Stop { offset: 0.0 color: Color.BLACK },
Stop {
offset: 0.0
color: Color.LIGHTGREEN },
Stop {
offset: 0.5
color: Color.DARKGREEN },
Stop {
offset: 1.0
color: Color.LIGHTGREEN }
]
}
opacity:0.6
arcHeight:5
arcWidth:5
},
Text {
font: Font {
size: 12
name: "Arial Bold"
letterSpacing: 0.15
}
fill:Color.WHITE
x: 18,
y: 30
content: "HelloWorld"
} ] }
Some of my fav. combinations(2 already mentioned) :
1. Stop {
offset: 0.0
color: Color.LIME },
Stop {
offset: 0.5
color: Color.DARKGREEN },
Stop {
offset: 1.0
color: Color.LIME }
This will look awesome, if you are writing a flashy application. Very vibrant in color.
2. Stop {
offset: 0.0
color: Color.ALICEBLUE },
Stop {
offset: 0.5
color: Color.BLUE },
Stop {
offset: 1.0
color: Color.ALICEBLUE }
3. Stop {
offset: 0.0
color: Color.ORANGE },
Stop {
offset: 0.5
color: Color.RED },
Stop {
offset: 1.0
color: Color.ORANGE }
4. A very plain and descent effect :
Stop {
offset: 0.0
color: Color.LIGHTYELLOW },
Stop {
offset: 0.5
color: Color.YELLOWGREEN },
Stop {
offset: 1.0
color: Color.LIGHTYELLOW }
Enough, please let me know your choice. Is there any pattern, you follow !
|
|
|
|
hi...
i am trying to devolop application similar t...
Loading content dynamically is generally in JavaFX...