- 27
- 63 217
CSSnippets
India
เข้าร่วมเมื่อ 7 ก.ย. 2024
You’ll find free tutorials on HTML, CSS, and JavaScript on this channel. We share code examples and teach you how to create animations and responsive designs for your websites.
Our videos make learning and using HTML, CSS, and JavaScript easy. Whether you’re a beginner or looking to improve your skills, we’ve got something for you.
Subscribe to stay updated with our latest videos and start coding today!
Our videos make learning and using HTML, CSS, and JavaScript easy. Whether you’re a beginner or looking to improve your skills, we’ve got something for you.
Subscribe to stay updated with our latest videos and start coding today!
🔥 Learn Advance CSS Border Animations in 5 Minutes! [Part 2]
Learn CSS border animations in just 5 minutes! 🚀
In this video tutorial, we’ll create amazing border effects using CSS animations, pseudo-elements (::before & ::after), gradients, and custom properties.
Border-Animation(Part-1): th-cam.com/video/XeOtvhjjHWY/w-d-xo.htmlsi=F-vpmgSpR237tNn-
--------------------
📂 Get the Full Source Code:
🔗 GitHub: github.com/CSSnippets/Animated-Border-Card
📢 Join Our Community: telegram.me/cssnippets
---------------------
🔹 What You’ll Learn:
✅ Border Animation - Animate borders using ::before & ::after, CSS variables, and conic gradients
✅ Glowing Border Effect - Add a glowing animated border using filter: blur()
✅ Animating Gradients - A simple CSS trick to make gradients move smoothly
✅ @property Rule - Learn how to animate CSS variables using the @property rule
------------------
⏳ Timestamps:
00:00 Intro
00:16 HTML Structure
00:30 Styling the Card with CSS
02:30 Adding Pseudo-Elements
03:05 Creating the Border Animation
------------------
💡 About Me:
We are CSSnippets, the channel where you can learn CSS quickly and easily! We share short, practical tutorials to help you create amazing UI effects with modern CSS tricks.
#borderanimation #gloweffect #glowingborder #cssanimations
In this video tutorial, we’ll create amazing border effects using CSS animations, pseudo-elements (::before & ::after), gradients, and custom properties.
Border-Animation(Part-1): th-cam.com/video/XeOtvhjjHWY/w-d-xo.htmlsi=F-vpmgSpR237tNn-
--------------------
📂 Get the Full Source Code:
🔗 GitHub: github.com/CSSnippets/Animated-Border-Card
📢 Join Our Community: telegram.me/cssnippets
---------------------
🔹 What You’ll Learn:
✅ Border Animation - Animate borders using ::before & ::after, CSS variables, and conic gradients
✅ Glowing Border Effect - Add a glowing animated border using filter: blur()
✅ Animating Gradients - A simple CSS trick to make gradients move smoothly
✅ @property Rule - Learn how to animate CSS variables using the @property rule
------------------
⏳ Timestamps:
00:00 Intro
00:16 HTML Structure
00:30 Styling the Card with CSS
02:30 Adding Pseudo-Elements
03:05 Creating the Border Animation
------------------
💡 About Me:
We are CSSnippets, the channel where you can learn CSS quickly and easily! We share short, practical tutorials to help you create amazing UI effects with modern CSS tricks.
#borderanimation #gloweffect #glowingborder #cssanimations
มุมมอง: 1 107
วีดีโอ
CSS Variables Tutorial: Build a Light-Dark Mode Website!
มุมมอง 36914 วันที่ผ่านมา
Learn how to create and manage custom properties in CSS, also known as CSS variables, and use them to design a light and dark mode website. In this tutorial, I'll cover the basics of local and global variables, calc() function, fallback function, and how to use CSS variables to create responsive and fluid typography. You'll learn how to define and name variables in CSS and use them to maintain ...
5 CSS PRO Tips & Tricks you NEED to know
มุมมอง 39221 วันที่ผ่านมา
Best CSS Tips and Tricks | css tips and tricks for beginners | css pro tips Welcome to an exciting tutorial where I share 5 mind-blowing CSS tips and tricks to solve common JavaScript problems using CSS only! 🎉 In this video, you’ll discover elegant solutions to everyday web design challenges and learn how to make your CSS more powerful and efficient. Here’s what you’ll learn in this video: ✔ H...
How to create a Responsive Navigation Bar (for beginners)
มุมมอง 1.7K28 วันที่ผ่านมา
In this video, we’ll create a fully responsive navbar with a hamburger menu and a stylish sidebar using HTML, CSS (Flexbox), and JavaScript. You’ll learn how to design a navbar that adapts to different screen sizes, aligns content with Flexbox, and includes a smooth sidebar animation. Get source code 👉 Go to our Telegram Channel (link in bio...) What You’ll Learn: ✔ How to use HTML, CSS, and Ja...
Create a To-Do List App with HTML, CSS & JavaScript | Task App in JavaScript
มุมมอง 970หลายเดือนก่อน
Ready to level up your web development skills? 🚀 In this tutorial, we’ll guide you through creating an amazing To-Do List App using HTML, CSS, and JavaScript. This project is perfect for beginners, intermediate & pro developers who want to master CRUD operations, Local Storage, progress bars, and even add a confetti animations! 🎉 💾 Get the Source Code: buymeacoffee.com/cssnippets/e/353890 🔗 Imp...
🔴 Animated Personal Portfolio Template using HTML, CSS & JS
มุมมอง 4.3Kหลายเดือนก่อน
Welcome to my tutorial on creating an Animated Personal Portfolio Website using HTML, CSS, and JavaScript! In this video, I will guide you step-by-step through the process of building a stunning personal website with text typing animation. You can use this website to make your online resume or CV. Get Source Code: 👇👇👇👇👇👇 buymeacoffee.com/cssnippets/e/346636 buymeacoffee.com/cssnippets/e/346636 ...
![Master CSS Animation Property in 11 Minutes [Full Tutorial] 🚀](http://i.ytimg.com/vi/Bhj4miRkSOc/mqdefault.jpg)
Master CSS Animation Property in 11 Minutes [Full Tutorial] 🚀
มุมมอง 16K2 หลายเดือนก่อน
🎨 Master CSS Animation in Just 10 Minutes! 🚀 Welcome to our crash course on CSS Animation! In this video, we’re going to cover everything you need to know about CSS animations in just 10 minutes. In this tutorial, we'll break down all the animation properties, show you how to create stunning effects, and even walk you through a cool loading and scrolling animation project. 🔗 Source Files: • Cre...
Master CSS Transform Property: Rotate, Scale, Translate & Skew Tutorial
มุมมอง 2.4K2 หลายเดือนก่อน
In this tutorial, we'll show you how to use the CSS transform property to rotate, scale, translate, and skew elements. Mastering these properties will enhance your web design skills and make your websites more interactive and visually appealing. transform: matrix ( [scaleX], [skewY], [skewX], [scaleY], [translateX], [translateY], ); Learn CSS Transition Property: th-cam.com/video/xdap5e3-DwM/w-...
Learn All CSS Transition Property for Smooth Animation
มุมมอง 4.6K2 หลายเดือนก่อน
Learn how to create smooth and natural animations with CSS transitions. This quick 5-minute tutorial covers hover effects, animation speed control, and timing functions, including custom cubic Bezier curves. 🔗 Cubic Bezier Website: cubic-bezier.com/ 🌟 What You'll Learn: 1. CSS transition basics 2. Smooth hover effects 3. Controlling animation speed 4. Timing functions (ease, ease-in, ease-out, ...
Create Stunning Glowing Buttons with CSS | Button Animation
มุมมอง 1.6K3 หลายเดือนก่อน
Transform your boring buttons into stunning, glowing neon buttons using CSS in just a few minutes! You'll learn how to style your button with custom CSS properties, adding advanced effects such as glowing gradient button border animations, cool CSS button hover effects, and CSS button click animations. Whether you're looking to create a CSS button with hover effects, button border animation, or...
🔥 Create Stunning CSS Border Animations in 5 Minutes! [Part 1]
มุมมอง 22K3 หลายเดือนก่อน
Want to create stunning CSS border animations in just 5 minutes? 🚀 In this tutorial, you'll learn how to animate borders using CSS pseudo-elements (::before & ::after), conic-gradient, CSS variables, and the @property rule to create smooth, eye-catching effects! 🌟 What You'll Learn: ✅ How to use ::before and ::after for animations ✅ Animating borders with conic-gradient for a dynamic look ✅ Mak...
Transform Your Website with a Stunning CSS Moon Effect!
มุมมอง 7653 หลายเดือนก่อน
🌙✨ In this video, you can learn how to create a stunning Moon Light Effect using HTML and CSS. We'll guide you through step-by-step instructions to make your web design glow like the moon. Perfect for beginners and developers of any level. To create this glowing animation, we will use two keyframes. This project involves setting up the HTML structure, styling the moon with CSS, and defining the...
Sorry guys, why there are two dashes in the beginning of some properties
It's called CSS Variables! Check out our CSS Variable video for more info... th-cam.com/video/1jkD92rmhD4/w-d-xo.html
Really liked the step by step explanation. Also, cool design and animation. Keep it up. 👍 Please, don't use white screens when transitioning in video sections. The white screen felt like flash bangs while watching in a dark room😅.
Thank you for your suggestion. I keep it in mind for future videos.
Actually, i am not a fam if this video. Sounds and looks AI generated.
Thanks for your feedback! I put a lot of effort into making these videos, and I'll keep working to improve. Hope you find the content helpful! 😊
Wow best channel 🖤🥶
Thank you for considering my channel 🙂🙂
this video helped me a lot, but i have a question why does my div returns to its original state immedeiatly(without transition) when i stop hovering over it ?
To make the transition smooth when the hover ends, add the transition to the default (normal) state of the div. This way, both the hover and unhover effects will be smooth. Also, use the proper transition property, like this: div { transition: all 0.5s ease; } For more queries, DM me on Instagram.
@CSSnippets wow , it worked Thanks !!!!!!
Glad it worked! Happy to help anytime! and Keep experimenting with CSS! 😊
Amazing Mam
Thank you so much!
Wow, you're not making the screen blink in this video like before!
Haha, yeah! I made some changes to improve the experience. Thanks for noticing!
you're both Border animation video is best and also your explanation style is awesome...
Thank you so much! Happy to hear you liked the animations and explanations!
Can you tell me your vs code theme name?
It's the default theme, but the colors look a bit different in the video due to color grading.
@CSSnippets Ohh okay thank you 😊
Welcome
Thank you now I somewhat understand ❤
Glad to hear that! Keep going! 😊🚀
Awesome video 😂😂😂
Thank you 😊
Can you please provide the source code for this scrolling animation, I tried to implement, but it is not working for me, great video
thank you... check source code on..... github.com/CSSnippets/Scrolling-Animation.git
Responsive Typography is useful topic...
Thank you...
Thanks
Your Welcome!...
Super useful
Glad you think so!
Nice video mam 📷
Thank you 😊
Make more css tips videos😮😮😮😮
Definitely 💯
Wow thanks
Thank you 😊
Amazing 😍
Thank you 😊
Hi which software you uses to generate audio will you tell me
You can use any AI voice generator tool like LOVO AI, Elevenlabs or PlayHT
Nice, need more videos html, css, js
Coming soon!
mam. u r crazy❤🔥
Aww, you're so sweet! Thank you! 😊❤🔥
You'r explanation is very well
Thank you
Superb 🎉🎉🎉
Thank you
Nice video
Thanks
❤❤❤❤❤
❤️❤️❤️❤️
❤❤❤❤
Awasome work Chandni 🎉❤
Thank you so much 😄
Good Sir
Thank you 👍
Create video on responsive navbar using only CSS and HTML
Definitely, 😀 I'll create in future
@@CSSnippetsmake it fast
@@ChauhanJagdish1996 ok
when to upload full portfolio design all content
Still working on this video; it's delayed due to the Christmas holiday. 😊
How much time to take write code totally.😢😢😢
It doesn't take much time to write code, but if you understand it and then write it then it take time.
Nice explanation😊😊😊
Thank you
Awesome video mam😮😮😅
Thanks
Good Job 👍 😊
thank you
Good job bro. Its just for me impossible to understand 😅
😅😅😅😅😅
portfolio
I am working on it. it will be coming soon...
portfolio
Next week I am uploading full website, currently I am working on this project.
can i get the image?
No, It's is own image, you can use your image for portfolio.
❤❤❤❤❤
💕💕💕
please make all content section portfolio
I'm working on this video and it's coming end of this month
Awesome video🎥😊😊😊
Thanks for the visit 🤗
Hope it can slow down Because I can’t understand it a bit
Or I can slow the video down :)
I can understand and trying to make video slower
Yes
wow, good 1 keep it up.
Thank you, I will...
Full portfolio
👍👍👍👍
Full video is coming at the end of this month...
portfolio
👍
Full video is coming at the end of this month...
@@CSSnippets reply my comment
yogurt
🤔
Hello, this is an amazing portfolio template😍. Can you also show us how you implemented the text typing animation, I think you missed it
You can check full video, I am creating full video in some days
@CSSnippets hey can you make video for me how to give rough edge border in image using CSS ? Pls make a video or reply me how I can do it
i make a video in short term on this topic..
wow, thanks
You're welcome! Thanks for watching....
Please next topic on other pages as well please
Definitely