Hello Friends,
In this Oracle APEX Tutorial, Today I will tell you how to implement Animated Login Screen in Oracle APEX.
Basically, If we are creating an application in Oracle APEX, So in every application Login screen will be the same.
Let's try something different with Login Screen in Oracle APEX.
Step 1:- Navigate to Login Page where you want to this implementation. Below Screenshot will help you out.
Step 2:-First we want to good background image that justifies your application and adds to Login Screen Page. Go to Shared Components and upload your image into Static Application Files. Below Screenshot will help you.
As you are seen to the above screenshot with the red mark you can upload your image into Static Application Files or Static Workspace Files as well and copy Reference column PATH below screenshot will help you.
After copy path below CSS code copy and paste into Page Inline CSS Section.
.t-Body{
background-image: url(#APP_IMAGES#background_image.jpeg);
background-size: cover !important;
}
Step 3:-After adding a background image now Add Company logo into Region.,So again follow step 2 for image upload after that used below code for display logo.
.t-Login-logo {
background-image: url(#APP_IMAGES#gym_logo.png);
width: 250px;
height: 166px;
}
After adding both codes your login screen currently will be the same as the below screenshot.
Step 4:-Add fadeInDown CSS Class Under Appearance Section below screenshot will help you.
Step 5:-Give the static ID of Login Button(login) below screenshot will help you.
Step 6:- Use the Below Code into your Page Inline CSS Section.
.t-Login-region {
background-color: rgba(255, 255, 255, 0.8) !important;
}
#login {
background-color: #a94438;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#login:hover{
background-color: #39ace7;
}
#login:active{
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
span.apex-item-icon.fa.fa-user {
color: #56baed;
}
span.apex-item-icon.fa.fa-key {
color: #56baed;
}
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
For DEMO:-
Reference:-
If You Like This Tutorial Please Like Share And Comment.
3 Comments
Good Work.. Nice to see the animated Login screen.
ReplyDeleteCan I get access to this Gym Management Application? Would like to see more insight about this app.
Basically we are working on GYM Management System after ready i will share screen
DeleteCool. Will wait for your email. You can share it to rprashu4u@gmail.com
ReplyDeleteMost of your APEX blogs are excellent. Keep rocking with cool stuffs using APEX.
If you have any doubts, Please let me know