#HTMLTricks
Explore tagged Tumblr posts
Visit Tumblr Blog
Explore Tumblr blogs with no restrictions, modern design and the best experience.
Last Seen Tumblr Blogs
Fun Fact
Tumblr has 16.74 million mobile monthly users in the US.
Text
#BloggerTricks#BloggingExpert#RemoveImageBlogger#BloggerLayoutTips#BlogspotHelp#BloggerSEO#BloggingTips#ImageDelete#WebsiteSpeed#HTMLTricks#NewBlogger#BlogSetup#BloggerCustomization#BloggerGuide#BloggerDesign#BloggingHelp#BlogOptimization#TechTricks#DigitalBlogging#BloggerIndia
0 notes
Text
💾 HTML Trick: Create a File Download Button (No JavaScript Needed!)
If you're into clean code and simplicity, this tip’s for you.
👉 Just use the download attribute like this:
<a href="file.pdf" download>Download File</a>
✅ Beginner-friendly
✅ Improves UX
✅ No scripts required
🎥 Watch the full 30-second tutorial:
youtube
Follow for more web dev tricks and Hinglish tutorials.
#HTMLTrick #DownloadButton #NoJavaScript #FrontendDev #HTMLTips #CodeAesthetic #TumblrTech
0 notes
Photo
😎😆😆 Follow @frontendforever for further updates #htmlandcss #htmlmeme #htmlcoding #htmltheme #htmlcode #htmlifestyle #htmlmemes #htmlskills #htmlcanvas #htmlcodes #htmlcssjs #htmlprogrammer #htmltricks #htmlcss #html #htmlforbeginners #cssmeme #css #cssgrid #css2021 #csstudents #cssmemes #cssanimation #csstutorial #css3 #csstricks #htmlcss #webdevelopermeme #webdevelop #webdesignmemes #webdesignerlife https://www.instagram.com/p/CThUmRHpRbc/?utm_medium=tumblr
#htmlandcss#htmlmeme#htmlcoding#htmltheme#htmlcode#htmlifestyle#htmlmemes#htmlskills#htmlcanvas#htmlcodes#htmlcssjs#htmlprogrammer#htmltricks#htmlcss#html#htmlforbeginners#cssmeme#css#cssgrid#css2021#csstudents#cssmemes#cssanimation#csstutorial#css3#csstricks#webdevelopermeme#webdevelop#webdesignmemes#webdesignerlife
3 notes
·
View notes
Text
Css Tricks
Ripple Effect in CSS
In this article, we'll be taking a look at the structure inside ul>li elements inconsistencies, what we can create with this. I know that you think about ul and li that we can use this for creating a navigation bar and other list but you are wrong we can create some amazing things too. In this, I can show you the endless possibilities of boring ul and li and how to dig into it. Having a good understanding of this concept of understanding allows us to evaluate a certain look that we can be achieved and how to do so with a minimum amount of effort and code. Here's exactly what we're talking about:
youtube
And here, how you can do it.
HTML CODE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ripple Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class='ripple'> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
CSS CODE
body { background-color: #124364; }
ul.ripple { width: 0px; height: 0px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); perspective: 1200px; transform-style: preserve-3d; animation: rot 6s ease-in-out alternate infinite; background-color: red; }
ul.ripple li { width: 20px; height: 20px; border: 3px dotted #3498db; border-radius: 50%; position: absolute; top: 0; left: 0; transform-style: preserve-3d; animation: ripple 2s ease-in-out infinite; }
ul.ripple li:nth-of-type(25) { border-color: #a0cfee; width: 500px; height: 500px; left: -250px; top: -250px; animation-delay: 1.25s; }
ul.ripple li:nth-of-type(24) { border-color: #9ccded; width: 480px; height: 480px; left: -240px; top: -240px; animation-delay: 1.2s; }
ul.ripple li:nth-of-type(23) { border-color: #98cbed; width: 460px; height: 460px; left: -230px; top: -230px; animation-delay: 1.15s;}
ul.ripple li:nth-of-type(22) { border-color: #93c8ec; width: 440px; height: 440px; left: -220px; top: -220px; animation-delay: 1.1s; }
ul.ripple li:nth-of-type(21) { border-color: #8fc6eb; width: 420px; height: 420px; left: -210px; top: -210px; animation-delay: 1.05s; }
ul.ripple li:nth-of-type(20) { border-color: #8bc4ea; width: 400px; height: 400px; left: -200px; top: -200px; animation-delay: 1s; }
ul.ripple li:nth-of-type(19) { border-color: #86c2ea; width: 380px; height: 380px; left: -190px; top: -190px; animation-delay: 0.95s; }
ul.ripple li:nth-of-type(18) { border-color: #82c0e9; width: 360px; height: 360px; left: -180px; top: -180px; animation-delay: 0.9s; }
ul.ripple li:nth-of-type(17) { border-color: #7ebde8; width: 340px; height: 340px; left: -170px; top: -170px; animation-delay: 0.85s; }
ul.ripple li:nth-of-type(16) { border-color: #79bbe7; width: 320px; height: 320px; left: -160px; top: -160px; animation-delay: 0.8s; }
ul.ripple li:nth-of-type(15) { border-color: #75b9e7; width: 300px; height: 300px; left: -150px; top: -150px; animation-delay: 0.75s; }
ul.ripple li:nth-of-type(14) { border-color: #71b7e6; width: 280px; height: 280px; left: -140px; top: -140px; animation-delay: 0.7s; }
ul.ripple li:nth-of-type(13) { border-color: #6cb5e5; width: 260px; height: 260px; left: -130px; top: -130px; animation-delay: 0.65s; }
ul.ripple li:nth-of-type(12) { border-color: #68b2e4; width: 240px; height: 240px; left: -120px; top: -120px; animation-delay: 0.6s; }
ul.ripple li:nth-of-type(11) { border-color: #64b0e3; width: 220px; height: 220px; left: -110px; top: -110px; animation-delay: 0.55s; }
ul.ripple li:nth-of-type(10) { border-color: #5faee3; width: 200px; height: 200px; left: -100px; top: -100px; animation-delay: 0.5s; }
ul.ripple li:nth-of-type(9) { border-color: #5bace2; width: 180px; height: 180px; left: -90px; top: -90px; animation-delay: 0.45s; }
ul.ripple li:nth-of-type(8) { border-color: #57aae1; width: 160px; height: 160px; left: -80px; top: -80px; animation-delay: 0.4s; }
ul.ripple li:nth-of-type(7) { border-color: #52a7e0; width: 140px; height: 140px; left: -70px; top: -70px; animation-delay: 0.35s; }
ul.ripple li:nth-of-type(6) { border-color: #4ea5e0; width: 120px; height: 120px; left: -60px; top: -60px; animation-delay: 0.3s; }
ul.ripple li:nth-of-type(5) { border-color: #4aa3df; width: 100px; height: 100px; left: -50px; top: -50px; animation-delay: 0.25s; }
ul.ripple li:nth-of-type(4) { border-color: #45a1de; width: 80px; height: 80px; left: -40px; top: -40px; animation-delay: 0.2s; }
ul.ripple li:nth-of-type(3) { border-color: #419fdd; width: 60px; height: 60px; left: -30px; top: -30px; animation-delay: 0.15s; }
ul.ripple li:nth-of-type(2) { border-color: #3d9cdd; width: 40px; height: 40px; left: -20px; top: -20px; animation-delay: 0.1s; }
ul.ripple li:nth-of-type(1) { border-color: #389adc; width: 20px; height: 20px; left: -10px; top: -10px; animation-delay: 0.05s; }
@keyframeserendipity ripple {
0% { transform: translateZ(0) translate3d(0, 0, 0) rotate(0); }
33% {transform: translateZ(100px) translate3d(0, 0, 0);}
67% { transform: translateZ(-100px) translate3d(0, 0, 0); }
100% { transform: translateZ(0) translate3d(0, 0, 0) rotate(180deg); }
}
@keyframes rot {
0% { transform: rotateX(5deg) rotateY(5deg); }
50% { transform: rotateX(11deg) rotateY(-37.9deg); }
100% { transform: rotateX(11deg) rotateY(-37.9deg); }
}
1 note
·
View note
Text
#BloggingExpert#BloggerTricks#MobileHTML#BloggerCustomization#ResponsiveBlogger#BlogspotTips#BloggingTutorial#BloggerMobileView#HTMLTricks#EditBloggerHTML#BloggingHelp#SEOForBlogger#BloggerResponsiveTheme#TechBlogging#CustomizeBlogger#MobileFriendlyBlog#MobileViewFix#WebDesignTips#BloggerThemeEdit#2025BlogTips
0 notes
Video
😎Laser Animation With HTML & CSS This Video Tutorial Is In 👉English : https://youtu.be/8EXW-IA3EmA 👉Tamil : https://youtu.be/V68kMFedDjI Visit my youtube channel Link In Bio👆 Follow @frontendforever for further updates . . . . #html #htmlcoding #css #cssanimation #cssproject #cssprogramming #webdev #webdesigns #webdesigning #htmlandcss #htmlskills #htmlcanvas #htmlprogrammer #htmltricks #htmlforbeginners #htmltemplate #htmltutorials #htmlcss #htmlcssproject #htmlcssjs #htmlcssjavascript #web #websitedesign #frontend #frontenddev #frontendfriday #frontenddesign #developer #csstutorial #css3 https://www.instagram.com/p/CThnaXGJw1v/?utm_medium=tumblr
#html#htmlcoding#css#cssanimation#cssproject#cssprogramming#webdev#webdesigns#webdesigning#htmlandcss#htmlskills#htmlcanvas#htmlprogrammer#htmltricks#htmlforbeginners#htmltemplate#htmltutorials#htmlcss#htmlcssproject#htmlcssjs#htmlcssjavascript#web#websitedesign#frontend#frontenddev#frontendfriday#frontenddesign#developer#csstutorial#css3
0 notes
Photo
HTML💪 Follow @frontendforever for further updates #html500 #htmlmeme #htmlbrasil #htmlcoding #htmlandcss #htmltheme #htmlcode #htmlifestyle #htmlmemes #htmlindonesia #htmlcoin #htmlskills #htmlcanvas #htmlcodes #htmlcssjs #htmlprogrammer #htmltricks #html5website #html #javamemes #javascriptmemes #csharp #cprogramming #javadeveloper #javascripttutorial #java #javascriptdevelopers #javaprogramming #tamilitmemes #tamilwebdesign https://www.instagram.com/p/CSN0CWbldMF/?utm_medium=tumblr
#html500#htmlmeme#htmlbrasil#htmlcoding#htmlandcss#htmltheme#htmlcode#htmlifestyle#htmlmemes#htmlindonesia#htmlcoin#htmlskills#htmlcanvas#htmlcodes#htmlcssjs#htmlprogrammer#htmltricks#html5website#html#javamemes#javascriptmemes#csharp#cprogramming#javadeveloper#javascripttutorial#java#javascriptdevelopers#javaprogramming#tamilitmemes#tamilwebdesign
0 notes