Oracle Apex Login Page FULL BLACK Design Trends You Need to Know About - Template 3

Welcome to my latest blog post! In this article, I will show you how to enhance a login page using simple CSS and a background image. Designing an appealing login page is a crucial step in making a great first impression for your website. Step by step, we'll walk through the necessary tweaks to create a more modern and visually attractive design. Whether you're a beginner or an experienced developer, this guide will help you take your login page to the next level.

• Upload Image
• Step 1: Navigate to the static files section in your Oracle APEX application.
• Step 2: Upload an image that you want to use as a background, e.g., bg_image.jpeg.
• Step 3: Copy the path of the uploaded image. This path is usually displayed in the form #APP_FILES#bg_image.jpeg.
• Create Static Region
• Step 1: Go to the page where you want to create the login design.
• Step 2: Create a new region and select the region type Static.
• Step 3: Position this region so that it serves as the background image.
• Enter Image URL
• Step 1: In the properties of the static region, find the option Template.
• Step 2: Choose the template type Image.
• Step 3: Enter the path # APP_FILES# bg_image.jpeg in the Image or File URL field that you copied earlier.
• Add CSS Class
• Step 1: Go to the properties of the login region.
• Step 2: Under the section Appearance, find the field CSS Class.
• Step 3: Enter the CSS class my_custom_login_design in this field. This is important to ensure the CSS styles are applied correctly.
• Add CSS Code
• Option 1: Directly on the page in the CSS section
• Step 1: Go to the page properties and find the section for custom CSS.
• Step 2: Add the following CSS code:

 

CSS/SCSS

xxxxxxxxxx

104

 

1

