- Видео 8
- Просмотров 121 663
Enhance Coding
Добавлен 12 апр 2017
I created this channel for web development related tutorials.
CSS Preloaders | 15 Stunning CSS Loading Animation examples for your website
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI
A collection of 15 stunning CSS loading animations by skillful developers are shown in this video. All the css loader's demo and code link are given below. See & let us know in comment which one you like the most.
#1 Jump and Slide - codepen.io/ste-vg/full/OEbYqZ
#2 Stair Loader - codepen.io/ispal/full/mVaaJe
#3 Animated Symbol - codepen.io/aaroniker/full/omvYNZ
#4 Making pancake' loader - codepen.io/pawelqcm/pen/ObwyNe
#5 Animated Loader - codepen.io/majci23/full/NqdXvy
#6 Hand animation - codepen.io/r4ms3s/full/XJqeKB
#7 Modern Google - codepen.io/jczimm/full/vEBpoL
#8 Redirecting Loader - codepen.io/mr_alien/full/FDLjg
#9 Square Loader - codepen.io/ta...
A collection of 15 stunning CSS loading animations by skillful developers are shown in this video. All the css loader's demo and code link are given below. See & let us know in comment which one you like the most.
#1 Jump and Slide - codepen.io/ste-vg/full/OEbYqZ
#2 Stair Loader - codepen.io/ispal/full/mVaaJe
#3 Animated Symbol - codepen.io/aaroniker/full/omvYNZ
#4 Making pancake' loader - codepen.io/pawelqcm/pen/ObwyNe
#5 Animated Loader - codepen.io/majci23/full/NqdXvy
#6 Hand animation - codepen.io/r4ms3s/full/XJqeKB
#7 Modern Google - codepen.io/jczimm/full/vEBpoL
#8 Redirecting Loader - codepen.io/mr_alien/full/FDLjg
#9 Square Loader - codepen.io/ta...
Просмотров: 47 236
Видео
How to create SVG icons sprite sheet | Advance SVG | SVG icons sprite sheet
Просмотров 6 тыс.3 года назад
In this video we will learn how to create & use external SVG icon sprite sheet. 🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI Instagram : enhancecoding Website : www.enhancecoding.com/
Sidebar Navigation Using Only HTML & CSS | Enhance Coding | Web Tutorials | HTML CSS
Просмотров 3,1 тыс.3 года назад
In this video we will learn how to create cool Sidebar Navigation using only HTML & CSS. 🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI Instagram : enhancecoding Website : www.enhancecoding.com/ Song: Jim Yosef - Link [NCS Release] Music provided by NoCopyrightSounds. Watch: ruclips.net/video/9iHM6X6uUH8/видео.html Download/Stream: ncs.io/LinkYO - - - - - - - - - - - - - - - - - - ...
Collapsible/Dropdown Using Only HTML CSS | CSS Tutorial | Enhance Coding | SEO Friendly
Просмотров 44 тыс.4 года назад
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video I will show you how to create animated collapsible using only CSS which will also work for SEO | CSS Tutorial | CSS Animation Effect | Enhance Coding Music Credit Jarico - Landscape : soundcloud.com/jaricomusic/la... Jarico - Landscape [NCS BEST OF]: ruclips.net/video/Srqs4CitU2U/видео.html
Animated Glowing Gradient Button Hover Effect Using Only CSS | CSS Tutorial | Enhance Coding
Просмотров 2,2 тыс.4 года назад
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video I will show you a cool animated glowing gradient button hover effect using only CSS | CSS Tutorial | CSS Animation Effect | Enhance Coding Music Credit Track: Tobu - Roots [NCS Release] Music provided by NoCopyrightSounds. ruclips.net/video/7wNb0pHyGuI/видео.html
How to install xampp server on windows 10 | Install XAMPP Step by step
Просмотров 1204 года назад
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video I will show you how to install xampp step by step on windows 10. Subscribe to our Enhance Coding RUclips channel and hit the bell icon to get all the updates. #enhancecoding #installxampp #xamppforwindows
Fix - 2 missing PHP extensions check error in Magento 2 installation
Просмотров 6 тыс.6 лет назад
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video i will show you how to solve 2 missing php extensions check errors "php extension xsl." and "php extension intl." while installing magento2. Don't forget to Subscribe our channel for future videos. Thanks for watching.
Php is not recognized as an internal or external command error solution
Просмотров 13 тыс.7 лет назад
🔥 SUBSCRIBE FOR MORE VIDEOS : bit.ly/3eOG1BI In this video you can see, how to fix this error - 'php' is not recognized as an internal or external command, operable program or batch file.
👍👏
No code, no like.
bro please text video
Is this all copyrighted or free to use ?
Anyone know why he puts extra 0's after: background: url(..) no-repeat 0 0; & padding: 15px 0; ? Thanks in advance!
Amazing collection.
if you explained it clearly i would be more good actually
Great video. Thanks!
Thanks
Thank you sir .. Sir keep upload video about programming it's really benefits us .
Thanks, yes we are working on some cool stuff, will upload soon, stay tuned.
Superb ❣️❣️
good. thanks
How do I run html for #4? tks!
Bhai isme transition kiase lagaun
how to put it in portfolio website?
thank you for inspiration!!!
Good one ! ♥
Thanks
Not working <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="loader">Loading...</div> </body> </html> <style> $color-background: #eaecfa; $color-loader: #ce4233; body { background: $color-background; } .loader { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: helvetica, arial, sans-serif; text-transform: uppercase; font-weight: 900; color: $color-loader; letter-spacing: 0.2em; &::before, &::after { content: ""; display: block; width: 15px; height: 15px; background: $color-loader; position: absolute; animation: load .7s infinite alternate ease-in-out; } &::before { top: 0; } &::after { bottom: 0; } } @keyframes load { 0% { left: 0; height: 30px; width: 15px } 50% { height: 8px; width: 40px } 100% { left: 235px; height: 30px; width: 15px} } </style> <script> </script>
thanks 🥰
Thankyou so much. ))
0 coments really? You need more appreciation 👍
Thanks for your support @Lazy-Hero
Thank you very much
Thank you, this was very helpful and great video. Could have paused for longer before transitions to allow people time to look at the result before the screen changed.
Thanks a lot
Love this little tutorial, thanks a lot! One (stupid) question though. If I create a second collapse right under this one by copying this code, clicking the second one opens up the first one. I don't really get why exactly it is doing that. How do I add multiple items to the dropdown?
You just need to change the checkbox id, i.e: "collapsible-head 2". Then change it too on the label for it to place the label properly.
If for some reason it doesn't work, you can add an id to that 'text' class that houses the title and lorum text. Then copy the css part that lists :checked and change both of its entries with your new id's. i.e: .collapsible #collapsible-head1:checked ~ #field1 i.e: .collapsible #collapsible-head2:checked ~ #field2 and so on.
Its been 2 year ago . And i have been code since at university until now Im work been surfing every kafka docker and lots stuff. But when back to html i don't have any idea how to create a thing like this 🤣 man thanks alot for this simple and short video .
Thanks
Nice tutorial, but I'm getting this space between the icon and border that was created. How to fix this problem, thank you
how to make the collpasible appear when they have been hovered?
Thank you soooo much!
This video came in so clutch, searched for a tutorial like this for days, finally found this. Nice video man
Thanks @KappiNor
thanks bro
Great video, simple and everything still works even two years later!
how is this simple? when he already has the code before the video. nice video tho
what is arrow.svg?
Its just a icon name
But it's not showing arrow...
@@supriyosahoo6007 its in his files. You need to download a SVG files from online or make your own. Then he linked it in his code VIA url()
Brother i did same but icons are not showing
Hi Adeel, may be you are missing something, please try once more
Why you used SVG URL in href? Now how to add link on icons now?
I have used SVG url to call icons from external file, you can add link in outer anchor tag.
@@EnhanceCoding In my case, i already used anchor tag on image and linked to details page but i need to put image preview icon on image and svg already inside the anchor.
I cant open it. All i see is the black screen
plz sharre code folder of this
i want css file of this
My screen is just black where it says all those things that but I can't open it to my PC I can't do anything so how do I get it off the black screen
Thank’s broo
Give this code
This is the best svg sprite walkthrough I've seen. Thank you. I was having a hard time with the class, Id and symbols.
Thanks @Christopher
This is not a good tutorial. The whole point is to automate this process not do it manually like this.
@@techtipsuk I think you are wrong ! Before automating, it is necessary, above all, to understand.
@@techtipsuk So how one automates this? Can you elaborate?
@@2hanza4 Once you have node installed you could either use webpack or vite or some other packages to facilitate your work. Cheers))
After adding path in environment variable it still showing this error. Please help me
Hi, please restart your server once
can you please provide the code for this
thank you
Thnq for solving my prblms
Thanks @tanu
Ll
&7
I saw many videos, nothing worked. Thank you man, very helpful.
Good job 👍 keep it up
Thanks