5 CSS tricks every Web Developer should know in 2023
Вставка
- Опубліковано 20 лип 2024
- Follow me for more: / dawidadach
Learn responsive web design with the newest Bootstrap 5: • Bootstrap 5 tutorial -...
Download Material Design for Bootstrap 5 - Free and powerful UI KIT: mdbootstrap.com/docs/standard/
===============================
📰 If you prefer written tutorials, you will find 25+ lessons on Bootstrap here -
mdbootstrap.com/learn/mdb-fou...
🎁 Join our mailing list & receive exclusive resources for developers
mdbootstrap.com/newsletter/
⭐ Support the creation of open-source packages with a STAR on GitHub
github.com/mdbootstrap/mdb-ui...
👨👩👧👦 If you have any questions - don't hesitate to ask on our Facebook group:
/ 682245759188413
🎓 Learn responsive web design with the latest Bootstrap 5
• Bootstrap 5 tutorial -...
📥 Download Material Design for Bootstrap - FREE open-source UI KIT
mdbootstrap.com/docs/standard/
#bootstrap5#css#tricks
0:00 Intro
0:12 - CSS Blend mode
2:34 - Clipping
5:33 - Animations
8:59 - Google fonts
10:36 - Gradients
I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video!
I don't run ads on tutorials - the only value I get is your engagement in the MDB community.
So if you would like to show your support:
- Encourage more people to Keep Coding ---> Send this video to one person
- Stay tuned for new content ---> Subscribe & ring the bell
In the description, you will find links to some useful, free resources:
📥 Download Material Design for Bootstrap - FREE open-source UI KIT
🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course)
🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall)
⭐Support the creation of open-source packages with a STAR on GitHub
👪 If you have any questions - don't hesitate to ask on our Facebook group
Thank you for your support!
Thanx, great tricks!
TIME CODES:
0:12 - CSS Blend mode
2:34 - Clipping
5:33 - Animations
8:59 - Google fonts
10:36 - Gradients
My advice 4 you - make time codes, please, that allows easily switch between these tricks. Everything else is great!) Keep doing this...)
Yes! You’re the MVP
thank you
@@wearestratusmarketing4368 What does it mean?)
@@IhorVyshniakov MVP: most valuable player
@@ark333 Thank you, now it's clear!)
I been doing web dev for over 10 years, and you're the freaking man. I'm so tired of cookie cutter hello world examples and beginners on UA-cam pretending to explain anything beyond what I get from the docs. Again, you are the man. Thank you for the amazing content.
I'm learning HTML and CSS and this channel is helping me A LOT, I just want to say, thank you! I'm loving to program on those languages and your videos basically helped me with almost every major question I had bt now and showed me things that otherwise would take me double the amount of time for me to just figure it out by myself.
Background blend blew my mind. Clipping and animation I've seen but am not familiar with personally. Fonts and gradients I use often.
Every web developer should know media queries
About a minute or so in, I realized that I’ve already watched this video before. But yeah, I watched it again. Good stuff, my man.
I knew 4 of them but didn't ever thought of using them like that (the clip path one blew me off ) ! Amazing content
thank you so much for showing clip path maker! I have been using a svg ellipse and then alot of media queries for it to scale it on every devices.
Thank you for this CSS trick 🙌🙌🙌🙌🙌🙌
Just starting out with HTML and CSS, I am amazed by what is possible. I especially enjoyed all those useful generator websites you showed.
These tips were definitely features that I did not know about. Thank you.
Really awesome tips. I love the shape/colored backgrounds. Simple but adds a little punch to the websites.
Wow, this was a very useful video!
Thank you so much!😄
I liked so much background-blend-mode, I wanted to make this before, but I didn't know it
Great video. I have not kept up with CSS, but this really helps add a lot more to websites.
The blend mode and clipping ive never knew. Excellent video sir. 😀
Blend-mode. I learn something new today. Thanks!
I was knowing the animation and the rest is learnt from you. Thank you
These are ACTUALLY great, i'll start implementing them right away, tysm
Hey thank you for sharing this wonderful css tricks with us. I knew one or two or them, but you explained all the tricks with so much simplicity and clearness. I am surely gonna try these in my personal portfolio website ;)
Happy to help!
CSS Blend mode is awesome!
It really helps, thanks for sharing!!
Blend mode and clip was new to me, thanks bro!
I'm literally learning as a beginner and it amazes me to see all these cool websites that people are able to create. Awesome video! Thank you!
Glad it was helpful!
I've been a web developer for 20 years but moved into programming about 12 years ago and lost track of new css advancements. I knew most of these except for animation. I know about animating svg images but I didn't know you could alter css properties over time. I will think about how to use this in our react project. Thank you.
So cool - and simple if you know it. Thanks for this great insight, I copied the fonts topic already, in animations I want to move graphics around in the top element.
Once again, thanks alot brother. I loved the Blending mode being my background is in Graphics design, I also love cliping mask and the Gradient. I like animations though the code seems complex at first site
Thank you for these tricks! So well explained :D
Excellent tricks shown! Thanks MDB for sharing. 👍😃
What good tricks friend, thank you very much and greetings from Chile.
Thank you !!! Clip path nd blend mode are awsome
Thank you brother! Keep up the amazing work :)
CSS= Counter strike source
Cascading style sheet
Thanks, I was aware of some of it, but forgot. Your use is cool. Rethinking how I can use the clip path creatively.
Im just a 3rd yr college student in the philippines. After studying for almost 3 yrs, finally! I found my place in I.T industry. I find web dev interesting! So i started studying about it recently. Your vid makes me more excited to pursue the course. TYSM! Yey!
wow....... good to have u here
Very useful functions which I couldn't before I found this tutorial. Thanks.
Blend mode was my favorite, the other I already knew, you could have added 3D transformation
Great man❤️, just the thing i wanted 🔥, already subscribed to your channel
Great content! I would add pseudo-elements like ::before and after to play with additional effects and also the box-shadow property (with or without insets)
Cool idea!
This was very helpful and detailed, thank you.
I am new on your channel .. I hope you keep it like that ... calm ... creative and polite
Wow background-blend-mode is amazing
that clip path was just breathtaking❤🔥
I love the first and second tricks.
I wish you can do a video on how to use human animations or SVG on a website
Thank you very much for the tips n trick, it's very useful for me who new on this
Im in love with this blend-mode man
this so cool and useful, Thank You!
Wow, this is really useful video. A lot of awesome CSS techniques. Thanks for sharing.
You make it so much easier to understand css. Amazing video! Thank you!
Glad you think so!
One of the best tutorial vids out there
thanku men cliping and background-blend-mode is new to me
It's really amazing....
We need more like this.....
Very helpful. Thank you very much!!!
Thanks a lot man, you answer my question for blend, clipping, and animations
Thanks, that means a lot ;)
Clip path, blend mode, background gradient thanks👏👏👏
Thank you so much man!!
simple and useful ! Nice job!
please do more CSS tricks o-o... this is awesome. I love seeing this stuff.
Awesome video dude......its great work
learned a lot.
I just started learning CSS, and this looks really helpful! Thanks!
Great to hear!
Thank you. That was very helpful.
Dude wow you are awesome! Thank you for this video 🙏🏽
The first three were very informative. I will use it for my site. Mucha gracias.
Thankyousoomuch for this one. It give me idea ❤️
Thanks for this. Youre the best!!!
Awesome - didn’t know any of this
Thank you for your tricks. Really helpful.
One thing though: careful with the fonts. Not everything is actually free. The license agreements should not be ignored. At the moment in Germany there are font providers dying to bring users to court for using fonts ten years ago that didn’t have a license for screen usage back then but now suddenly have.
Thanks for the heads-up Thomas. Much appreciated!
"We don't need this body anymore"
...
Initiates astral projection.
Lmaooo😂
hahahahaaha
genius
Thank you for this lol I've been cackling for five minutes
Thank you very much! Learned a lot!
This video is very neat and bold to learn
Very useful tricks! Thank you!
wonderful tutorial, CSS needs people like you. :)
Thank you. Saved a lot of time. Looking forward for more such videos. Already liked & SUB. Will share your link to others.
Thank you so much for sharing this is awesome.
this information is a treasure ... thanks:)
Didn't know the two first ones. Thanks.
Thank you for amazing tutorial!
I knew animation, gradients and google fonts. I would put Flex box, Grid and Calc() there because they are so useful when designing layouts.
this video deserves way more views, thanks for the tips!
I appreciate that!
Dear sir, Your video is awesome and what you say in your title so deserve 100% for this video you provide absolute information in this one video thanku for making this video awesome and knowledgeable sir ...
For quick comprehensives I use uigradients. They just throw simple gradients at you to copy and paste on your prototype. Or finished design.
I rather like that background blending mode property. I hope i can find a cool use for it
Thanks that’s terrific. Subscribed and liked
thank you very much.. blend mode was the best
Cool. I didn´t know about these CSS possibilities.
This is amazing stuff for a beginner. Thanks
this guy knows all of the color codes by heart...!
Awesome video thank you !!
Thank you a lot!
This video help me a lot. Thanks
Good job. Thanks!
If you make another video tutorial like this, I suggest that you showcase the 'tricks' at the beginning of the video prior to showing how to code them. And that you add a timestamp to the description section.
Thanks a lot for this ❤
You have done a great job
So cool! Thanks 🙏
The first is amazing and the best part of video.
u help me a lot! thks
Very good.
Liked and subscribed.
Thanks.
Amazing. Really interesting. Thanks.
great job
clip and background blend are new to me
wow this was very usefull!!! Thank you bro
I just discovered this page , i love it .
Ooh trying To make a portfolio, ya just made it harder!!! Amazing video and trickery