.my_custom_login_design {

2

  background: linear-gradient(145deg, #1e1e1e, #333);

3

  color: white;

4

  border: 5px solid;

5

  border-color: #4d4d4d #1e1e1e #1e1e1e #4d4d4d;

6

  box-shadow: 

7

      5px 5px 15px rgba(0, 0, 0, 0.6),  /* Äußerer Schatten für Tiefe */

8

      inset 5px 5px 10px rgba(0, 0, 0, 0.5),  /* Innenschatten für den 3D-Effekt */

9

      inset -5px -5px 10px rgba(255, 255, 255, 0.1); /* Heller Innenschatten für Glanz-Effekt */

10

  border-radius: 10px;  /* Abgerundete Ecken */

11

  transition: all 0.3s ease;  /* Glatte Übergänge bei Hover */

12

  padding-bottom: 70px; /* Extra padding at the bottom for layout */

13

  border-top-left-radius: 100px; /* Large rounded corner on the top-left */

14

  border-bottom-right-radius: 100px; /* Large rounded corner on the bottom-right */

15

}

16

​

17

.my_custom_login_design:hover {

18

  transform: translateY(-5px);  /* Leichter "Hover"-Effekt, hebt das Element an */

19

  box-shadow: 

20

      10px 10px 20px rgba(0, 0, 0, 0.7),  /* Tieferer äußerer Schatten beim Hover */

21

      inset 5px 5px 15px rgba(0, 0, 0, 0.6),  /* Stärkerer Innenschatten */

22

      inset -5px -5px 15px rgba(255, 255, 255, 0.2);  /* Mehr Glanz beim Hover */

23

}

24

​

25

 /* Styling for input and button inside the my_custom_login_design */

26

.my_custom_login_design .apex-item-text, 

27

.my_custom_login_design .t-Button {

28

  font-size: 16px; /* Shared font size for input and button */

29

  border: none;

30

  border-radius: 20px; /* Rounded corners for both elements */

31

  color: white;

32

  box-shadow: 

33

      inset 3px 3px 5px rgba(0, 0, 0, 0.6),

34

      inset -3px -3px 5px rgba(255, 255, 255, 0.1); /* Shared 3D shadow effect */

35

  transition: all 0.3s ease; /* Shared transition effect for hover */

36

}

37

​

38

​

39

/* Specific styling for the input field */

40

.my_custom_login_design .apex-item-text {

41

  background: #333; /* Background color for the input field */

42

}

43

​

44

/* Hover effect for the input field */

45

.my_custom_login_design .apex-item-text:hover {

46

  background: #444; /* Slight gloss on hover */

47

  box-shadow: 

48

      inset 5px 5px 10px rgba(0, 0, 0, 0.8),

49

      inset -5px -5px 10px rgba(255, 255, 255, 0.2); /* Stronger gloss */

50

}

51

​

52

/* Focus effect for the input field */

53

.my_custom_login_design .apex-item-text:focus {

54

  outline: none;

55

  background: #555; /* Lighter background on focus */

56

  box-shadow: 

57

      inset 5px 5px 10px rgba(0, 0, 0, 0.9),

58

      inset -5px -5px 10px rgba(255, 255, 255, 0.3); /* Stronger gloss on focus */

59

}

60

​

61

/* Specific styling for the button */

62

.my_custom_login_design .t-Button {

63

  width: 100%; /* Button takes up full width */

64

  padding: 10px; /* Padding for the button */

65

  font-weight: bold; /* Bold text for the button */

66

  background: linear-gradient(145deg, #444, #222); /* Linear gradient background for the button */

67

  cursor: pointer; /* Pointer cursor on hover */

68

}

69

​

70

/* Hover effect for the button */

71

.my_custom_login_design .t-Button:hover {

72

  background: linear-gradient(145deg, #555, #333); /* Slight gloss on hover */

73

  box-shadow: 

74

      5px 5px 12px rgba(0, 0, 0, 0.7),

75

      -5px -5px 12px rgba(255, 255, 255, 0.2); /* Deeper shadow on hover */

76

  transform: translateY(-3px); /* Slight lift effect on hover */

77

}

78

79

​

80

​

81

​

82

.my_custom_login_design_2 {

83

  background: linear-gradient(145deg, #1e1e1e, #333);

84

  color: white;

85

  border: 5px solid;

86

  border-color: #4d4d4d #1e1e1e #1e1e1e #4d4d4d;

87

  box-shadow: 

88

      5px 5px 15px rgba(0, 0, 0, 0.6),  /* Äußerer Schatten für Tiefe */

89

      inset 5px 5px 10px rgba(0, 0, 0, 0.5),  /* Innenschatten für den 3D-Effekt */

90

      inset -5px -5px 10px rgba(255, 255, 255, 0.1); /* Heller Innenschatten für Glanz-Effekt */

91

  border-radius: 10px;  /* Abgerundete Ecken */

92

  transition: all 0.3s ease;  /* Glatte Übergänge bei Hover */

93

  padding-bottom: 70px; /* Extra padding at the bottom for layout */

94

  border-top-right-radius: 100px; /* Large rounded corner on the top-left */

95

  border-bottom-left-radius: 100px; /* Large rounded corner on the bottom-right */

96

}

97

​

98

.my_custom_login_design_2:hover {

99

  transform: translateY(-5px);  /* Leichter "Hover"-Effekt, hebt das Element an */

100

  box-shadow: 

101

      10px 10px 20px rgba(0, 0, 0, 0.7),  /* Tieferer äußerer Schatten beim Hover */

102

      inset 5px 5px 15px rgba(0, 0, 0, 0.6),  /* Stärkerer Innenschatten */

103

      inset -5px -5px 15px rgba(255, 255, 255, 0.2);  /* Mehr Glanz beim Hover */

104

}

• Option 2: Upload as a file in the static files
• Step 1: Create a CSS file (e.g., custom_login_design.css) with the above CSS code.
• Step 2: Upload this file to the static files of your application.
• Step 3: Go to the application settings and link the uploaded CSS file in the CSS section.
• Completion
• Step 1: Verify that all changes have been applied correctly.
• Step 2: Test the login design to ensure it looks and functions as desired.

Creating a New Region: Upgrade APEX Login Page

In this section, we will create a new region named Upgrade APEX Login Page. This region will serve as the foundation for enhancing the design and functionality of the APEX login page. By applying modern CSS techniques and adding a background image, we will transform the standard login interface into a more visually appealing and user-friendly experience. Let’s dive into the steps needed to create and style this new region effectively.

 

HTML/XML

xxxxxxxxxx

 

1

<p>

2

    Tired of the plain default login? With simple CSS, you can create a sleek and modern design that enhances the user experience.

3

</p>

4

<p>

5

    Easily customize colors, add cool effects like shadows and gradients, and make your login page truly reflect your brand’s unique identity with minimal effort.

6

</p>

Additional Notes:

• Path Verification: Ensure that the path to the image is correct. An incorrect path will result in the image not being loaded.
• Clear Browser Cache: If changes are not immediately visible, clear the browser cache or perform a hard refresh.
• Responsive Design: Check the design on different devices and screen sizes to ensure it looks good everywhere.

Call to Action:

• Follow the Steps: To create a similar layout, simply follow the steps described above.
• Verify Your Work: Ensure that all changes have been applied correctly and the layout looks as desired.
• Provide Feedback: Share your feedback or questions to receive support or suggest improvements.

Good luck with creating your Oracle APEX login design!

 {fullWidth}