![smashtheshell](/img/default-banner.jpg)
- Видео 79
- Просмотров 960 409
smashtheshell
Индия
Добавлен 20 апр 2015
Here we will cover all about web design, ui/ux design frontend web development and workflow. I have created this channel to show you how you can build delightful user experiences by creating awesome ui designs and animations using HTML, CSS and Javascript.
Subscribe smashtheshell
goo.gl/BYpsCE
Subscribe smashtheshell
goo.gl/BYpsCE
How to create a Creative CSS Preloader using CSS Variables! 🔥 👍
How to create a Creative CSS Preloader using CSS Variables! (#preloader #cssanimations)
Hey friends, in this video I will walk you through how to create a beautiful and creative css preloader or loading animation for your website 😍😍 using CSS variables or custom properties. We're going to build an awesome loading animation using CSS3 custom properties with glowing effect.
By using css you can create outstanding css animation effects for this loading animation we're going to build. And with the use of powerful css variables we can make custom preloaders with just pure css.
By the end of this tutorial you'll learn how to create a pure css preloader animation which can be easily customized usi...
Hey friends, in this video I will walk you through how to create a beautiful and creative css preloader or loading animation for your website 😍😍 using CSS variables or custom properties. We're going to build an awesome loading animation using CSS3 custom properties with glowing effect.
By using css you can create outstanding css animation effects for this loading animation we're going to build. And with the use of powerful css variables we can make custom preloaders with just pure css.
By the end of this tutorial you'll learn how to create a pure css preloader animation which can be easily customized usi...
Просмотров: 449
Видео
Sticky Footer with CSS | Push Footer at the Bottom of Page HTML & CSS 😍👍👌
Просмотров 54 тыс.3 года назад
Sticky Footer with CSS | Push Footer at the Bottom of Page HTML & CSS 😍👍👌 ruclips.net/video/TaXql0h_wCA/видео.html How to create a sticky footer with CSS without writing javascript at all. You'll learn how you can push the footer at the bottom of the page with just 3 lines of CSS code. This is going to be a responsive sticky footer. No javascript, no jquery only just a few lines of pure CSS to ...
Circular CSS Preloader Animation with Glowing Effect - CSS3 Animation Effects (#preloader)
Просмотров 5633 года назад
Circular CSS Preloader Animation with Glowing Effect - CSS Animation Effects (#preloader #cssanimations) ruclips.net/video/x4pio4UyADg/видео.html In this video we are going to learn how to create a creative css preloader animation. We'll explore CSS Animations to create awesome animation effects. This preloader has a neon glowing effect which will changes to different neon colors during animati...
Neumorphism in Figma 😍👌 | Soft UI Design (#neumorphism #figma)
Просмотров 88 тыс.3 года назад
Neumorphism in Figma | Soft UI Design - Figma Tutorial 😇 In this video you'll get to learn about neumorphism ui design using the figma. 😍 I will be demonstrating how to create neumorphism ui components inside figma so that you can quickly build your projects without having to create these neumorphic design again and again. You can pull out the neumorphic design components and quickly build your...
Neumorphism Design in Adobe XD | Soft UI Design #neumorphism 😍👍
Просмотров 5 тыс.3 года назад
Neumorphism Design in Adobe XD | Soft UI Design In this video tutorial you'll learn how to create neumorphism design in adobe xd. Neumorphism is a new design style reffered as soft ui design sometimes. Creating neumorphic (#neumorphism) UI Design is fairly simple. You'll see how to use adobe xd to create soft ui (#sofuti) design by utilizing the blur and background colors. Creating multiple sha...
CSS Grid Image Gallery Tutorial | HTML & CSS3
Просмотров 1,7 тыс.3 года назад
CSS Grid Image Gallery Tutorial | HTML & CSS3 ruclips.net/video/XHPudSzPYVg/видео.html We are going to create responsive image gallery using html and css grid. By combining css flexbox and css grid we can make image gallery responsive without using css media query. We are creating Image gallery with a hover effect. When you hover on the individual images you will see a beautiful hover effect wh...
CSS Art - Creating a Responsive Panda/Teddy Illustration with HTML & Pure CSS3 | CSS Art #1 #CSSArt
Просмотров 9193 года назад
#CSSArt #CSSIllustration #SpeedCode CSS Art - Creating a Responsive Panda/Teddy Illustration with HTML and Pure CSS3 | CSS Art #1 In this video you'll see how we can create a panda illustration artwork using only html and css with no svg used at all. We will be utilizing various css properties like background, clip-path, border-radius, linear-gradient and radial-gradient to create different sha...
CSS Blend Modes - Product Image Color Selection with HTML and CSS
Просмотров 8 тыс.3 года назад
CSS Blend Modes - Product Image Color Selection with HTML and CSS You will learn how to use mix blend mode in css to create a real world product color slider where you can select different colors of the product by clicking on the desired colour label. The magical thing is that we are doing this completely in pure css and we don't have to worry about writing javascript. To demonstrate how to use...
How to make a CSS 3D Cube Animation with HTML and CSS
Просмотров 3,1 тыс.3 года назад
You'll learn how to create a 3d cube animation using css 3d transforms and animation. We're going to build a 3d cube using html and css in such a way that 3d shape can be converted into any box like shape such as 3 dimensional cube or cuboid box. We will be using CSS Variables or custom properties to configure our css 3d cube so that it can be modified into any 3d shape using these awesome css ...
CSS Loading Animation - CSS Preloader with 3D transforms & animations for website | HTML & Pure CSS
Просмотров 7603 года назад
How to create a CSS Loading Animation by using 3D transforms and animations available in CSS. This is a preloader built in html and pure CSS. This is really a creative css preloader or loading screen animation which kind of animate the four 3d glass slab/cards stacked on top of another and move back and forth towards top and bottom. It creates a loading animation effect by giving a really fanta...
CSS Arrow Shapes - DRY Code Practices with CSS Variables
Просмотров 4,5 тыс.3 года назад
How to Create CSS Arrow Shapes or Icon only using pure CSS! No SVG. Just a single line of CSS property to Create your custom arrow shapes such as down arrow, up arrow, right arrow or left arrow. CSS arrows are used everywhere on the web for the menu navigation, arrow icon for sliders, css arrow shape can be used in dropdowns and many other places. So, in this video you will learn how to create ...
Responsive Multi Level Dropdown Menu with CSS | CSS3 Animated Hamburger Menu
Просмотров 17 тыс.3 года назад
Responsive Multi Level Dropdown Menu with CSS | CSS3 Animated Hamburger Menu Awesome responsive multi level dropdown menu using css and html with an animated hamburger menu created with css3. In this tutorial you will learn to create a responsive navigation dropdown menu with multilevel dropdown nested submenu using html and only css. This is an animated navbar menu built using css flexbox whic...
How to add CSS Gradient Color Overlay on an Image background -
Просмотров 67 тыс.3 года назад
Learn how to add a css gradient color overlay on an image background using background-image property. Adding a transparent gradient color overlay on an image as a background is just the matter of a single line of CSS code. CSS background property is flexible enough to let you add a background image as well as a transparent gradient overlay at the same time on your image background. Timestamps: ...
CSS Link Hover Effects - Custom Underline Link Hover animation with CSS Gradients
Просмотров 2,1 тыс.3 года назад
How to create underline link hover effects using css? Well, in this video you will learn to create an underline link hover animation effect using css gradients. To create your underline link hover effects you can simply use the background-image property in combination with css linear-gradient property to make a creative and beautiful link hover animations with no extra html markup. Timestamps: ...
Placeholder Animation CSS - Floating Label Animation - Move placeholder to top | No Javscript
Просмотров 12 тыс.3 года назад
Placeholder animation can help improve the form user experience by letting you move placeholder to top on focus and while typing so that placeholder is always visible hence improving the overall form filling experience. To create an animated placeholder text we can use label element along with the input element. And then we can create a floating label animation by simply styling the label eleme...
Responsive login form with animated input placeholder using html css & javascript
Просмотров 2,6 тыс.3 года назад
Responsive login form with animated input placeholder using html css & javascript
Full Page Responsive Navigation Bar - Animated Hamburger Icon Tutorial HTML & CSS
Просмотров 3,2 тыс.3 года назад
Full Page Responsive Navigation Bar - Animated Hamburger Icon Tutorial HTML & CSS
Adobe XD - Full Page Navigation Menu with a Time Delay Animation Prototype | Staggering Animation
Просмотров 2,4 тыс.3 года назад
Adobe XD - Full Page Navigation Menu with a Time Delay Animation Prototype | Staggering Animation
How to Create Animated Text Gradient using CSS - Text Gradient Animation 👌
Просмотров 8 тыс.3 года назад
How to Create Animated Text Gradient using CSS - Text Gradient Animation 👌
How to Apply Gradient Animation Effects on button background in CSS - Hover Gradient Animation
Просмотров 8 тыс.3 года назад
How to Apply Gradient Animation Effects on button background in CSS - Hover Gradient Animation
Clip image to text using CSS background-clip | CSS Text Knockout Effect
Просмотров 2,7 тыс.4 года назад
Clip image to text using CSS background-clip | CSS Text Knockout Effect
Border Radius in CSS | Rounded Corners with CSS Border Radius and creating shapes with border radius
Просмотров 2,9 тыс.4 года назад
Border Radius in CSS | Rounded Corners with CSS Border Radius and creating shapes with border radius
CSS Modal Window - HTML and CSS Responsive Popup box creation with CSS Flexbox
Просмотров 14 тыс.6 лет назад
CSS Modal Window - HTML and CSS Responsive Popup box creation with CSS Flexbox
CSS Image Gallery Tutorial - Responsive Gallery with HTML and CSS Flexbox
Просмотров 11 тыс.6 лет назад
CSS Image Gallery Tutorial - Responsive Gallery with HTML and CSS Flexbox
CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3
Просмотров 15 тыс.6 лет назад
CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3
Creating Automatic CSS Image slider with CSS3 animation & HTML5 | No Javascript or Jquery - Tutorial
Просмотров 18 тыс.6 лет назад
Creating Automatic CSS Image slider with CSS3 animation & HTML5 | No Javascript or Jquery - Tutorial
What is Margin Collapse and Why It's Crucial to Understand Vertical Margin Collapsing in CSS
Просмотров 7 тыс.6 лет назад
What is Margin Collapse and Why It's Crucial to Understand Vertical Margin Collapsing in CSS
Pure CSS Sticky Footer with CSS3 Flexbox - Push Footer at Bottom of Page When Content is Less
Просмотров 18 тыс.6 лет назад
Pure CSS Sticky Footer with CSS3 Flexbox - Push Footer at Bottom of Page When Content is Less
CSS Stitched Border Effect - CSS Quick Tip | Smashthehsell | Youtube Tu
Просмотров 1,1 тыс.6 лет назад
CSS Stitched Border Effect - CSS Quick Tip | Smashthehsell | RUclips Tu
CSS Multiple Border - Creating CSS3 Custom Borders | Smashtheshell | Youtube
Просмотров 10 тыс.7 лет назад
CSS Multiple Border - Creating CSS3 Custom Borders | Smashtheshell | RUclips
Thank you
14:35
This is lovely. Thank you
you saved me, thank you!
THANK YOU SO MUCH!
I love you
appreciate dude
thanks alot
Struggle to read tiny code
THANK YOU SO MUCH!!! SO SO HELPFUL!!! LIFE SAVER
Wonderful
in my case ,it is still not setting the at the bottom of the page
This looks simple but its not. Thanks for the tutorial:)
Thanks
this is a magical solution!
thank you so much
Thank you for being the only person to help me with this from the past 2 hours of looking this up. Appreciate it!
thank you so much :D
Thanks!
Thanks alot! Very clear Neumorphism presentation! Keep it up!
I am glad it helped!! 😊
💕💕💕💓💓💕💕💕💕💕💕
Simple and Effective hats off
Thank you so much
Mine is still at the right hand corner of the page up
brabo mestre
Thanks
Need help, my footer does not stick to the bottom even after this method I tried position fixed before, and it sticks the bottom part but the top always moves. I want to make my footer taller than what you have, cause when the page goes full page it breaks. It moves the footer up at the same size Example: position: fixed; bottom: 0; left: 0; right 0;
What if gradient is from top to bottom?
🎉great
Thank you Baba.
Thanks!
This video was very helpful to me. Thanks a lot!
Awesome!!!, thank you so much for sharing your knowledge.
You're the best bro.
Thanks a lot!😁
Great video, learned a lot from this. can’t wait to try these on my next design.
Thanks s lot , I' was frustrated bcoz of this
Hey, im doing but i kept going having a space in the bottom in the page and i do not why :(
thank you my nigga
Thank You!
you r such an amazing person how u make this so simple like that may allah bless u thank u soo much❤❤❤
I just learnig Figma. You're the only one who made me understand what Master. Thank Sir :)
Very clever solution! I ran into a weird situation at work where the design required me to fade an SVG icon that had a *gradient outline*, to a solid white outline. Normally CSS doesn't work like that, so as a weird workaround I used the "filter: brightness()" property, had the brightness set to 1 by default, then on hover had it fade to 7 (which was the value that made it bright enough to look solid white). Sometimes you run across really weird design situations where you have to get clever with your CSS to get it to work the way you want.
Thank you, if wasn't you, I'd still be solving this through hours in JS... 💖
Thank you so much! it was very useful!
OMG, thank you! You're a magician! Lol
Gracias mi hermano 🙌
What an amazing videoz I learned a lot from this. You made something so complicated learned simply, thank you so much ❤️
is it possible can you make a video to show how to extract it to HTML/CSS using anima or similar?