JavaFX: Applying Drop Shadow Effects To Button

This entry is part 22 of 55 in the series JavaFX

Drop shadow effects can be applied to text, label and also button.

As in label, we can use the mouse in and mouse out methods to trigger the event call and apply the effects to the button.

package javafxapplication19;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class JavaFXApplication19 extends Application {
    
    Button btn = new Button("Codecrawl");
    
    DropShadow ds = new DropShadow();
 
    @Override
    public void start(Stage stage) {
 
        stage.setTitle("JavaFX Program!");
 
        StackPane stackpane = new StackPane();
 
        Scene scene = new Scene(stackpane, 300, 250);
        scene.getStylesheets().add("javafxapplication19/style.css");
        stage.setScene(scene);
 

        btn.getStyleClass().add("button1");
        
        btn.setOnMouseEntered(e -> mouseEntered());
        
        btn.setOnMouseExited(e -> mouseExited());
 
        stackpane.getChildren().add(btn);
 
        stage.show();
    }
    
    public void mouseEntered() {
 
        btn.setEffect(ds);
        btn.setText("Mouse In");
 
    }
    
    public void mouseExited() {
 
        btn.setEffect(null);
        btn.setText("Mouse Out");
 
    }
    
    
    public static void main(String[] args) {
        launch(args);
    }
 
}

ds

 

JavaFX: Applying Effects To Label

This entry is part 19 of 55 in the series JavaFX

We have looked at Label and we have made use of lambda function to call the event, we can now set up a mouse over effect on a Label.

When the mouse move over the label, a scaling factor of 1.5 is applied to the Label. This is done by using the setScale method.

package javafxapplication15;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.scene.input.MouseEvent;

public class JavaFXApplication15 extends Application {

    @Override
    public void start(Stage stage) {

        Label lb = new Label("Every Picture Tells A Story");

        lb.setOnMouseEntered((MouseEvent e) -> {
            lb.setScaleX(1.5);
            lb.setScaleY(1.5);
        });

        lb.setOnMouseExited(e -> {
            lb.setScaleX(1);
            lb.setScaleY(1);
        });

        BorderPane pane = new BorderPane();
        pane.setCenter(lb);
        Scene scene = new Scene(pane, 300, 250);
        stage.setScene(scene);
        stage.setTitle("JavaFX Program");
        stage.show();
    }

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

}

scale1

 

HTML5 Canvas: More effect methods

This entry is part 8 of 17 in the series HTML5 Canvas

The following are some of the more common effect methods that are available for
shapes:

  • strokeStyle: Specifies the color or style for lines around shapes
  • fillStyle: Specifies the color or style used inside shapes
  • shadowOffsetX/shadowOffsetY: Specifies the distance of the shadow
  • shadowBlur: Specifies the level of the blurring effect
  • shadowColor: Specifies the color of the shadow
  • createLinearGradient: Creates a linear gradient inside the shape
  • createRadialGradient: Creates a radial gradient inside the shape
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Styling a square</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='200' height='200'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.shadowOffsetX = 10;
    canvas.shadowOffsetY = 10;
    canvas.shadowBlur = 10;
    canvas.shadowColor = 'rgba(200, 0, 200, .3)';
    canvas.fillStyle = 'rgba(200, 0, 200, 1)';
    canvas.strokeStyle = '#09c';
    canvas.lineWidth = 5;
    canvas.fillRect(0, 0, 100, 100);
    canvas.clearRect(25, 25, 50, 50);
    canvas.strokeRect(25, 25, 50, 50);
</script>
</body>
</html>

The inner square is created by strokeStyle, lineWidth and strokeRect.  Its color is #09c.
Effect Methods Output

jQuery UI & Effects: Add Class

This entry is part 1 of 10 in the series jQuery UI Effects

jQuery UI Effects – addClass demo

This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - addClass demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            width: 240px;
            padding: 1em;
            font-size: 1.2em;
            border: 1px solid #000;
            background: #eee;
            color: #333;
        }

        .newClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script>
        $(function () {
            $('#button').click(function () {
                $('#effect').addClass('newClass', 1000, callback);
                return false;
            });

            function callback() {
                setTimeout(function () {
                    $('#effect').removeClass('newClass');
                }, 1500);
            }
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='ui-corner-all'>
        I am getting bigger and bigger and please do not stop me.
    </div>
</div>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

</body>
</html>
Try The Code

In the line

$('#effect').addClass('newClass', 1000, callback);

A new class newClass will be added to the div in a duration of 1000ms.

Once the animation is completed, the callback function will be called removing the newly added class.  The newClass will be removed in 1500ms as in this line below.

$('#effect').removeClass('newClass');

jQuery Mobile: Popup transitions

This entry is part 65 of 73 in the series jQuery Mobile

Generally, we want the popup to be fast and simple.  But if you are keen, you can add some transition effects such as slide and fade to the popup.

To set the transition used for a popup, add the data-transition attribute to the link that references the popup.

The reverse transition will be used when closing the popup.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Popup Transition App</h1>
    </div>

    <div data-role='content' style='text-align: center'>
        <a href='#transitionExample' data-transition='none' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>No transition</a>
        <a href='#transitionExample' data-transition='pop' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Pop</a>
        <a href='#transitionExample' data-transition='fade' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Fade</a>
        <a href='#transitionExample' data-transition='flip' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Flip</a>
        <a href='#transitionExample' data-transition='turn' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Turn</a>
        <a href='#transitionExample' data-transition='flow' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Flow</a>
        <a href='#transitionExample' data-transition='slide' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide</a>
        <a href='#transitionExample' data-transition='slidefade' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slidefade</a>
        <a href='#transitionExample' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide up</a>
        <a href='#transitionExample' data-transition='slidedown' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide down</a>
        <div data-role='popup' id='transitionExample' class='ui-content' data-theme='a'>
            <p>I'm a simple popup.</p>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code