CXDI - Serve Technology

Not knowing the basic tech can sometimes increase the size, affect the performance and add an extra layer of complexity to the project. This article is a heads up that you can do a lot with just vanilla HTML and a bit of CSS if you want it to look pretty. I have collected some of the most useful HTML tags and attributes, so you can study them and use in your next project. I also created 12 separate Codepens , so you can get a live taste and play around with the examples. 🎨 Color Picker Often in the developer workflow you might want to access the color spectrum and be able to pick up any shade from it. You can use <input type="color"> , which would otherwise be a time-consuming task to write from scratch. 📚 Blockquote When writing articles you might want to highlight some of your favorites quotes. You can use a <blockquote> tag for that. Add some custom styling and you have a nice element that wi...

How to blur background/element in html using css - Css Filters - grayscale , hue-rotate and blur() Visit W3Schools :-  https://www.w3schools.com/cssref/css3_pr_filter.asp    filter : blur ( 10px );    filter : grayscale( 100% ) ;    filter : hue-rotate( 90deg ) ; CSS Syntax filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); Tip:  To use multiple filters, separate each filter with a space (See "More Examples" below). Filter Functions Note:  The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75). Filter Description Play it none Default value. Specifies no effects Play it » blur( px ) Applies a blur effect to the image. A larger value will create more blur. If no value is specified, 0 is used. Play it » brightness( % ) Adjusts the brightness of the image. 0% wi...

Animate.css Integration | A cross-browser library of CSS animations. < head > < link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css " /> </ head > Website :-  https://animate.style/ See the Pen Animate.css Just-add-water CSS animations by SH20RAJ ( @SH20RAJ ) on CodePen .

BLONDBTUN - A MIXED BUTTON LIBRARY Visit :-  https://blondbtun.blogspot.com/ 1. with External Library Imported (bttn.surge.sh)

The Best Choice Listed Here  1.  https://statically.io/  host directly from Github 2. Use JsDelivr  https://www.jsdelivr.com/   See Article        host directly from Github Example :-  https://scriptdecent.blogspot.com/ 1. Glitch  Website :- https://glitch.com/ 2. Github Website :-  https://github.com/ by Using https://pages.github.com 3. Google Drive  Website :-  Using Drive Direct Download Feature or Using https://drv.tw 4. Yourjavascript.com Website :-  http://yourjavascript.com/ 5. Repl.it (Recommended) Website :-  https://repl.it/ 6. Codepen  Website :-  https://codepen.io/ Using by adding .js in last of url You can Find may other js hosting sites here .  https://codexdindia.blogspot.com/2020/12/top-free-static-hosting-provider.html

1. 404-Error-Page (SVG)   --------------------------------------------------------------------------- 2. Animating-error-page             ---------------------------------------------------------------------------

Full File Here Steps :-  The Audio Tag Syntax <audio controls id="player"> <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg" type="audio/ogg"> <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" type="audio/mpeg"> Your browser does not support the audio element.-- CodeXD - India </audio> Javascript CDN Just Before </body> Tag <script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.min.js"></script> </ body > CSS CDN Just Before </head> Tag <!-- Docs styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" /> </ head > See Demo :- Your browser does not support the audio element.-- CodeXD - India

Add Clock Gadget for blogger Note - Adjust Width and Height According to Your Website ........... Steps :- 1.  Go to 'Layouts' . 2.  Click on 'dd a Gadget' . 3. Click on HTML/Javascript . 4. Paste Your Code There and Save It . Yeh ! A Clock Frame/Gadjet is added To your Website ..... 1. Glitch Clock  < iframe   width = "100%"   height = "315"   src = "https://glitchclock.blogspot.com/"   scrolling = "no" style = " margin: 0cm;  " frameborder = "0"   allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"   allowfullscreen > </ iframe > 2. Digital Clock with vue.js < iframe   width = "100%"   height = "315"   src = "https://digitalclockxd.blogspot.com/"   scrolling = "no" style = " margin: 0cm;  " frameborder = "0"   allow = "accelerometer; autoplay;...