{"id":1170,"date":"2014-05-16T17:18:18","date_gmt":"2014-05-16T15:18:18","guid":{"rendered":"http:\/\/www.jensd.de\/wordpress\/?p=1170"},"modified":"2014-05-16T17:18:18","modified_gmt":"2014-05-16T15:18:18","slug":"somehow-more-organic-how-to-create-a-noisy-gradient-in-javafx","status":"publish","type":"post","link":"https:\/\/www.jensd.de\/wordpress\/?p=1170","title":{"rendered":"“somehow more organic”: how to create a ‘noisy’ gradient in JavaFX"},"content":{"rendered":"

If you always wondered why some regions on your Mac, Websites or in your Smartphone-Apps look somehow more organic than a plain coloured area or even an region with a gradient, have a closer look!
\nZooming into these areas shows that they are a bit “noisy”.<\/p>\n

This effect can be created very easily with CSS in JavaFX too:<\/strong>
\nI just noticed that “-fx-background-image<\/code>” is painted in front of “-fx-background-color<\/code>“:<\/p>\n

\"javafx_css_color_paint\"<\/a><\/p>\n

So, what is needed is a transparent “noise texture” which can be created here<\/a> or here<\/a>.<\/p>\n

This texture is then used as a repeated background-image and painted in front the background-color which in JavaFX-CSS can also be a linear gradient:<\/p>\n

[css]
\n-fx-background-color: linear-gradient(rgb(224,228,233) 0%, derive(rgb(224,228,233),-20%) 100%);
\n-fx-background-image: url(“images\/noise-texture.png”);
\n-fx-background-repeat: repeat;
\n[\/css]<\/p>\n

I used this approach e.g in my MQTT.fx<\/a>-UI:<\/p>\n

\"mqtt-fx-6-noise-0.0.2\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

If you always wondered why some regions on your Mac, Websites or in your Smartphone-Apps look somehow more organic than a plain coloured area or even an region with a gradient, have a closer look! Zooming into these areas shows that they are a bit “noisy”. This effect can be created very easily with CSS… <\/span>Continue Reading “somehow more organic”: how to create a ‘noisy’ gradient in JavaFX<\/span><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"footnotes":"","_jetpack_memberships_contains_paid_content":false,"jetpack_publicize_message":"\"somehow more organic\": how to create a 'noisy' gradient in JavaFX http:\/\/wp.me\/p38FCL-iS","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[32,9,4,47],"tags":[93,80,76,103],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p38FCL-iS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1170"}],"collection":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1170"}],"version-history":[{"count":8,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1170\/revisions"}],"predecessor-version":[{"id":1179,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1170\/revisions\/1179"}],"wp:attachment":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}