Это видео недоступно.
Сожалеем об этом.
Glassmorphism - A New UI Trend for 2021?!
HTML-код
- Опубликовано: 6 дек 2020
- bit.ly/37CWq7Q - Take my UI Bootcamp now!
-- Want to learn UI/UX? designcourse.com
-- Today, upon hearing about this "new" UI design trend, I've decided to do a video on it and take it a step in a different direction. I'll show you how to realize this effect in HTML and CSS -- as well as animate it in a cool example! As for glassmorphism as a trend in UI design, I don't think it will become much of a trend. I anticipate many people trying to implement it and failing -- sort of like neumorphism. Beginners are going to butcher this 🤣
Codepen demo (not responsive!):
codepen.io/des...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
![Baby Kia - WYG (feat. LAZER DIM 700) [Official Music Video]](http://i.ytimg.com/vi/avlLsOH_oJc/mqdefault.jpg)
Please everyone, don't overuse this like the last trend! 🤣
why is that new? frosted glas as part of a design style is decades old in Web- / UI Design!
@@MrAndi1281 Using frosted glass as a design aesthetic is old, but now it's becoming popular in the last 2 weeks just because of buzz and the guy who coined "neumorphism" is now coining "glassmorphism" 😂
@@DesignCourse i agree it´s just seems like he is "coining" it for the sake of having something "he started" instead of coming up with something of value
:D Thanks, Gary. Congrats on the new house.
body id="glass"
7:28 fun fact - in SCSS you can type rgba(white, 0.2), and it gets transpiled into rgba(255, 255, 255, 0.2)
Didn't know that, thanks!
Scss is sass?
@@abderrahmanben8915 SCSS and SASS are almost the same (they both have the exact same features)
The only difference is that SASS doesn't use semicolons and curly brackets and uses tabs (or spaces) to separate code blocks. Its syntax is inspired by Python
Most people prefer to write SCSS, because any CSS code is a valid SCSS code, so you e.g. can just rename file from .css to .scss and gradually start using SCSS's features.
But it doesn't really matter
I don't why I made this comment so long
Thanks
Thanks
Hey some keyboard shortcuts for vsc.
Note :- this is only for css.
Type poa and then enter to get position: absolute;
Type por and then enter to get position: relative;
Type pof and then enter to get position: fixed;
P0 for padding: 0;
M0 for margin: 0;
Ml0 for margin-left: 0;
Df for display flex: 0;
And lot more to explore I also didn't knew about this I tried it😎.
If you knew it just chill this is for the one who didn't knew😋.
I will try this tomorrow
Good stuff, appreciate it
ctrl c ctrl v are good shortcuts
Alt F4 is a classic. Good to learn it early too.
Noy-ce
I want to see how mind blown he'd be when he learns about Alt+Tab
And cmd+/ or ctrl+K+C too
@11:53 fun fact: u don't need to call "const glass = document.getElementById('glass')" because if u have id glass initialized in DOM - its already accessible. ids are created by default as properties of a global object (in global context).
Therefore when you can reference to window.glass as well as window['glass'] or just plain. without any getElementById
0:24 I think the minimal design looks great no divs on the walls cramping the space, focus is on you, good whitespace above your head could use a bit more margin at the bottom (by your hands) also the black t-shirt is great with the bg-colour of your wall elements. Maybe a little icon on the top left would be nice. I might have hidden the mic element also. I'll give it a 7.6/10.
Bro it's happened with me and my friends too when we embed the programming in our normal conversation.
🤣😂🤣
P E R F E C T I O N
I feel this is just social media trying to make something out of nothing, most of these 'trends' are just content for clicks.
I've already seen some websites use this on the navigation bar!
I think it looks pretty cool when used well, but if used a lot on the same website gets old.
Your tutorials really encourage me to get better at html, css, and javascript.
Firefox doesn't even support backdrop filters. This is just awful for accessibility. Don't use it for important stuff People!
I see there has been some movement on its way to release. Very hopeful.
This is why I hate firefox - literal trash
worst case scenario is you don't have blur; just make sure it's still legible! firefox needs to support it ;(
Firefox is the best browser to this day. Chrome doesn't even support MathML, which has been in the HTML specificstion for YEARS.
Firefox allows you to enable it afaik (though it would need to be enabled by the user, not the developer of the website). It'd be cool if Mozilla actually enabled it by default, but I'm not going to hold my breath for that to happen.
backdrop blur is awesome in firefox ♥
Microsoft and Apple for latest few years: we were doing this for years!
Hey, can you upload a raw video where you code everything for the first time while not looking at what you have coded before? It would be nice to see how proffesianals code in reality - watching this video makes me feel like i should know and remember every little thing. Having a comparison would be a good thing for new programmers.
Trend that doesn't work in FF without flags niiiice
hasn’t this always been a thing?
Since iOS7. So.... like 7 years. It’s actually been available in webkit based browsers for years also or you could do it using canvas before
Yepp, i literally thought same thing
Oblurlay Plugin in jQuery around 10 Years ago. But backdrop-filter is easy to use and don’t blows the file sizes, as it’s just a single line of css.
It's been a thing for sure, mainly for iOS, but hasn't been easy to do in web until recently.
yes, it was :)
Thanks for the "almost mention" ;-)
I was looking for it today. Thanks a lot.
I was playing with this recently and I found out a few days ago that Firefox does not support backdrop filter.
They literally took Microsoft's Acrylic design and changed the name
I think Microsoft design aesthetic is called fluent design
@@jvcmarc the brush used is called acrylic
@@MegaSHAKII brush?
@@jvcmarc not their design system. The whole transparent glassy thing. It is called 'useAcrylic' if you go into the settings of the new terminal
@@emmyleke7049 oh
yeah
but it steems from their design language which they called fluent
rhe acrylic look on a few elements is part of it
and it probably is on a setting because of performance reasons
My fav part when Gary says "U dont just watch videos No No No"
was acrylic background been already a thing? Windows had this ryt?
IOS has been using this design since IOS7 and I'm sure other software like mac OS and windows 10 implement this effect regularly. it's also worth mentioning the "backdrop-filter" property is not universally supported see developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
In fact this must be manually enabled on firefox and opera, on safari you must use the vendor prefix -x-.
This "glass", "ios 7" or "frost" effect has been an ongoing css challenge for years here's a stackoverflow thread from 7 years ago: stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css
If you're interested in implementing this on your website I recommend using the much more supported "filter: blur(10px)" (not perfect) or use an svg overlay with a blur filter.
One year later still not working on FF.
Acrylic design by Fluent Design System.
can't wait for 2022's whitemorphism, a revolutionary trend where we use white as the dominant color in our compositions. not sure if the world is ready for such groundbreaking change but i'm definitely excited for it!
This tutorial got me back to VSCode and coding after almost 6 months lol
i didn't know about backdrop-filter - ty. very nice effect. peeps are right, though, the effect has been around a long time, not really a new thing. i now have a glass class in my sass! :D
Isn't there a shortcut for comment in VS code? It's ctrl+/ in a lot of editors I believe, that's what I use in sublime.
Also, the text is hard to read/low contrast where it says "Glassmorphism", on the left, maybe add a div with a white background at 0.2 opacity or something for a very slight visual difference and a big readability increase.
You can comment something by typing Ctrl + /
Great work! It's my first time watching your videos. I liked it!
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
I've actually used glassmorphism on a website i made not long ago :D. By the way, unfortunately, desktop Firefox doesn't support backdrop filter yet. Mobile firefox does, so that's awkward for me.
Mobile firefox (android) is just chrome wrapper i think
So did I, and yeah, you have to set a flag in FF to get it to work, which sucks because you can't really rely on users doing that.
If you are not able to run it in Firefox, then follow this
From version 70: this feature is behind the layout.css.backdrop-filter.enabled preferences (needs to be set to true) and the gfx.webrender.all preferences (needs to be set to true). To change preferences in Firefox, visit about:config.
Seriously? The frosted glass has totally been around since at least Microsoft Aero, and I don't see why we have to apply morphism to everything.
6:44 That has happened to me a few times!
Just posted two dribbble shots on glassmorphism today before this video!!!
This has been around for a while and it's way cooler than the fads of the last few years (saturation, and those godawful cartoons). Check out Blizzard's battlenet app and website to see what I mean. They combine a solid colour, fading into game art and then overlapping with a blurred block for the menu. They then use thin 'brighten' lines to divide the segments. Because they make really strong choices in how they combine these elements they got endless variations while still retaining their unique high-end style. And that's important for them as they now have quite a diverse portfolio of different games that constantly get updates that need to look distinct to the user.
This is awesome. I'm going to play with this a little. I haven't used GSAP in awhile so I can't wait to get back to it!
Don't do anything to the walls. Its perfect as it is. It looks super professional. It has a pro look.
backdrop filter will not work in Firefox. But you can make a similar effect with filer: blur(--px); to foreground and backgrounds. Little tricky, but can work. box-shadow can help set it off
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
4:14 comment/uncomment shortcut: CTRL+K C / CTRL+L U
press "CTRL+K"
release
press "C"/"U"
Good job man, thanks a lot
This is the first time I've used GSAP and I'm amazed.
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
This looks really nice for the browser render. no browser jank at all.
Thanks man !
Funny thing- firefox doesn't support backdrop.
So if you want only for Chrome go for it.
Sad thing about backdrop-filter is not all browsers support it currently. It also slows down animations on iOS tablets and phones.
It is hard to use on a production site when the client requires the site to look and feel the same on every device and browser.
Every time i watch your video. It take me to next level. thanks for sharing
I was wondering when will you establish your course I am so exciting?🔥🔥
ctrl + / for commenting lines
Don't forget to attribute the Unsplash image. That's a requirement of using them.
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
Apple did this way back. Check out their official website and notice the header panel as you scroll
I’d love to purchase your course. I’m not down with the monthly subscription through.
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
I think that translucency on glass is called "frost"
Wow something new to learn, thank you 😊
Unfortunately backdrop-filter it's not supported by Firefox
Bro No one cares about Firefox ,right ?
Can be enabled by setting layout.css.backdrop-filter.enabled and gfx.webrender.all preferences to true in about:config.
Wait this came n gone in past... The frosted glass effect
your videos are just excellent sir
future UI should be the combination of Glassmorphism and 3D illustrations or elements
It's cool and all but it is not Crossbrowser compatible
Firefox and IE dont suport backdrop-filter so you would have to resort to the SVG Filter functionality which is a little bit more complex but works just fine on every browser
PS could be a litte tricky if it blurs over text
this was fun, works fine in Opera browser.
YOU HAVE A NEW FAVORITE FONT?!? You've been telling us about Montserrat for what feels like years lol
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
The glass-like style wasn't good when Windows Vista came out and still won't be good in 2021.
Exaxtly what i was thinking. This looks to me like the "inventor" of those "trends" just wants to see his name associated with a "new" trend just for the sake of having a bit of attention.
this is more like ios7 which is just a backdrop blur. windows vista / 7 style glass is awfully cheesy looking.
Yeah ,it's not looking good , neumorphism is better in my view
Windows Vista was to good for his time, so idk.
Eh, it was ok in Vista but they overused it. It also depended a LOT on what you did with your other personalization settings as to how "good" it looked
I like your studio here, it's simple and empty
I'm not convinced at all. Has there been a mass influx of new designers this year? Because this is like when you're just starting out and you first discover opacity and gaussian blur and just go totally crazy with it for a while until you know better.
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
What happened to the usual background, Gary? 🤔
Dope tut, BTW! 😊
He just moved house, so I guess it’s still in boxes.
body{
background: rgb(200,220,231);
color: black;
font-family: 'Poppins';
margin: 0;
padding: 7em 14em 0em 20em;
}
you will not face any scrolling issue;
I love this trend
(01:54) I wonder if you have to shoot that kind of "interrupting" sound/word (?) a couple of times until you're fine with it or if it just works out at the very first try :D :D :D
...seriously, again very well done and marvelously explained 😍
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
Sick ⚡
Loved it but I just got off no the gsap animations, you mean we have to learn gsap just to do such a simple thing as glassmorphism?
It's a shame Firefox is taking forever for backdrop filter
Its on its way to release but for now can recommend going with this given you leave enough contrast headroom in case it doesn't work.
mozarella firefox
Look like it isn't supported by all browser? Is there a way to fill that gap? Is there a best practice when it comes to css functionnalities not being supported by certains browsers? Nice video!
just press [ctrl] + [/] for a comment.
works in many languages
Mac: Cmd + /
there's also
ctrl+k+c to comment
ctrl+k+u to uncomment
@@Ferdam what this guy says works for VScode by default
@@MM-vr8rj ctrl+k+c works for me by default also. I have never touch shortcuts config in my vscode
scrimba vs freecodecamp
*who would win?*
We already have this in windows UWP and on MacOS
i feel like we could achiev the same without javascript & somes transitions, just watched & didnt go deep in this, did u tried or could u say what the benefits of the external js versus a 100% css, or where is the limitation of css here.
nice tuto btw, thx
Awesome staff
but how to make it work on firefox since firefox doesnot even support reflect property ?
What is the term for an individual who makes up words to have hits on their social media and blog. I can think of a few but I believe they are a little to generic. Not nearly as creative as glassmorphism. More like words you might not find in the dictionary but are pretty well known.
What was the point of getting the glass inside your script? You never referenced it. Just curious.
backdrop-filter not work on firefox, have any idea?
Last I checked backdrop-filter didn't work with some well known browsers.
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
It’s interesting how people could get mad about free education. Be tankful you have developers like this guy here who go in detail for free tutorials like this. Btw cmd/control and a forward slash “/“ will comment out the line of code your cursor is situated in ;))
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
backdrop-filter - is disabled on firefox normally but it is still an often used browser.
Do you know a good workaround?
This has been a thing in CSS for so long
Dou you have fix for Firefox? Event apple business not found a solution for this filter.
Very funny 🤣 Thanks 👍
Doesn't work in Android Edge and firefox even in desktop
hey sir
i have problem ....... when i make the ui of android app in adobe XD
then i export the ui the all assets have no effects of glass why and how i will solve that problem
it will not show the blur effects down ...... plzzz sir told me
Amazing!
wow, this is an art :)
That picture in the intro was my wallpaper last year lmao
Well a beauty like you, must have a beautiful picture!..
Very little of this if any on mobile. But damn it looks cool.
if you guys are interested in html+css+js tricks and tips , i can really start a youtube channel . I do many experiments :)
8:12 CSS Backdrop
Just keep you studio clean like now
welldone
😂 I made the 2020ths like. Wish me good luck. That can't be good.
css is so damn feature full
Video Seems Uncompleted Is Again Rendering Problem Happened Or You Forgot To Add End Screen Video...?
Html css game project ruclips.net/video/-ZKwMlbyr48/видео.html
Okay & whats significant about this?
But this is better than neumorphism