Glassmorphism CSS Tutorial - Login Screen With Elementor Pro

design trends certainly come and go and in 2021 one of those trends that seems to be picking up momentum is glasmorphism a term coined by michael malowicz now even if you're not familiar with the term you've no doubt seen the effect it's heavily employed in operator systems like ipad os big sur windows 7 windows 10 and is now making its way online in the form of glassmorphism in this video i'm not only going to introduce you to it but also show you how you can start to add it into your own designs now as with all design trends use it sparingly and it can have a great effect use it too much and it loses impact and usefulness now in the right places it can really enhance the ui or ux of a given website now quickly before i move on i must give a quick thank you to one of my subscribers ian bowden who reached out to me a couple of days ago asking me to take a look at this technique and take a look at creating some content like you're gonna see in this video so what exactly is glassmorphism well this is a good example of it you can see we've got some kind of animation or image in the background and then we've got this sort of blurred frosted glass effect over the top forget the animation of the actual card itself that doesn't really matter but glassmorphism is basically that replicating the effect of having glass to give a pseudo three-dimensional look or feel to your interface you design and so on so let me just hop over to one of my examples and you can see that we've got a very similar kind of thing here but for a login section so we've got a video animating in the background we've got this overlay glass effect when we mouse over we get a slight difference in effect it animates in and out and we're going to take a look at creating something similar another example where we've just got a simple clean background as you can see as we move over this we can see through this sort of frosted glass effect so it's pretty cool it's something that i think is going to be very big in 2021 and if you want to embrace this kind of trend for a custom dashboard maybe for your front end design for just like little highlight tweaks or if you're working predominantly for mobile this is a really cool way of giving that extra little bit of polish and a little bit of flair and i'm going to show you how to do it today in elementor with some custom css however you can use any kind of tool it works perfectly well in oxygen you can hand code this if you're used to using html and css on its own i'm just going to show you elementor because that's kind of what most of the audience on this channel actually used to be using so with that being said let's hop over into elementor and let me just show you how we can start creating this kind of effect okay so i've gone back into the dashboard of wordpress created a blank page and all we're going to do is edit this with elementor now we're going to be using an online tool to do most of this just because it makes life a little easier and if you want to play around and tweak things you can do it inside there it's a great way of working and it's very similar kind of technique to what i showed you recently where i showed you how to get more realistic css based shadows so if you haven't seen that video i would highly recommend it i'll put a link in the corner and in the description so you can check that out it's cool way of working okay so we want to get rid of all the distracting elements for this particular example so we're going to come down to our settings section change our page layout to elementor canvas to get rid of the headers for this and so on next thing you want to do is just simply come back down into the same settings and come up to a style and choose body style now for this example we're just going to keep this pretty straightforward and use a background image but if you want to get creative and use videos you can do that you can do all kinds of cool things with this so let's just set our background we're going to choose classic and we're going to just choose an image now abstract shapes and images work really really well but you don't have to be limited to those at all we're going to choose this sort of blurred image and we're going to say insert quickly set up a few parameters we're going to say the position is going to be sent to center attachment we're going to set this to be fixed because i want to show that scroll effect over the top repeat will set to no repeat and the size we're going to set to cover and that'll just contain it inside whatever size screen resolution we're currently working with next up we're going to add in a new section and from there we're going to select our section and we're going to come over to the height change this to minimum height and we're going to change the minimum height to we're going to change our unit of measurement to vh and we're going to set this to 100 and that's going to look at the viewport height and it's going to set it to be 100 of that so as our screen expands and contracts then we know our content is going to sit in the background it's going to sit perfectly fine our vertical align we're just going to make sure a column position is set to middle and that should be pretty much it so now our content will sit in the middle there's no matter what height viewport we're currently using in our design on our browser okay so with those side of things done we've got the background in place so we're just simply going to drop in whatever you want to place inside you for ease i'm just going to use this as a login example so we're just going to do the login option which is just part of elementor pro and we're just going to set a couple of parameters up inside here first of all we want to set this section to only be a certain width so we're going to set this to be something like i don't know say about 600 700 somewhere around there it doesn't really matter too much next up we're going to select the column itself we're going to select that from there and we're just going to apply some padding to it so we're going to drop in about 100 pixels of padding okay let's just select our form and let's get rid of some of the stuff that we don't need on there don't want labels on there and i simply want to make sure that everything looks pretty cool so i'm going to quickly very very quickly style all this so don't worry about this this is going to be nothing that you haven't already seen when using anything to do with elementor okay so then there's some really basic styling applied to the actual form itself we're going to tweak this a little later once we get everything set up and the next thing i want to do is just select this row column again and we're just going to simply come in i'm going to add a heading in there so we're going to drop that inside there and we're just going to change this to something like i don't know dashboard login and we'll style that up quickly as well so what we're going to do is just jump over to our styling text color we're going to set to be white typography we're going to change this over to something like montserrat just to give it a little bit of a cooler look and we're going to set the size to something around about 30 pixels wait we're going to set pretty light set to be uppercase and we're going to set this to be center aligned and give it a bit of space at the bottom so the bottom is going to put 20 pixels of padding okay so we've created the basic layout inside elementor so the next thing we need to do now is just add in that custom css and we're going to be using a site called glasmorphism.com link will be in the description for this totally free site what this does is it allows you to fine-tune and tweak this example on screen and you can do things like your blur value you can see we can increase or decrease the blur value on there and as we do you can see the background blurs really nicely we can adjust the transparency so we can make it all more opaque or more transparent so you can have really subtle effects with high blue or low blue whatever you kind of want to do you can show an outline on this to give it a sort of a slight edge if we turn that off you can see it takes that away and we can also apply a color to this so we can say we want this to be purple and that now gives it a purple color and again adjusting the transparency will adjust how much of that color you can actually see so we're going to do is we're going to use these options to create what we want for two different kinds of states a state which is when you see it and then a state when you hover over it to show there's some level of interaction allowed with this particular element this is a purely optional step you don't have to do this but i thought it's quite cool and it'll also show you a pretty useful little css technique you can use for loads and loads of other reasons so what we're going to do we're going to set first of all we want to have a sort of white-ish background on there we're going to adjust the transparency so it's pretty subtle and we're going to grab our blue and adjust that to about the i like the outline as well so this is kind of giving that nice frosted glass effect so what we need to do now is copy that css and apply that inside elementor okay so this is where the fun start let's hop back over to elementor now what we need to do is make sure we've got the right element selected in this example it's going to be this column so we need to make sure that's selected and that allows us then to use the custom css this part of elementor pro let's open that up and now we can start applying custom css to this particular selected item and to do that we just got to use a really simple option inside elementor we'll type in the word selector and that basically says whatever is selected this is what we're going to apply the css to so this is the selected item we're going to use select it to say that's exactly what we want to target and now we can put our css definitions in so we'll open up our kodi brackets press enter that'll close our curly brackets and line below and now we can simply paste in the code we just copied from glastomorphism so we need to do is just paste that inside there and immediately you can see that now takes on a glass morphism effect so really really easy to do just that now then how do we create that effect when we mouse over it well this is where we use a little bit of simple css knowledge and a little bit of html knowledge so we've created one definition let me just open this up a little bit more so you can see what we're doing and let's just scroll that down a bit okay so what we can do now is we can use selector in conjunction with modifier html code and what do i mean by that well if you're working with any kind of link effect you've got four different states so you've got the link itself you've got hover active and so on so using that knowledge we need to apply this effect on hover in other words when we hover our mouse over this login panel we want to change in some way so we're going to do selector again and because we want to affect the hover state we're going to put full colon and the word hover and then we're going to open our curly brackets and close our curly brackets so now this just basically says this selected item in this example this particular column when it's hovered over with the mouse do something else to it so now we're going to come back over to our glassmorphism generator and we're just going to tweak this a little bit so we're going to change the transparency ever so slightly i'm going to apply a little bit of color to it we're going to make it darker so now we're going to copy this block of css and we're going to hop back over into elementor and we're going to do the same again we're going to paste that inside there so now when we mouse over you can see we get this effect however it doesn't look very good at the moment because it's just basically going from one state to another there's no kind of smooth transition between those different states now we can rectify that really really easily let me just tidy my css up every slightly so you can see what i'm doing okay so we've got our two selectors the one for just the standard state one for the hover state now we're going to add in another little bit of css magic which is the transition effect so we're going to just simply paste this in now we're going to put it as the first line and we're just going to say we want to affect everything all the different parameters in this example so this is saying transition all in other words everything below over a half a second time and ease in in other words just going to smooth that transition so now we go over it transitions a little nicer however you see when we take our mouse off it and the hover effect switches out and goes back to the default it still has that horrible jolt so we can compensate for that by simply doing exactly the same thing on the plane selector so now we've applied a transition and ease transition on all of the different parameters on both the plane selector and the hover selector so now when we go over it transitions we take it back out it transitions again so you can easily change this you want to make it longer you could easily set this to be a one second transition and we do the same thing below so one second to get even smoother and you can see now we get a slower smoother transition effect between the two so we update that we've now created our cool looking effect so let's just preview this now in the browser so we can see what it looks like so we're into a browser and as you can see it's looking okay the glass morphism effect is looking pretty cool but we need to rectify a few other things the effect on hover is working nicely that one second transition so we get that kind of visual feedback that something happens when we interact with it however we've got no real background on our form elements and while we've got this sort of 3d with highlighting effect and so on with the glass morphism effect we really need to just make our button and our form elements just look a little bit cooler and a bit more in keeping let's just hop back over now into our dashboard and take a look at how we can address those options so these are all options now that are part of the form itself so we can if we want to apply custom css to this but we don't need to we can just leverage the power of what we can do directly inside elementor so let's do that just to finish this off select our form we're going to our style tab and inside there we're going to first of all come to our fields element we're going to apply some styling to this the first thing i want to do is just make sure that the text is set to white if not i'm going to set it to white typography you can change that to match in with what you want the background color is going to affect the background color of the form element we want to affect that first of all so let's just choose that we're going to choose this sort of almost black but we're going to adjust the transparency to taste so we're going to drop that to around about that kind of setting we can tweak this later on if we need to without any problems i'll adjust this now so we can make sure it has the same kind of hue and you can see that now already shows us a much better effect so we're going to just tweak this until we get it so you can see exactly what's going on that there's some kind of element to interact with and once i'm happy with that the next thing i want to do is make it look like there's some light coming down onto it now it's very easy to do we're going to change the border options so at the moment we've got no border width or anything so we're going to change this color first of all to white and we're going to make sure that we've got everything set to 100 opacity unlink these and we're going to put a one pixel board across the top and you see that now gives it a sort of highlight effect if you wanted to put on all of them you could do that it's entirely up to you i'm just showing you some options you can have a little bit of fun playing around with this kind of thing so let's just set that back to what we had which was unlink them and set one on the top now obviously that's a little bit on the strong side so we're going to do the same again affect the opacity drag that down until we get a really subtle effect the kind of mirror is what we have on the outside edge but only on the top that looks pretty cool i'm going to do exactly the same now on the buttons we're going to come to the button element you can see we've got the border type we're going to set that to solid if it's not already make sure these are not linked and we're going to set one pixel on the top and we do the same again we're going to select the color we want to use which is going to be white for the border and we're going to drop that opacity down until it just becomes a nice smooth subtle effect and there we go so now if we take a look at that we should have a much more realistic looking highlighted buttons and text area for our input areas for our form and so on and it should just look just a little bit of polish so this is what we had before if we refresh this page this is what we have now so you can see it looks like a proper form we've got the effects we've got the blur in the background all looks pretty cool now there's a couple things else you could do if you wanted to let's just hop back over and into our test section and let's just apply some animation when this comes in so we'll select it and we're just going to go to the advanced section and from there we'll choose motion effects entrance animation we're going to scroll down we're going to do something like let's just say slide in down and that'll slide down the screen allowing us to see that transparent effect on this we'll update that again we'll hop back over to our test section we'll refresh that page and we'll take a look at this in action so we'll see the animation there we go animates in looks pretty cool so you really could go to town with what you want to do on this you really can't get creative and use it in your interface the only thing to take into consideration is use it sparingly because i think if you do too much of it it can probably look a little bit overkill and would make it look pretty unprofessional so let me just do one final thing this is using a sort of blurred background or if we wanted to use an image would it still work with that kind of thing well let's have a little look let's come back down to our settings and into our style and let's just change our body style now for a different image so we'll just delete that and we'll choose something that well is a nice decent sized background let's choose this one as an example select that and you can see that shows you the blur effect and it shows it quite nicely and it still allows you to see exactly what's going on and if you want to stack these kind of effects you could do that you could get really creative you could do loads of different cool things with this but hopefully what this is demonstrated is with a little bit of css knowledge and an online generator like glass morphism you can get some pretty cool looking effects that really can up your game and make you look a little bit cooler now if you enjoy this type of content you'll like my recent video on how to build more realistic looking shadows with css you can find the link below and i'll pop up a card in the corner so you can hop over and watch that video next now as always all the applicable links are in the description below and if you've made it this far under the video well why not give that thumbs up button a click it really does help me out now while you're at it if you like this content why not also click on the subscribe button and slap the bell icon but if you didn't enjoy the video well feel free to hit that thumbs down button twice as that works pretty well too my name is paul c this is wp test and until next time take care you

Channel: WPTuts

Views: 9,382

Keywords: WPTuts, glassmorphism css tutorial, css tutorial, glassmorphism css, glassmorphism css login, css glass morphism, 2021 ui trends, glass morphism ui design, glass morphism ui, glass morphism css, glass morphism tutorial, glass morphism css tutorial, glass morphism html css

Id: OeCQtgmh5hw

Length: 17min 18sec (1038 seconds)

Published: Mon Feb 08 2021