smashtheshell
smashtheshell
  • Видео 79
  • Просмотров 960 409
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...
Просмотров: 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

Комментарии

  • @Youbernaut
    @Youbernaut 10 дней назад

    Thank you

  • @user-hn6nm3ul2o
    @user-hn6nm3ul2o 26 дней назад

    14:35

  • @Commandraa
    @Commandraa Месяц назад

    This is lovely. Thank you

  • @gabrielscoti6835
    @gabrielscoti6835 Месяц назад

    you saved me, thank you!

  • @kebab4640
    @kebab4640 2 месяца назад

    THANK YOU SO MUCH!

  • @randomrainforest
    @randomrainforest 2 месяца назад

    I love you

  • @zenxnbeatz
    @zenxnbeatz 3 месяца назад

    appreciate dude

  • @masengeshobruno-ug1fj
    @masengeshobruno-ug1fj 3 месяца назад

    thanks alot

  • @brightasinde7034
    @brightasinde7034 4 месяца назад

    Struggle to read tiny code

  • @user-ym5vn8pm8i
    @user-ym5vn8pm8i 4 месяца назад

    THANK YOU SO MUCH!!! SO SO HELPFUL!!! LIFE SAVER

  • @abubacarrjawune4210
    @abubacarrjawune4210 4 месяца назад

    Wonderful

  • @TheFarhanafsar
    @TheFarhanafsar 4 месяца назад

    in my case ,it is still not setting the at the bottom of the page

  • @Whisperme2sleep
    @Whisperme2sleep 5 месяцев назад

    This looks simple but its not. Thanks for the tutorial:)

  • @akk843
    @akk843 5 месяцев назад

    Thanks

  • @IcyCocktail
    @IcyCocktail 5 месяцев назад

    this is a magical solution!

  • @dulainguijaka6138
    @dulainguijaka6138 6 месяцев назад

    thank you so much

  • @maniac7591
    @maniac7591 7 месяцев назад

    Thank you for being the only person to help me with this from the past 2 hours of looking this up. Appreciate it!

  • @TobyGamez7747
    @TobyGamez7747 9 месяцев назад

    thank you so much :D

  • @pawel80
    @pawel80 9 месяцев назад

    Thanks!

  • @saifmohammad733
    @saifmohammad733 9 месяцев назад

  • @olehchornyi6193
    @olehchornyi6193 9 месяцев назад

    Thanks alot! Very clear Neumorphism presentation! Keep it up!

  • @S-Lomar
    @S-Lomar 10 месяцев назад

    💕💕💕💓💓💕💕💕💕💕💕

  • @SiamShahriar
    @SiamShahriar 11 месяцев назад

    Simple and Effective hats off

  • @alternativelearning3945
    @alternativelearning3945 11 месяцев назад

    Thank you so much

  • @elijahkaliya795
    @elijahkaliya795 11 месяцев назад

    Mine is still at the right hand corner of the page up

  • @viniciusmacedo2423
    @viniciusmacedo2423 11 месяцев назад

    brabo mestre

  • @gunayfarzalibayli2172
    @gunayfarzalibayli2172 Год назад

    Thanks

  • @luv.matters
    @luv.matters Год назад

    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;

  • @solr4cc
    @solr4cc Год назад

    What if gradient is from top to bottom?

  • @avjtv
    @avjtv Год назад

    🎉great

  • @Big_Dot_Inc
    @Big_Dot_Inc Год назад

    Thank you Baba.

  • @lewismorgan6139
    @lewismorgan6139 Год назад

    Thanks!

  • @anudipiyumra7521
    @anudipiyumra7521 Год назад

    This video was very helpful to me. Thanks a lot!

  • @user-sz7is6uu7p
    @user-sz7is6uu7p Год назад

    Awesome!!!, thank you so much for sharing your knowledge.

  • @Jaaz7
    @Jaaz7 Год назад

    You're the best bro.

  • @coreylynch7876
    @coreylynch7876 Год назад

    Thanks a lot!😁

  • @Epicedits2555
    @Epicedits2555 Год назад

    Great video, learned a lot from this. can’t wait to try these on my next design.

  • @ShekharBhide
    @ShekharBhide Год назад

    Thanks s lot , I' was frustrated bcoz of this

  • @GermanDorta
    @GermanDorta Год назад

    Hey, im doing but i kept going having a space in the bottom in the page and i do not why :(

  • @AbuAlRoz
    @AbuAlRoz Год назад

    thank you my nigga

  • @bravosix6109
    @bravosix6109 Год назад

    Thank You!

  • @emannofal1759
    @emannofal1759 Год назад

    you r such an amazing person how u make this so simple like that may allah bless u thank u soo much❤❤❤

  • @karthickt7
    @karthickt7 Год назад

    I just learnig Figma. You're the only one who made me understand what Master. Thank Sir :)

  • @tomoneil4279
    @tomoneil4279 Год назад

    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.

  • @pankichal
    @pankichal Год назад

    Thank you, if wasn't you, I'd still be solving this through hours in JS... 💖

  • @daryaazarenka6497
    @daryaazarenka6497 Год назад

    Thank you so much! it was very useful!

  • @washingtonlgois
    @washingtonlgois Год назад

    OMG, thank you! You're a magician! Lol

  • @ale_manu
    @ale_manu Год назад

    Gracias mi hermano 🙌

  • @bellyjar3020
    @bellyjar3020 Год назад

    What an amazing videoz I learned a lot from this. You made something so complicated learned simply, thank you so much ❤️

  • @ShopperPlug
    @ShopperPlug Год назад

    is it possible can you make a video to show how to extract it to HTML/CSS using anima or similar?